经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
仿百度图片首页--HTML+CSS练手项目1【Table】
来源：cnblogs　　作者：C_XingM　　时间：2019/7/8 8:49:06　　对本文有异议

【本文为原创，转载请注明出处】

技术【CSS+HTML】   布局【Table】

图片准备【百度图标、10张不同类型图】

------------------------------------------------------------------------------------------------------------

步骤1  table 布局

  1.  1 <!DOCTYPE html>
  2.  2 <html lang="en">
  3.  3 <head>
  4.  4     <meta charset="UTF-8">
  5.  5     <title>仿百度网页</title>
  6.  6 </head>
  7.  7 <body>
  8.  8 <table">
  9.  9     <tr>
  10. 10         <td></td>
  11. 11         <td></td>
  12. 12         <td></td>
  13. 13         <td></td>
  14. 14         <td></td>
  15. 15         <td></td>
  16. 16         <td></td>
  17. 17         <td></td>
  18. 18         <td></td>
  19. 19     </tr>
  20. 20     <tr>
  21. 21         <td colspan="9"></td>
  22. 22     </tr>    
  23. 23     <tr>
  24. 24         <td colspan="9">
  25. 25             <input type="text"/><button></button>
  26. 26         </td>
  27. 27     </tr>
  28. 28     <tr>
  29. 29         <td colspan="9">
  30. 30             <table >
  31. 31                 <tr>
  32. 32                     <td></td>
  33. 33                     <td></td>
  34. 34                     <td></td>
  35. 35                     <td></td>
  36. 36                     <td></td>
  37. 37                 </tr>
  38. 38                 <tr>
  39. 39                     <td></td>
  40. 40                     <td></td>
  41. 41                     <td></td>
  42. 42                     <td></td>
  43. 43                     <td></td>
  44. 44                 </tr>
  45. 45             </table>
  46. 46         </td>
  47. 47 
  48. 48     </tr>
  49. 49     <tr>
  50. 50         <td colspan="9">
  51. 51         </td>
  52. 52     </tr>
  53. 53 </table>
  54. 54 </body>
  55. 55 </html>
table布局

步骤2  填充HTML内容

html要求：跨行合并

                 table嵌套table

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿百度网页</title>
  6. </head>
  7. <body>
  8. <table>
  9.     <tr>
  10.         <td><a href="#">收藏本页</a></td>
  11.         <td><span>|</span></td>
  12.         <td><a href="#">百度首页</a></td>
  13.         <td><span>|</span></td>
  14.         <td><a href="#">百度图片APP</a></td>
  15.         <td><span>|</span></td>
  16.         <td><a href="#">登录</a></td>
  17.         <td><span>&nbsp;</span></td>
  18.         <td><a href="#">注册</a></td>
  19.     </tr>
  20.     <tr>
  21.         <td colspan="9"><img src="img/logo.png"/></td>
  22.     </tr>    
  23.     <tr>
  24.         <td colspan="9">
  25.             <input type="text"/><button>百度一下</button>
  26.         </td>
  27.     </tr>
  28.     <tr>
  29.         <td colspan="9">
  30.             <table>
  31.                 <tr>
  32.                     <td><a href="#"><img src="img/img01.jpeg" /></a></td>
  33.                     <td><a href="#"><img src="img/img02.jpeg" /></a></td>
  34.                     <td><a href="#"><img src="img/img03.jpeg" /></a></td>
  35.                     <td><a href="#"><img src="img/img04.jpeg" /></a></td>
  36.                     <td><a href="#"><img src="img/img05.jpeg" /></a></td>
  37.                 </tr>
  38.                 <tr>
  39.                     <td><a href="#"><img src="img/img06.jpeg" /></a></td>
  40.                     <td><a href="#"><img src="img/img07.jpeg" /></a></td>
  41.                     <td><a href="#"><img src="img/img08.jpeg" /></a></td>
  42.                     <td><a href="#"><img src="img/img09.jpeg" /></a></td>
  43.                     <td><a href="#"><img src="img/img10.jpeg" /></a></td>
  44.                 </tr>
  45.             </table>
  46.         </td>
  47.  
  48.     </tr>
  49.     <tr>
  50.         <td colspan="9">
  51.             <span>&copy;2016 Baidu</span>
  52.             <a href="#">使用百度前必读</a>
  53.             <span>|</span>
  54.             <a href="#">高级搜索</a>
  55.             <span>|</span>
  56.             <a href="3">帮助</a>
  57.         </td>
  58.     </tr>
  59. </table>
  60. </body>
  61. </html>
完善网页

步骤3 CSS样式【大小、位置、颜色、图片】

css要求：导航栏浮右，字体颜色大小，内外边距

                百度图标大小，位置居中，内外边距

                 输入框和按钮颜色、长度和宽度，字体颜色，内外边距

                 照片模块的位置、半透明背景、图片大小，内外边距

                 底部导航栏位置居中，居于底部【不足之处，浏览器窗口大小改变任一直位于底部】

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿百度网页</title>
  6.     <link rel="stylesheet" href="css/index.css">
  7. </head>
  8. <body>
  9. <table class="table-one">
  10.     <tr class="nav">
  11.         <td><a href="#">收藏本页</a></td>
  12.         <td><span>|</span></td>
  13.         <td><a href="#">百度首页</a></td>
  14.         <td><span>|</span></td>
  15.         <td><a href="#">百度图片APP</a></td>
  16.         <td><span>|</span></td>
  17.         <td><a href="#">登录</a></td>
  18.         <td><span>&nbsp;</span></td>
  19.         <td><a href="#">注册</a></td>
  20.     </tr>
  21.     <tr class="logo">
  22.         <td colspan="9"><img src="img/logo.png"/></td>
  23.     </tr>    
  24.     <tr class="search">
  25.         <td colspan="9">
  26.             <input type="text"/><button>百度一下</button>
  27.         </td>
  28.     </tr>
  29.     <tr class="picture">
  30.         <td colspan="9">
  31.             <table class="table-two">
  32.                 <tr>
  33.                     <td><a href="#"><img src="img/img01.jpeg" /></a></td>
  34.                     <td><a href="#"><img src="img/img02.jpeg" /></a></td>
  35.                     <td><a href="#"><img src="img/img03.jpeg" /></a></td>
  36.                     <td><a href="#"><img src="img/img04.jpeg" /></a></td>
  37.                     <td><a href="#"><img src="img/img05.jpeg" /></a></td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td><a href="#"><img src="img/img06.jpeg" /></a></td>
  41.                     <td><a href="#"><img src="img/img07.jpeg" /></a></td>
  42.                     <td><a href="#"><img src="img/img08.jpeg" /></a></td>
  43.                     <td><a href="#"><img src="img/img09.jpeg" /></a></td>
  44.                     <td><a href="#"><img src="img/img10.jpeg" /></a></td>
  45.                 </tr>
  46.             </table>
  47.         </td>
  48.  
  49.     </tr>
  50.     <tr class="foot">
  51.         <td colspan="9">
  52.             <span>&copy;2016 Baidu</span>
  53.             <a href="#">使用百度前必读</a>
  54.             <span>|</span>
  55.             <a href="#">高级搜索</a>
  56.             <span>|</span>
  57.             <a href="#">帮助</a>
  58.         </td>
  59.     </tr>
  60. </table>
  61. </body>
  62. </html>
完整的index.html
  1. *{
  2.     /* 消除浏览器的影响*/
  3.     margin: 0px;
  4.     padding: 0px;
  5. }
  6. body{
  7.     background: url("../img/background.jpg");
  8.     /*设置背景图片大小 background-size: 100%;*/
  9.     background-size: 100%;
  10. }
  11. a{
  12.     text-decoration: none;
  13. }
  14. table{
  15.     width: 100%;
  16.     height: 100%;
  17. }
  18. /*顶部导航*/
  19. .nav{
  20.     float:right;
  21. }
  22. .nav td{
  23.     float: left;
  24.     padding: 5px 2px 5px 0px;
  25. }
  26. .nav a{
  27.     font-size: 11px;
  28.     color: #FFFFFF;
  29. }
  30. .nav span{
  31.     font-size: 11px;
  32.     color: #FFFFFF;
  33. }
  34. /*网页logo*/
  35. .logo td{
  36.     text-align: center;
  37. }
  38. .logo img{
  39.     width: 250px;
  40.     margin: 50px 0px 10px 0px ;
  41. }
  42. /*搜索框*/
  43. .search td{
  44.     text-align: center;
  45.     padding: 0px 0px 40px 0px;
  46. }
  47. .search input{
  48.     width: 450px;
  49.     width: 450px;
  50.     height: 33px;
  51.     /*input和button对不齐 input和button都加上vertical-align:top；*/
  52.     vertical-align: top;
  53. }
  54. .search button{
  55.     width: 90px;
  56.     height: 37px;
  57.     font-size: 13px;
  58.     color: #FFFFFF;
  59.     background-color: #38f;
  60.     /*input和button对不齐 input和button都加上vertical-align:top；*/
  61.     vertical-align: top;
  62.     border: #38f;;
  63. }
  64. /*图片*/
  65. .table-two{
  66.     width: 674px;
  67.     height: 272px;
  68.     margin: 0 auto;
  69.     /*半透明背景色  background-color:rgba(255,255,255,0.3);*/
  70.     background-color:rgba(255,255,255,0.3);
  71.     padding: 4px 4px 0px 4px;
  72. }
  73. .table-two img{
  74.     width: 130px;
  75.     height: 130px;
  76.     margin: 2px 2px 2px 2px;
  77. }
  78. /*脚注*/
  79. .foot td{
  80.     position: fixed;
  81.     bottom: 5px;
  82.     left: 0;
  83.     right: 0;
  84.     text-align: center;
  85. }
  86. .foot a,span{
  87.     color: #FFFFFF;
  88.     font-size: 15px;
  89.     padding: 0px 2px 0px 0px;
  90. }
完整的index.css

步骤4 知识点整理

设置背景图片大小    background-size: 100%;

margin:0 auto; 与 text-aglin的区别 【未整理】

底部导航栏     position: fixed; bottom: 5px; left: 0;right: 0;*/

半透明背景色   background-color:rgba(255,255,255,0.3);

input和button对不齐   vertical-align:top；

-------------------------------------------------------------------------

【完整代码链接：还未上传，可私聊我】

【不足之处望指出，一起努力学习前端】

原文链接：http://www.cnblogs.com/Caixingmin/p/11144408.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号