请检查 布局作业2
来源：2-10 编程练习
一个文艺的IT青年
2020-08-12 21:38:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
padding: 0;
margin: 0;
}
.top {
width: 100%;
height: 100px;
overflow: hidden;
zoom: 1;
/* position: fixed;*/
background-color: black;
color: white;
}
.logo {
float: left;
cursor: pointer;
height: 100px;
line-height: 100px;
}
.top .logo img {
display: block;
}
.nav {
float: right;
}
.nav ul li {
list-style: none;
display: inline-block;
/* float: left;*/
height: 100px;
font-size: 24px;
padding: 0 40px;
cursor: pointer;
line-height: 100px;
text-align: center;
}
.footer {
width:100%;
/* position: fixed;*/
bottom: 0;
text-align: center;
background-color: black;
color: white;
}
.footer ul li{
display: inline-block;
list-style:none;
font-size:22px;
text-align: center;
height:100px;
padding:0 40px;
line-height: 100px;
cursor:pointer;
}
.content{
width:100%;
color: black;
height: 720px;
overflow: hidden;
zoom: 1;
background:#A4D3EB;
margin: 0 auto;
}
.left{
width:40%;
float: left;
height: 720px;
margin-left: 100px;
}
.left p{
margin-bottom: 20px;
}
.left span{
background-color:#E4A877;
margin-right: 20px;
}
h1{
height: 100px;
line-height: 100px;
margin-top: 50px;
}
.right{
width:40%;
float: right;
height: 720px;
float: right;
height: 720px;
margin-right: 100px;
}
.right p{
margin-bottom: 20px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="top">
<div class="logo">
<img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
</div>
<div class="nav">
<ul>
<li>课程</li>
<li>职业路径</li>
<li>实战</li>
<li>猿问</li>
<li>手记</li>
</ul>
</div>
</div>
<div class="content">
<div class="left">
<h1 class="tit1">课程推荐</h1>
<p><span>职业路径</span>HTML5与CSS3实现动态网页</p>
<p><span>职业路径</span>零基础入门Andriod语法界面</p>
<p><span>职业路径</span>iOS基础语法与常用控件</p>
<p><span>职业路径</span>PHP入门开发</p>
<p><span>职业路径</span>JAVA入门开发</p>
</div>
<div class="right">
<h1 class="tit2">相关课程</h1><p>HTML CSS JavaScript</p><p>HTML5 CSS3 Jquery</p>
<p>移动端基础 移动端APP开发</p>
</div>
</div>
<div class="footer">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>人才招聘</li>
<li>联系我们</li>
<li>常见问题</li>
<li>友情链接</li>
</ul>
</div>
</body>
</html>
2回答
-
同学你好，整理效果实现的不错，继续加油，祝学习愉快~
0 -
一个文艺的IT青年
提问者
2020-08-12
好像复制的时候，.right那里多写了一边
float: right;
height: 720px;
麻烦老师删去多余再看吧
0
相似问题