CSS 2-9 基础布局 编程练习题
来源：2-10 编程练习
qq_诶姆_0
2017-08-10 11:57:28
老师，我想问一下，我自己设置的width:461.5为什么在F12里面调试的时候不管用呢？被划掉了。body的宽度是1423，所以我想左右各711.5再减去margin-left后就剩下461.5了。可不知道为什么不行。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
.head{
width: 100%;
height:100px;
background: black;
}
.photo{
float:left;
height: 100px;
}
.words{
float:right;
color: white;
margin-right: 50px;
}
.words span{
line-height: 100px;
}
.foot{
width: 100%;
height:100px;
background: black;
text-align: center;
}
.foot span{
line-height: 100px;
color: white;
}
.body{
width: 100%;
height:800px;
background-color: #4169e1;
margin: 0 auto;
}
.left{
width: 461.5;
height: 600px;
background-color: yellow;
float: left;
padding-top: 200px;
padding-left: 250px;
text-align: left;
}
.right{
width:461.5;
height: 600px;
background-color: red;
float: right;
padding-top: 200px;
padding-right: 250px;
text-align: left;
}
.list{
background-color: pink;
}
li{
list-style-type: none;
line-height: 3em;
}
</style>
</head>
<body>
<div class="head">
<div class="photo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/>
</div>
<div class="words">
<span>课程 职业 路径 实战 猿问 手记</span>
</div>
</div>
<div class="body">
<div class="left">
<h1>课程推荐</h1>
<ul >
<li><span class="list">职业路径</span> HTML5与CSS3实现动态网页</li>
<li><span class="list">职业路径</span> 零基础入门Android语法与界面</li>
<li><span class="list">职业路径</span> iOS基础语法与常用控件</li>
<li><span class="list">职业路径</span> PHP入门开发</li>
<li><span class="list">职业路径</span> JAVA入门开发</li>
</ul>
</div>
<div class="right">
<h1>相关课程</h1>
<ul >
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发 </li>
</ul>
</div>
</div>
<div class="foot">
<span>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</span>
</div>
</body>
</html>写回答
1回答
-
小丸子爱吃菜
2017-08-10
要加上单位：px。
祝学习愉快！
0
相似问题