middle的m-top布局和m-bottom布局问题
（1）m-top中 m-top和.con的宽度没有设置具体的值，设为百分比是否合理？
（2）m-bottom中图片布局对吗？设置了dl的图片宽度，觉得图片被截了。。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="header">
<div class="logo"><img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png" alt="logo"></div>
<div class="nav">
<ul>
<li>课程</li>
<li>课程</li>
<li>课程</li>
<li>课程</li>
</ul>
</div>
</div>
<div class="clear"></div>
<!-- 主体 -->
<div class="content">
<!-- banner图 -->
<div class="top">
<img src="img/1.jpeg"/>
<div class="toplayer"></div>
<div class="con">
<div class="con-title">MY BEAUTIFUL LIFE</div>
<button class="button">LOOK MORE ></button>
</div>
</div>
<!-- 中间的图标和图片 -->
<div class="middle">
<div class="m-top">
<div class="weibo con">
<img src="img/weibo.png"/>
<div class="name">MICROBLOG</div>
</div>
<div class="wechat con">
<img src="img/weixin.png"/>
<div class="name">WECHAT</div>
</div>
<div class="QQ con">
<img src="img/QQ.png"/>
<div class="name">QQ</div>
</div>
</div>
<div class="clear"></div>
<div class="m-middle">
<div class="m-text">"I want to give good things to record down,<br/>after the recall will be very beautiful."</div>
</div>
<div class="m-bottom">
<div class="m-list">
<dl>
<dt><img src="img/03-01.jpg"/></dt>
<dd>
<div class="m-botword">Cool Image</div>
<div class="m-botword2">Record The Picture</div>
</dd>
</dl>
<dl>
<dt><img src="img/03-02.jpg"/></dt>
<dd>
<div class="m-botword">Cool Image</div>
<div class="m-botword2">Record The Picture</div>
</dd>
</dl>
<dl>
<dt><img src="img/03-03.jpg"/></dt>
<dd>
<div class="m-botword">Cool Image</div>
<div class="m-botword2">Record The Picture</div>
</dd>
</dl>
<div class="clear"></div>
</div>
</div>
</div>
<div class="bottom"></div>
</div>
</body>
</html>
*{
margin: 0;
padding:0;
list-style:none;
}
.header{
height:100px;
/*min-width:800px;*/
overflow:hidden;
}
.header .logo img{
height:80px;
width:200px;
padding-left:50px;
padding-top:10px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav li{
float:right;
height:100px;
line-height:100px;
padding: 0px 30px;
font-weight:bolder;
}/*此处写代码*/
/*主体*/
.content .top{
width:100%;
height:400px;
}
.content .top img{
width:100%;
height:400px;
}
.content .top .toplayer{
width:100%;
height:400px;
background:black;
opacity:0.5;
position:absolute;
top:100px;
left:0px;
}
.content .top .con{
/*background:blue;*/
height:300px;
width:400px;
position:absolute;
z-index:2;
top:300px;
left:50%;
margin-top:-150px;
margin-left:-200px;
/*text-align:center;*/
color:white;
}
.content .top .con .con-title{
font-weight:bolder;
font-size:40px;
padding-top:60px;
text-align:center;
}
.content .top .con .button{
background:orange;
width:150px;
height:50px;
border-radius:8px;
color:white;
margin-top:40px;
font-size:14px;
margin-left:125px;
}
.clear{
clear:both;
}
/*主体的图标*/
.content .middle .m-top .con{
float:left;
/*height:300px;*/
width:33.33%;
text-align:center;
}
.content .middle .m-top .con img{
width:80px;
height:80px;
}
.content .middle .m-top{
/*margin-top:50px;*/
width:80%;
margin:50px auto 0px;
}
.content .middle .m-top .con .name{
color:gray;
padding-top:20px;
font-weight:bolder;
font-family:"微软雅黑";
}
.content .middle .m-middle .m-text{
width:100%;
/*line-height:2em;*/
color:orange;
margin-top:50px;
text-align:center;
font-size:20px;
font-style:italic;
margin-bottom:50px;
}
.content .middle .m-bottom{
text-align:center;
}
.content .middle .m-bottom .m-list{
/*margin:0px auto;*/
display:inline-block;
/*width:80%;*/
}
.content .middle .m-bottom dl{
float:left;
/*text-align:center;*/
padding:0px 5px;
font-family:"微软雅黑";
}
.content .middle .m-bottom dl img{
width:330px;
}
.content .middle .m-bottom .m-list dl .m-botword{
color:black;
padding-top:10px;
font-weight:bolder;
font-size:20px;
}
.content .middle .m-bottom .m-list dl .m-botword2{
color:gray;
font-size:16px;
font-weight:bolder;
padding-top:8px;
}
正在回答
你好，可以给每个dl设置宽度为百分比，然后改变盒模型：
让设置的padding值填充在盒子宽度中，不会把盒子宽度撑大。
盒模型的属性box-sizing在第二个阶段中会讲解到，在这可以先了解一下。
修改图片宽度为100%：
自己可以测试下。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星