老师，中间部分三个模块里的内容，怎么对齐啊？还有就是我写的代码对吗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{padding:0;margin:0;}
.header{background-color:black;
width:100%;
height:100px;
}
.img{float:left;
height:80px;
line-height:80px;
}
.toptitle{float:right;
overflow:hidden;
color:white;
}
.toptitle li{float:left;
list-style:none;
margin-right:40px;
height:80px;
line-height:80px;}
.container{width:100%;
text-align:center;
overflow:hidden;}
.middle{background-color:pink;
width:100%;
height:800px;
line-height:600px;
}
.middle img{width:200px;
height:150px;
}
.left{width:250px;
height:800px;
background-color:#FFFFCC;
position:absolute;
left:0;
top:100px;
}
.left th{font-size:13px;
}
.left tr{font-size:11px;
}
.right{width:250px;
height:800px;
background-color:#33CCCC;
position:absolute;
right:0;
top:100px;
text-align:center;
line-height:60px;
}
.right p{
font:bold 13px/12px "微软雅黑";}
.right .text{width:170px;
height:40px;
line-height:40px;
}
.right .password{width:170px;
height:40px;
line-height:40px;
}
.right .button{background-color:red;
width:170px;
height:40px;
color:white;
line-height:40px;
}
.end{background-color:black;
width:100%;
height:100px;
overflow:hidden;
color:white;
}
.end li{float:left;
list-style:none;
margin:0 35px;
height:80px;
line-height:80px;
}
</style>
</head>
<body>
<div class="header">
<div class="img"><img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"
></div>
<div class="toptitle"><ul>
<li>课程</li>
<li>职业路径</li>
<li>笔记</li>
<li>猿问</li>
<li>路径</li>
</div>
</ul>
</div>
<div class="container">
<div class="middle"><img src="
http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"></div>
</div>
<div class="left">
<table>
<th>课程推荐</th>
<tr>
<td style="background-color:pink">职业路径</td>
<td>html5与css3实现动态页面</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>0基础入门android语法与界面</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>ios基础语法与常用控件</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>php开发</td>
</tr>
<tr>
<td style="background-color:pink">职业路径</td>
<td>java开发</td>
</tr>
</table>
</div>
<div class="right">
<form>
<p>登陆</p><br/>
<input type="text" placeholder="请输入登陆邮箱/手机号" class="text"><br/>
<input type="password" placeholder="6-10位密码，区分大小写，不能用空格" class="password"><br/>
<input type="submit" name="login-button" value="登陆" class="button">
</form>
</div>
<div class="end">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学， 解答如下 ：
1.body虽然是里面所有元素的父元素 ，但是直接使用body就是给body设置样式 。*表示给所有的元素设置样式 。如下：
2.text-align是给盒子里面的文本内容设置居中 ，同样 ，一个盒子中的内容如果是行内元素 ，样式可以使用text-align 。而本段代码中就是把ul作为一个整体的内容 ,ul如果想居中 ，就可以设置成行内块元素（行内块也有行内元素的特点）。同学可以自己测试一下 ，把ul的inline-block去掉就不居中了。
3.设置属性时用哪个选择器需要具体代码具体分析 ，如果同学在练习时遇到不知道如何使用选择器的情况 。可以重新提问新问题，上传一下完整代码 。老师针对代码帮助你解答 。
祝学习愉快 ，望采纳。
你好同学 ,中间的内容可以设置上边距 ,如下:
图片设置了间距 , 就不要给图片容器设置行高了 ,如下去掉:
另外 ,代码中可以改为给所有元素设置初始化样式 ,如下:
因为页面不只是body有默认间距 ,其他标签也会有 . 例如ul .
中间的图片可以设置宽度百分比 ,这样就会随着它的盒子缩放了 , 高度建议自适应即可 :
尾部的内容没有居中 ,如下:
如下设置居中:
圣杯布局不需要给中间的大容器设置宽度 ,而是设置padding ,padding是为左右两边的盒子留的位置(同学可以在复习一下视频内容 ,巩固所学知识 ):
完善一下吧 , 祝学习愉快 ! 望采纳 .
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星