search

博客列表 >1220作业

1220作业

建国
建国原创
2019年12月23日 11:15:20500浏览

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

完成效果图

上一条：mysql -- 子查询下一条：HTML标签学习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多