老师，麻烦帮忙检查下，谢谢！
来源：2-12 编程练习
慕仔4144401
2019-11-05 10:18:36
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
border:none;
}
body{
background-color:#70f3ff;
}
img{display:block;}
a{text-decoration:none;}
li{list-style:none;}
/*头部*/
.header{
width:100%;
height:100px;
background-color:#000;
position:fixed;
top:0;
}
.header img{float:left;}
.header_nav{float:right; padding-right:20px;}
.header_nav ul li{float:left;}
.header_nav a{
font-size:20px;
font-family: "微软雅黑";
color:#fff;
padding:0 20px;
line-height:500%;
}
/*内容区*/
.content{width:1000px;
margin:150px auto;
}
.content_1{width:33%;
float: left;}
.content_1 .left_list,
.content_1 .center_list li{
line-height:35px;
font-size:15px;
}
.content_1 h3{margin-bottom:15px;}
.right input{height:26px;
width:200px;
font-size:11px;
margin-top:16px;
}
.right .submit{
font-size:16px;
height:32px;
background-color:red;
color:#fff;
}
/*尾部*/
.footer{
width:100%;
height:70px;
background-color:#000;
position:fixed;
bottom:0;
}
.footer ul{text-align:center;}
.footer ul li{display:inline-block;}
.footer a{
font-size:15px;
font-family: "微软雅黑";
color:#fff;
padding:0 25px;
line-height:70px;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt="logo"/></a>
<div class="header_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="content">
<div class="content_1 left">
<h3>课程推荐</h3>
<ul class="left_list">
<li><p><span>职业路径</span> HTML5与CSS3实现动态网页</p></li>
<li><p><span>职业路径</span> 零基础入门Android语法与界面</p></li>
<li><p><span>职业路径</span> iOS基础语法与常用控件</p></li>
<li><p><span>职业路径</span> PHP入门开发</p></li>
<li><p><span>职业路径</span> JAVA入门开发</p></li>
</ul>
</div>
<div class="content_1 center">
<h3>相关课程</h3>
<ul class="center_list">
<li><p>HTML CSS JavaScript</p></li>
<li><p>HTML5 CSS3 Jquery</p></li>
<li><p>移动端基础 移动端APP开发</p></li>
</ul>
</div>
<div class="content_1 right">
<form>
<h3>登录</h3>
<input type="text" name="name" placeholder="请输入登录邮箱/手机号"/><br/>
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格"/><br/>
<input class="submit" type="submit" value="登录"/>
</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回答
-
好帮手慕慕子
2019-11-05
同学你好， 可以参考如下解析
如下图所示， 图片浮动脱离文档流，导致a标签没有包裹logo
建议优化： 可以给a也设置左浮动
中间和右侧没有添加橙色分割线，建议： 可以添加一个空div标签
添加分割线后，需要调整content的样式
通过给表格和列表以及表单元素设置外边距，实现空白间距效果
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0
相似问题