老师麻烦帮忙检查一下，谢谢
来源：2-12 编程练习
Zero雨寂
2019-08-07 12:18:37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none; text-decoration: none;}
.container{width: 100%; margin: 0 auto;}
.header{width: 100%;
height: 100px;
background: #000000;
}
.header .logo{height: 100px;
float: left;}
.header .logo a img{display: block;}
.header .nav{float: right;}
.header .nav li{font: 20px "微软雅黑";
margin: 0 25px;
line-height: 100px;
float: left;
}
a li{color: #FFFFFF;}
.main{width: 100%;
height:600px ;
background: #ADD8E6;
}
.main .left{width: 35%;
height: 600px;
float: left;}
.main .left li:nth-child(1){font:bold 20px "微软雅黑";}
.main .left li{margin: 4% 24%;}
.main .left li span{background: #f59291;}
.main .center{float: left;
width: 30%;
height: 600px;}
.main .center li:nth-child(1){font:bold 20px "微软雅黑";}
.main .center li{margin: 4% 10%;}
.main .orange{width: 1%;
height: 600px;
background: orange;
float: left;}
.main .right{float: right;
width: 34%;
height: 600px;}
.main .right p{font:bold 20px "微软雅黑";}
.main .right input{display: block;}
.main .right p,input{margin: 4% 5%;}
.main .right p{margin-top: 100px;}
.main .right input{width: 230px;
height:40px;
border-style: none;}
.main .right input:nth-child(3){background: red;
font-size:20px;
color: #FFFFFF;
}
.left ul,.center ul,.right p{margin-top:100px;}
.footer{width: 100%;
height: 100px;
background-color: #000000;}
.footer .column{width: 780px;
margin:0 auto;}
.footer .column li{display: block;
float: left;
padding: 0 25px;
font: 20px "微软雅黑";
line-height: 100px;
color: #FFFFFF;}
</style>
</head>
<body>
<div class="container">
<!-- 页头 -->
<div class="header">
<!-- logo -->
<div class="logo"><a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"></a></div>
<!-- 导航 -->
<ul class="nav">
<a href="#"><li>课程</li></a>
<a href="#"><li>职业路径</li></a>
<a href="#"><li>实战</li></a>
<a href="#"><li>猿问</li></a>
<a href="#"><li>手记</li></a>
</ul>
</div>
<!-- 主体 -->
<div class="main">
<div class="left">
<ul>
<li>课程推荐</li>
<li><span>职业路径</span><a href="#"> HTML与CSS实现动态页面</a></li>
<li><span>职业路径</span><a href="#"> 零基础入门Android语法与界面</a></li>
<li><span>职业路径</span><a href="#"> IOS基础语法与常用控件</a></li>
<li><span>职业路径</span><a href="#"> PHP入门开发</a></li>
<li><span>职业路径</span><a href="#"> JAVA入门开发</a></li>
</ul>
</div>
<div class="center">
<ul>
<li>相关课程</li>
<li><a href="#">HTML CSS JavaScript</a></li>
<li><a href="#">HTML5 CSS3 Jquery</a></li>
<li><a href="#">移动端基础 移动端APP开发</a></li>
</ul>
</div>
<!-- 橘色分割线 -->
<div class="orange"></div>
<div class="right">
<p>登陆</p>
<form action="#">
<input type="text" name="id" placeholder="请输入登陆邮箱/手机号"/>
<input type="password" name="paw" placeholder="6-16位密码,区分大小写,不能用空格" maxlength="16"/>
<input type="button" value="登陆"/>
</form>
</div>
</div>
<!-- 页脚 -->
<div class="footer">
<ul class="column">
<a href="#"><li>网站页面</li></a>
<a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
<a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
<a href="#"><li>友情链接</li></a>
</ul>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕言
2019-08-07
同学你好，效果实现的是可以的，但是为了代码更规范，建议ul标签里面嵌套li标签（而不是a标签）。
如果帮助到了你，欢迎采纳~祝学习愉快~
0
相似问题