3-3请检查
来源：3-3 编程练习
悉尼audrey
2019-11-21 16:35:42
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
width:100%;
min-width:700px;
}
/*=======================这里是头部====================*/
.header{
background-color:black;
height:60px;
float:left;
width:100%;
}
.header .logo{
padding-left:30px;
float:left;
padding-top:5px;
}
.header .logo img{
width:150px;
height:50px;
}
.nav ul{
float:right;
padding-right:50px;
}
.header .nav ul li{
list-style:none;
float:left;
color:white;
padding:15px;
}
.header a{
text-decoration:none;
color:white;
}
.header a:hover{
color:orange;
}
/*==============这里是中间部分========================*/
.container{
padding:0 220px 0 200px;
}
.left,
.middle,
.right{
position:relative;
float:left;
min-height:300px;
}
.middle{
background-color:pink;
width:100%;
padding-top:40px;
}
.middle img{
position:relative;
top:3px;
right:-150px;
height:200px;
width:300px;
}
h2{
margin-left:15px;
}
.left{
background-color:#ffebcd;
font-size:10px;
width:200px;
margin-left:-100%;
left:-200px;
padding-top:40px;
}
.left ul li{
margin-bottom: 20px;
font-size:10px;
}
.left a{
text-decoration:none;
border:1px solid orange;
background-color:orange;
font-size:10px;
margin-left:15px;
}
.right{
background-color:lightblue;
width:220px;
margin-left:-220px;
right:-220px;
padding-top:40px;
}
.right form input{
width:180px;
height:30px;
margin-top:20px;
margin-left:10px;
}
.right h3{
margin-left:10px;
}
.right .button{
background-color:red;
color:white;
text-align:center;
}
.right input::placeholder{
font-size:7px;
}
/*====================这里是底部=====================*/
.footer{
background-color:black;
height:60px;
float:left;
width:100%;
line-height:60px;
text-align:center;
}
.footer ul li{
display:inline-block;
color:white;
padding:0 10px;
font-size:12px;
}
.footer a{
text-decoration:none;
color:white;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://climg.mukewang.com/590037f600016ce303000100.png"/>
</div>
<div class="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="container">
<div class="middle">
<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg"/>
</div>
<div class="left">
<h2>课程推荐</h2>
<ul>
<li>
<a href="#">职业路径</a>
HTML5与CSS3 实现动态网页
</li>
<li>
<a href="#">职业路径</a>
零基础入门Android语法与界面
</li>
<li>
<a href="#">职业路径</a>
IOS基础语法与常用控件
</li>
<li>
<a href="#">职业路径</a>
PHP入门开发
</li>
<li>
<a href="#">职业路径</a>
JAVA入门开发
</li>
</ul>
</div>
<div class="right">
<h3>登录</h3>
<form>
<input type="text" name="email" placeholder="请输入登陆邮箱/手机号"/>
<input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格"/>
<input class="button" id=type="button" name="button" 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回答
-
同学你好，代码中问题如下：
1、顶部右侧导航项没有垂直居中显示：
代码中用了padding值设置间距，这样不准确，建议修改为行高，参考：
2、中间区域显示如下：
（1）左侧宽度设置的有些小，导致内容换行，看起来不美观，可以增大宽度调整。
（2）中间图片没有水平居中显示。相对定位设置的是固定right值，由于每个显示器的分辨率不同，宽度也会不同，所以建议不设置相对定位，父容器中设置文本居中就好。参考：
（3）效果图中登陆按钮是没有边框的，可以设置border属性去掉或者修改为红色边框，与背景色一致，这样也看不出来。参考：
3、建议中间内容高度设置大一些，看起来会更美观。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题