简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 1220作业
Blogger Information
Blog 7
fans 0
comment 0
visits 4319
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1220作业
建国
Original
498 people have browsed it

1、作业要求

照图写网页：

2、作业

2.1 文档结构

  1. |根目录
  2. |--exercise.html
  3. |
  4. |--css
  5. |  |--style.css
  6. |
  7. |--font
  8. |  |--iconfont.css
  9. |  |--iconfont.eot
  10. |  |--iconfont.js
  11. |  |--iconfont.svg
  12. |  |--iconfont.ttf
  13. |  |--iconfont.woff
  14. |  |--iconfont.woff2
  15. |
  16. |--images
  17. |  |--banner_aside.jpg
  18. |  |--banner_left.jpg
  19. |  |--header_left_logo.png

2.2 代码

2.2.1 html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>页面布局作业</title>
  6.     <link rel="stylesheet" href="font/iconfont.css">
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10. <header>
  11.     <div class="header_top">
  12.         <div class="header_left">
  13.             <!-- <img src="images/header_left_logo.png" alt=""> -->
  14.             <div class="hedaer_left_logo"><i>PHP</i></div><div class="header_left_text"><i>中文网</i></div>
  15.         </div>
  16.         <div class="header_nav">
  17.             <li><span class="iconfont icon-huiyuan1"></span></li>
  18.             <li><span class="iconfont icon-danmu1"></span></li>
  19.             <li><span class="iconfont">&#xec0a;</span></li>
  20.             <li><span class="iconfont">&#xec14;</span></li>
  21.             <li><span class="iconfont">&#xe60e;</span></li>
  22.             <li><span class="iconfont">&#xec80;</span></li>
  23.         </div>
  24.         <div class="header_search">
  25.             <div class="searchdiv">
  26.                 <input type="text" placeholder="请输入要搜索的内容" />
  27.                 <div class="search_button">
  28.                     <span class="iconfont icon-jinduchaxun"></span>
  29.                 </div>
  30.             </div>
  31.         </div>
  32.     </div>
  33.     <div class="header_menu">
  34.         <div class="header_menu_child">
  35.             <div class="header_menu_child_title">
  36.                 <div class="ico"><span class="iconfont icon-gongdan"></span></div>
  37.                 <div class="item">
  38.                     <li>资讯</li>
  39.                     <li>学习</li>
  40.                 </div>
  41.             </div>
  42.             <div class="header_menu_item">
  43.                 <li><a href="">器材</a></li>
  44.                 <li><a href="">大师</a></li>
  45.                 <li><a href="">学院</a></li>
  46.                 <li><a href="">实战</a></li>
  47.                 <li><a href="">大赛</a></li>
  48.                 <li><a href="">裤子</a></li>
  49.                 <li><a href="">影视</a></li>
  50.                 <li><a href="">其它</a></li>
  51.             </div>
  52.         </div>
  53.         <div class="header_menu_child">
  54.             <div class="header_menu_child_title">
  55.                 <div class="ico"><span class="iconfont icon-renwujincheng"></span></div>
  56.                 <div class="item">
  57.                     <li>爱好</li>
  58.                     <li>姐妹</li>
  59.                 </div>
  60.             </div>
  61.             <div class="header_menu_item">
  62.                 <li><a href="">有品</a></li>
  63.                 <li><a href="">图片</a></li>
  64.                 <li><a href="">喝水</a></li>
  65.                 <li><a href="">飞机</a></li>
  66.                 <li><a href="">坦克</a></li>
  67.                 <li><a href="">气球</a></li>
  68.                 <li><a href="">毛线</a></li>
  69.                 <li><a href="">其它</a></li>
  70.             </div>
  71.         </div>
  72.         <div class="header_menu_child">
  73.             <div class="header_menu_child_title">
  74.                 <div class="ico"><span class="iconfont icon-gongdan"></span></div>
  75.                 <div class="item">
  76.                     <li>软件</li>
  77.                     <li>技能</li>
  78.                 </div>
  79.             </div>
  80.             <div class="header_menu_item">
  81.                 <li><a href="">学习</a></li>
  82.                 <li><a href="">爱国</a></li>
  83.                 <li><a href="">敬业</a></li>
  84.                 <li><a href="">友善</a></li>
  85.                 <li><a href="">富强</a></li>
  86.                 <li><a href="">互助</a></li>
  87.                 <li><a href="">仁义</a></li>
  88.                 <li><a href="">其它</a></li>
  89.             </div>
  90.         </div>
  91.         <div class="header_menu_child">
  92.             <div class="header_menu_child_title">
  93.                 <div class="ico"><span class="iconfont icon-DOC"></span></div>
  94.                 <div class="item">
  95.                     <li>编程</li>
  96.                     <li>美女</li>
  97.                 </div>
  98.             </div>
  99.             <div class="header_menu_item">
  100.                 <li><a href="">吃饭</a></li>
  101.                 <li><a href="">周易</a></li>
  102.                 <li><a href="">黄山</a></li>
  103.                 <li><a href="">合肥</a></li>
  104.                 <li><a href="">上海</a></li>
  105.                 <li><a href="">杭州</a></li>
  106.                 <li><a href="">北京</a></li>
  107.                 <li><a href="">其它</a></li>
  108.             </div>
  109.         </div>
  110.     </div>
  111. </header>
  112. <div class="banner">
  113.     <div class="banner_left">
  114.         <img src="images/banner_left.jpg" alt="">
  115.     </div>
  116.     <div class="banner_aside">
  117.         <img src="images/banner_aside.jpg" alt="">
  118.     </div>
  119. </div>
  120. </body>
  121. </html>

2.2.2 css部分(style.css)

  1. *{margin:0;padding:0;box-sizing: border-box}
  3. header{width:1200px;margin:50px auto 20px auto;}
  5. /****顶部****/
  6. .header_top{margin-bottom:45px;}
  8. /**LOGO**/
  9. .header_left{display:inline-block;}
  10. .header_left img{width:154px;}
  11. .hedaer_left_logo{height: 36px;line-height: 36px;border-radius: 50%;background:#EF272A;width:57px;padding-left:3px;font-size:20px;color:white;font-weight: bold;display: inline-block;}
  12. .header_left_text{display: inline-block;line-height: 36px;font-size: 26px;font-weight: bold;color:#F02A29}
  13. /**LOGO部分结束**/
  15. /**搜索框**/
  16. .header_search{float:right;margin-right:35px;}
  17. /*文字输入部分*/
  18. .searchdiv{border:1px solid #cccccc;height:36px;border-radius: 10px;width:333px;overflow: hidden}
  19. .searchdiv input{border:none;height: 36px;width:300px;line-height: 36px;outline: none;padding-left: 10px;}
  20. /*文字输入部分结束*/
  21. /*搜索按钮*/
  22. .search_button{width:30px;float:right}
  23. .search_button span{font-size:25px;line-height: 36px;cursor: pointer}
  24. /*搜索按钮结束*/
  25. /**搜索框部分结束**/
  27. /**右侧功能区**/
  28. .header_nav{float:right}
  29. .header_nav li{display: inline-block;margin:0 10px}
  30. .header_nav li span{font-size: 30px;line-height: 36px;}
  31. /**右侧功能区结束**/
  32. /***顶部结束***/
  34. /***中部菜单区***/
  35. .header_menu{width:100%;overflow: hidden;}
  36. .header_menu .header_menu_child{width:25%;float:left}/*菜单区分成四部分*/
  37. /**左侧部分**/
  38. .header_menu_child_title{width:83px;border-right:1px solid #CCCCCC;display:inline-block}
  39. .header_menu_child_title .ico{display: inline-block;width:40px;text-align: center;}/*图标*/
  40. .header_menu_child_title .ico span{font-size: 35px;color:#E4322E}
  41. .header_menu_child_title .item{display: inline-block;}/*文字*/
  42. .header_menu_child_title .item li{font-size: 14px;color:#606060;list-style: none}
  43. /**左侧部分结束**/
  45. /**右侧文字菜单**/
  46. .header_menu_item{width:150px;padding:0 5px;display: inline-block;}
  47. .header_menu_item li{list-style: none;display:inline-block;width:22%;text-align: center;font-size: 14px;line-height: 20px;}
  48. .header_menu_item li a{text-decoration: none;color:#606060}
  49. .header_menu_item li a:hover{color:red}
  50. /**右侧文字菜单结束**/
  52. /***中部菜单区结束***/
  54. /***图片区***/
  55. .banner{width:1200px;margin:0 auto;overflow: hidden;}
  56. .banner_left{height:320px;float: left;}/*左图*/
  57. .banner_aside{height:320px;float:right;}/*右图*/
  58. .banner img{height:100%;}/*图片高度：因为图片裁切尺寸符合要求，所以未设置宽度*/
  59. /***图片区结束***/
  61. /***字体图标部***/
  62. @font-face {
  63.     font-family: "iconfont";
  64.     src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
  65.     src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
  66.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
  67.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
  68.     url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
  69. }
  71. .iconfont {
  72.     font-family: "iconfont logo";
  73.     font-size: 160px;
  74.     font-style: normal;
  75.     -webkit-font-smoothing: antialiased;
  76.     -moz-osx-font-smoothing: grayscale;
  77. }
  78. /***字体图标结束***/

3、问题

  • 中部菜单右侧的文字部分，宽度都设置25%，使用float:left时，一行能显示4个，两行正好显示8个，而使用display:inline-block时，一行只能显示3个，8个分成了3行，display:inline-block有什么特殊之处？

4、 附图

banner_aside.jpg：

banner_left.jpg

header_left_logo.png

完成效果图

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：你的logo图片比例不对, 应该对图片单独设置一下
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！