3-3编程练习 请老师完善
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
body{min-width:700px;}
ul{list-style:none;}
a{text-decoration:none;}
.header,
.footer{width:100%;height:100px;
background:#333;
overflow:hidden;zoom:1;
}
li a{line-height:100px;
font-family:"微软雅黑";
font-size:20px;
color:#fff;
}
a:hover{color: orange;
}
.header .logo{float:left;}
.header .nav {float:right;}
.header .nav li{float:left;margin-right:20px;}
.footer .nav1{width:75%;float:right;}
.footer .nav1 li a{float:left;margin:20px;
display:block;
line-height:100px;
}
.container{padding:0 300px 0 400px;
}
.left,
.middle,
.right{
position: relative;
float: left;
min-height: 700px;
}
.middle{width:100%;background:pink;}
.left{width:400px;background:#FFE4B5;
margin-left:-100%;
left:-400px;
}
.left h3{margin:100px 0 0 50px;
}
p{margin:0 0 0 50px;}
span{background: pink;}
.right{width:300px;background:skyblue;
margin-right: -300px;
}
.right h3{margin:100px 0 0 50px;}
input{margin:0 0 0 50px;}
img{ position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
margin:auto auto;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/></a></div>
<ul class="nav" >
<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 class="container">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/></div>
<div class="left">
<h3>课程推荐</h3>
<br/>
<p><span>职业路径</span> HTMLS与CSS3实现动态网页</p>
<br/>
<p> <span>职业路径</span> 零基础入门Android语法与界面</p>
<br/>
<p><span>职业路径</span> ios基础语法与常用控件</p>
<br/>
<p><span>职业路径</span> PHP入门开发</p>
<br/>
<p><span>职业路径</span> JAVA入门开发</p>
</div>
<div class="right">
<h3>登录</h3>
<br/>
<input type="text" name="usre" size="20"
style="height:50px;width:200px"
placeholder="请输入登录邮箱/手机号">
<br/>
<br/>
<input type="password" name="pas"
style="height:50px;width:200px;
size:8px;"
placeholder="6-16位密码.区分大小写.不能用空格.">
<br/>
<br/>
<input type="button" value="登录"
style="background:red;height:50px;
width:200px;border:none;color:#fff">
</div>
</div>
<div class="footer">
<ul class="nav1">
<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>
0
收起
正在回答 回答被采纳积分+1
3回答
好帮手慕夭夭
2019-01-16 10:15:05
你好同学 , 你描述的是尾部a标签的margin吗 ? 从同学上传的代码中 ,确实是给上下左右设置的边距 ,并没有设置上下为0 , 如下是同学上传的代码中的设置 , margin后面只有一个20px ,这里注意不只是上边距 , 而是上下左右都为20px
所以受到上边距的影响 ,文字不能居中了 .
下边距也是有的 ,只不过它的父元素高度不够 , 下边距也没有意义 , 看不到 , 你把尾部整体设置高一些 , 就能看到了 ,如下:
所以这里按照老师第一个回复去修改为margin: 0 20px; 不知道同学描述的变形是什么意思? 如果没有解答你的疑惑 , 请同学详细的描述一下 ,便于老师准确高效的为你答疑 .
祝学习愉快 ,望采纳 .
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星