老师，总感觉我的代码很奇怪
来源：2-12 编程练习
慕设计6170877
2020-05-31 11:44:11
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS网页布局基础2-10编程练习</title>
<style> /* 经典的两列布局 */
*{
margin: 0;
padding: 0;
list-style:none;
font-family:"微软雅黑";
font-size:16px;
}
a{
text-decoration:none;
color:#fff;
}
.header{
width:100%;
height:30%;
color:#fff;
background:#333;
overflow:hidden;
zoom: 1;
}
.logo{
width:40%;
height:100px;
line-height:100px;
background:url('http://climg.mukewang.com/58c0d2d900016ce303000100.png') no-repeat;
float:left;
text-align:center;
}
.nav{
width:40%;
height:100px;
float:right;
text-align:center;
}
.nav-list{
width:100px;
height:100px;
float:left;
line-height:100px;
margin-left:50px;
}
.container{
width:100%;
height:700px;
line-height:40px;
background:rgb(147,216,230);
overflow:hidden;
zoom: 1;
}
.container h1{
font-size:30px;
}
.container .left{
width:28%;
height:95%;
color:#333;
float:left;
line-height:50px;
padding:5% 0 0 5%;
}
.container .left span
{
background:rgb(244, 162, 163);
margin-right:10px;
font-size:16px;
}
.container .middle{
width:26%;
height:95%;
color:#333;
float:left;
padding:5% 0 0 5%;
line-height:50px;
border-right:4px solid pink;
}
.container .right{
width:29%;
height:95%;
padding:5% 0 0 5%;
float:right;
overflow:hidden;
line-height:50px;
}
.container .right h1{
margin-bottom:20px;
}
.container .right .user{
display:block;
width:60%;
margin-bottom:34px;
}
.container .right .paw{
display:block;
width:60%;
margin-bottom:34px;
}
.container .right .btn{
width:60%;
height:40px;
background:rgb(255, 0, 0);
display:block;
}
.footer{
width:100%;
height:100px;
line-height:100px;
background:#333;
text-align:center;
}
.footer li{
width:100px;
height:100px;
display:inline-block;
margin-right:50px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo"></div>
<div class="nav">
<div class="nav-list"><a href="#">课程</a></div>
<div class="nav-list"><a href="#">职业路径</a></div>
<div class="nav-list"><a href="#">实战</a></div>
<div class="nav-list"><a href="#">猿问</a></div>
<div class="nav-list"><a href="#">手记</a></div>
</div>
</div>
<div class="container">
<div class="left">
<h1>课程推荐</h1>
<ul>
<li><span>职业路径</span>HTNML与CSS实现动态网页</li>
<li><span>职业路径</span>零基础入门Android语法与界面</li>
<li><span>职业路径</span>ios基础语法与常用控件</li>
<li><span>职业路径</span>PHP入门开发</li>
<li><span>职业路径</span>JAVA入门开发</li>
</ul>
</div>
<div class="middle">
<h1>相关课程</h1>
<ul>
<li>HTML CSS JavaScript</li>
<li>HTML5 CSS3 Jquery</li>
<li>移动端基础 移动端APP开发</li>
</ul>
</div>
<div class="right">
<h1>登录</h1>
<input type="text" name="user" placeholder="请输入登录昵称/手机号" class="user" size="6">
<input type="password" name="paw" placeholder="6-16位密码，区分大小写，不能用空格" class="paw" maxlength="16" minlength="6">
<input type="button" name="login" value="登录" class="btn">
</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回答
-
好帮手慕夭夭
2020-05-31
同学你好，整体实现的还是不错的，要对自己有信心。另外，代码还需要完善的如下：
1.logo区域宽度太大
建议设置一个固定宽度：
2.导航区域，每一个li都设置一个类名有一点复杂。另外，使用ul布局更规范，建议如下优化：
样式调整一下：
不需要设置固定宽度，让内容撑开即可。导航的间距，改为左右各一半，让文字在间距的中间更好
3.按钮去掉边框，设置一个白色字体
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题