2-12编程练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;}
ul{list-style:none;}
a{text-decoration:none;}
.header{
width:100%;
height:100px;
background:black;
overflow:hidden;
zoom:1;
}
.logo{
float:left;
margin:0 auto;
}
.nav{
float:right;
margin:0 auto;
}
.header .nav li{display:inline-block;}
.header .nav li a{
color:white;
float:left;
padding-right:50px;
text-align:center;
line-height:100px;
}
.container{
width:100%;
background:#87CEFA;
height:500px;
overflow:hidden;
zoom:1;
}
.container .left{
width:70%;
height:500px;
float:left;
}
.container .left .left1{
float:left;
margin:80px 80px;
}
.container .left .left2{
float:left;
margin:80px 80px ;
}
.bt{font:25px bold;}
span{background-color:pink;}
p{padding-bottom:20px;}
.container .middle{
width:1%;
height:500px;
background:orange;
float:left;
}
.container .right{
width:29%;
height:500px;
float:right;
}
.container .right div{
margin:80px 80px 20px 70px;
font:25px bold;}
.container .right form{
margin-left:80px;
}
.footer{
width:100%;
background:black;
height:100px;
overflow:hidden;
zoom:1;
}
.footer ul{text-align:center;}
.footer ul li{
display:inline-block;
}
.footer ul li a {
color:white;
line-height:100px;
padding:0 25px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//59093e9c00016ce303000100.png" alt=""></div>
<div class="nav">
<ul>
<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>
</ul>
</div>
</div>
<div class="container">
<div class="left">
<div class="left1">
<p class="bt">课程推荐</p>
<p><span>职业路径</span> Html与Css3实现动态网页</p>
<p><span>职业路径</span> 零基础入门Android语法与界面</p>
<p><span>职业路径</span> ios基础语法与常用控件</p>
<p><span>职业路径</span> PHP入门开发</p>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="left2">
<p class="bt">相关课程</p>
<p>HTML css JavaScript</p>
<p>HTML5 css3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="middle"></div>
<div class="right">
<div class="div1">登录</div>
<form>
<p><input type="text" placeholder="请输入登录邮箱/手机号" style="width:250px;height:30px;" ><br/></p>
<p><input type="password" placeholder="6-10位密码，区分大小写，不能用空格" style="width:250px;height:30px;"><br/></p>
<p><input type="button" value="登录" style="width:250px;height:30px;background-color:red;color:white;"></p>
</form>
</div>
</div>
<div class="footer">
<ul>
<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>
</ul>
</div>
</body>
</html>
请帮我看下是否有误，如果有更简洁的办法，麻烦告诉我。谢谢。
正在回答
同学你好，解答如下：
1、去掉text-align和float也有同样效果的原因是：a标签本身没有宽度，那么它的宽度其实是padding撑开的，所以去掉那两个属性，效果不会有其它改变的：
另，.nav li{display:inline-block;}让li水平排列，在一行显示；
而 .nav{ float:right;margin:0 auto;}中，float:right;让nav右浮动，但是margin:0 auto;是和浮动互斥的，因此去掉margin:0 auto;也是可以的。
2、是因为它们的box-sizing属性值不一样，关于box-sizing属性课程后面会讲到，这里先提一下，同学作为了解。如下：
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。主要是用来区分盒模型（内容宽度是否包括padding，border）
语法：box-sizing: content-box|border-box|inherit;
这里要讲一下ie盒子和W3C盒子，W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，
默认盒模型是：w3c盒子：
w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。
ie盒子：
IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.
这里有一个教辅，可以辅助同学理解：http://file.mukewang.com/class/assist/190/3661251/box-sizing%E6%95%99%E8%BE%85.pdf
3、区别如下：
display: block;的元素
1、会独占一行显示
2、 没有设置宽度的时候，撑满一整行
display: inline-block;的元素
1、可以让内联元素支持宽高
2、可以让块元素在一行排列
3、 没有设置宽度的时候，由内容撑开宽度
4、元素之间会存在间隙。
祝学习愉快~
同学你好，代码可做如下优化：
1. 头部左侧logo图父元素高度超出：
原因是图片是行内元素，底部有默认的间隙。
建议将其转成块级元素消除间隙，如下：
2. 右侧导航父元素高度也超出：
原因是给a设置了浮动后，a的高度就和父元素一样是100px，由于a是行内元素，底部有默认的间隙，因此a的整体高度就超出了100px，从而将父元素的高度撑大了。建议调整一下a的样式：
3. 中间的登录按钮，宽度与输入框不相等，并且使用了默认的边框，样式不好看：
建议调整一下按钮的宽度，并去掉边框，如下:
另，同学整体写的很棒，做上述优化就可以了。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星