1、作业要求
照图写网页：
2、作业
2.1 文档结构
|根目录|--exercise.html||--css| |--style.css||--font| |--iconfont.css| |--iconfont.eot| |--iconfont.js| |--iconfont.svg| |--iconfont.ttf| |--iconfont.woff| |--iconfont.woff2||--images| |--banner_aside.jpg| |--banner_left.jpg| |--header_left_logo.png
2.2 代码
2.2.1 html部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>页面布局作业</title><link rel="stylesheet" href="font/iconfont.css"><link rel="stylesheet" href="css/style.css"></head><body><header><div class="header_top"><div class="header_left"><!-- <img src="images/header_left_logo.png" alt=""> --><div class="hedaer_left_logo"><i>PHP</i></div><div class="header_left_text"><i>中文网</i></div></div><div class="header_nav"><li><span class="iconfont icon-huiyuan1"></span></li><li><span class="iconfont icon-danmu1"></span></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li><li><span class="iconfont"></span></li></div><div class="header_search"><div class="searchdiv"><input type="text" placeholder="请输入要搜索的内容" /><div class="search_button"><span class="iconfont icon-jinduchaxun"></span></div></div></div></div><div class="header_menu"><div class="header_menu_child"><div class="header_menu_child_title"><div class="ico"><span class="iconfont icon-gongdan"></span></div><div class="item"><li>资讯</li><li>学习</li></div></div><div class="header_menu_item"><li><a href="">器材</a></li><li><a href="">大师</a></li><li><a href="">学院</a></li><li><a href="">实战</a></li><li><a href="">大赛</a></li><li><a href="">裤子</a></li><li><a href="">影视</a></li><li><a href="">其它</a></li></div></div><div class="header_menu_child"><div class="header_menu_child_title"><div class="ico"><span class="iconfont icon-renwujincheng"></span></div><div class="item"><li>爱好</li><li>姐妹</li></div></div><div class="header_menu_item"><li><a href="">有品</a></li><li><a href="">图片</a></li><li><a href="">喝水</a></li><li><a href="">飞机</a></li><li><a href="">坦克</a></li><li><a href="">气球</a></li><li><a href="">毛线</a></li><li><a href="">其它</a></li></div></div><div class="header_menu_child"><div class="header_menu_child_title"><div class="ico"><span class="iconfont icon-gongdan"></span></div><div class="item"><li>软件</li><li>技能</li></div></div><div class="header_menu_item"><li><a href="">学习</a></li><li><a href="">爱国</a></li><li><a href="">敬业</a></li><li><a href="">友善</a></li><li><a href="">富强</a></li><li><a href="">互助</a></li><li><a href="">仁义</a></li><li><a href="">其它</a></li></div></div><div class="header_menu_child"><div class="header_menu_child_title"><div class="ico"><span class="iconfont icon-DOC"></span></div><div class="item"><li>编程</li><li>美女</li></div></div><div class="header_menu_item"><li><a href="">吃饭</a></li><li><a href="">周易</a></li><li><a href="">黄山</a></li><li><a href="">合肥</a></li><li><a href="">上海</a></li><li><a href="">杭州</a></li><li><a href="">北京</a></li><li><a href="">其它</a></li></div></div></div></header><div class="banner"><div class="banner_left"><img src="images/banner_left.jpg" alt=""></div><div class="banner_aside"><img src="images/banner_aside.jpg" alt=""></div></div></body></html>
2.2.2 css部分(style.css)
*{margin:0;padding:0;box-sizing: border-box}header{width:1200px;margin:50px auto 20px auto;}/****顶部****/.header_top{margin-bottom:45px;}/**LOGO**/.header_left{display:inline-block;}.header_left img{width:154px;}.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;}.header_left_text{display: inline-block;line-height: 36px;font-size: 26px;font-weight: bold;color:#F02A29}/**LOGO部分结束**//**搜索框**/.header_search{float:right;margin-right:35px;}/*文字输入部分*/.searchdiv{border:1px solid #cccccc;height:36px;border-radius: 10px;width:333px;overflow: hidden}.searchdiv input{border:none;height: 36px;width:300px;line-height: 36px;outline: none;padding-left: 10px;}/*文字输入部分结束*//*搜索按钮*/.search_button{width:30px;float:right}.search_button span{font-size:25px;line-height: 36px;cursor: pointer}/*搜索按钮结束*//**搜索框部分结束**//**右侧功能区**/.header_nav{float:right}.header_nav li{display: inline-block;margin:0 10px}.header_nav li span{font-size: 30px;line-height: 36px;}/**右侧功能区结束**//***顶部结束***//***中部菜单区***/.header_menu{width:100%;overflow: hidden;}.header_menu .header_menu_child{width:25%;float:left}/*菜单区分成四部分*//**左侧部分**/.header_menu_child_title{width:83px;border-right:1px solid #CCCCCC;display:inline-block}.header_menu_child_title .ico{display: inline-block;width:40px;text-align: center;}/*图标*/.header_menu_child_title .ico span{font-size: 35px;color:#E4322E}.header_menu_child_title .item{display: inline-block;}/*文字*/.header_menu_child_title .item li{font-size: 14px;color:#606060;list-style: none}/**左侧部分结束**//**右侧文字菜单**/.header_menu_item{width:150px;padding:0 5px;display: inline-block;}.header_menu_item li{list-style: none;display:inline-block;width:22%;text-align: center;font-size: 14px;line-height: 20px;}.header_menu_item li a{text-decoration: none;color:#606060}.header_menu_item li a:hover{color:red}/**右侧文字菜单结束**//***中部菜单区结束***//***图片区***/.banner{width:1200px;margin:0 auto;overflow: hidden;}.banner_left{height:320px;float: left;}/*左图*/.banner_aside{height:320px;float:right;}/*右图*/.banner img{height:100%;}/*图片高度：因为图片裁切尺寸符合要求，所以未设置宽度*//***图片区结束***//***字体图标部***/@font-face {font-family: "iconfont";src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');}.iconfont {font-family: "iconfont logo";font-size: 160px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/***字体图标结束***/
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
完成效果图