请老师检查一下，感觉有点不太对
来源：3-3 编程练习
宝慕林3013065
2020-04-11 21:16:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{margin:0;padding:0;}
.header,.footer{width:100%;height:80px;background:black;}/*页头页脚背景*/
.header img{height:80px;display:block;left:0;top:0;float:left;}/*logo*/
.header ul{float:right;list-style:none;margin-right:30px;line-height:80px;}/*页头导航栏*/
.header ul li{float:left;margin-right:20px;font-size:16px;}/*页头导航栏子栏*/
.container{padding:0 300px 0 310px;}/*内容部分*/
.maddle,.left,.right{position:relative;float:left;min-height:500px;}/*内容部分背景*/
.maddle{background:#ff4777;width:100%;}/*中间部分*/
.maddle img{width:500px;left:0;top:0;right:0;bottom:0;margin:auto;position:absolute;}/*中间部分图片*/
.left{background:#ffb3a7;width:310px;margin-left:-100%;left:-310px;padding-top:80px;font-size:14px;}/*左侧内容*/
.left h2,.left p{margin-left:30px;margin-bottom:10px;}/*左侧内容*/
.left span{background:red;}/*左侧内容*/
.right{background:#70f3ff;width:300px;margin-left:-300px;right:-300px;padding-top:80px;}/*右侧内容*/
.right input{width:230px;height:30px;}/*右侧内容*/
.submit{background:red;color:#fff;}/*右侧内容*/
.right input,.right h2{margin-bottom:10px;margin-left:30px;}/*右侧内容*/
.footer{position:absolute;top:580px;text-align:center;}/*页脚部分*/
.footer ul{list-style:none;line-height:80px;display:inline-block;text-align:center;}/*页脚部分导航栏*/
.footer ul li{float:left;margin-right:15px;font-size:16px;}/*页脚部分导航栏子栏*/
a{color:#fff;text-decoration:none;}/*超链接颜色及去掉下划线*/
.black{color:black;}/*超链接颜色*/
</style>
</head>
<body>
<div class="header">
<img src="http://climg.mukewang.com/590037f600016ce303000100.png"/>
<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 class="container">
<div class="maddle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<h2>课程推荐</h2>
<p><span>职业路径</span> <a href="#" class="black">HTML5与CSS3实现动态网页</a></p>
<p><span>职业路径</span> <a href="#" class="black">零基础入门Android语法与界面</a></p>
<p><span>职业路径</span> <a href="#" class="black">ios基础语法与常用控件</a></p>
<p><span>职业路径</span> <a href="#" class="black">PHP入门开发</a></p>
<p><span>职业路径</span> <a href="#" class="black">JAVA入门开发</a></p>
</div>
<div class="right">
<h2>登录</h2>
<form>
<input type="text" name="yonghuming" placeholder="请输入登录邮箱/手机号" maxlength="11px" />
<input type="password" name=mima" placeholder="6-16位密码，区分大小写，不能用空格" maxlength="16px"/>
<input type="submit" name=tijiao" value="登录" class="submit" />
</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>
2回答
-
同学你好，代码整体布局是不错的。
样式上还可以进行完善：
1、代码中缺少引号，导致匹配不完整
两处的name属性缺少左半部分引号，需要添加上。
2、中间右侧表单中的按钮样式不美观，效果图中是没有边框的，可以去掉。另外文字也没有居中显示，参考修改
修改选择器是为了增加权重，宽高不生效。
3、底部导航项没有居中显示
每项设置的是右侧间距，这样最后一项的间距就会多出来，导致不居中。建议将最后一项的右侧间距去掉或者修改为左右两侧间距。参考
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0 -
彬十二
2020-04-12
只要写好的布局和设计稿一样就行，css随便写都无所谓的啦，哈哈哈。
0
相似问题