3-3 编程练习作业提交
来源：3-3 编程练习
MiMicccc
2020-09-02 14:46:47
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*此处写代码*/
* {
margin: 0;
padding: 0;
}
body {
min-width: 1000px;
font: 20px "黑体";
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.header,
.footer {
float: left;
width: 100%;
height: 100px;
background: #000;
}
.header {
position: relative;
}
.header .nav_list {
position: absolute;
top: 0;
right: 0;
}
.header .nav_list li {
float: left;
width: 120px;
}
.header .nav_list li a,
.footer .foo_list li a {
display: inline-block;
width: 100%;
line-height: 100px;
color: #fff;
text-align: center;
}
.header .nav_list li a:hover {
color: orange;
}
.container {
padding: 0 260px 0 300px;
}
.middle ,.left ,.right {
position: relative;
float: left;
min-height: 500px;
}
.container .middle {
padding: 14% 18%;
width: 64%;
background: #FFC0CB;
}
.container .middle img {
width: 100%;
}
.container .left {
padding: 14% 0;
width: 300px;
margin-left: -100%;
left: -300px;
background: #FFEFDB;
}
.container .left p ,.container .right p {
font-weight: bold;
}
.container .left p ,.container .left ul {
margin-left: 20px;
}
.container .left li {
margin-top: 15px;
font-size: 14px;
}
.container .left li span {
margin-right: 10px;
background: #FF9999;
}
.container .right {
padding: 14% 0;
width: 260px;
margin-left: -260px;
right: -260px;
background: #ADD8E6;
}
.container .right p ,.container .right form {
margin-left: 10px;
}
.container .right input {
margin-top: 20px;
width: 220px;
height: 40px;
border: 1px solid #999;
}
.container .right .button {
font-size: 16px;
color: #fff;
background: #FF0000;
border-color: #FF0000;
}
.container .right input::placeholder {
font-size: 12px;
}
.footer .foo_list {
margin: 0 auto;
width: 60%;
overflow: hidden;
}
.footer .foo_list li {
float: left;
width: 16.66%;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<!-- 顶部 -->
<div class="header">
<img class="logo" src="http://climg.mukewang.com/590037f600016ce303000100.png" alt="">
<ul class="nav_list">
<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://climg.mukewang.com/590037e00001fab706000400.jpg" alt="">
</div>
<div class="left">
<p>课程推荐</p>
<ul>
<li><span>职业路径</span><a href="">HTML5与CSS3实现动态网页</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="right">
<p>登录</p>
<form action="">
<input class="username" type="text" name="username" id="" placeholder=" 请输入登录邮箱/手机号">
<input class="password" type="password" name="password" id="" placeholder=" 6-16位密码，区分大小写，不能用空格">
<input class="button" type="submit" value="登录">
</form>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<ul class="foo_list">
<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-09-02
同学你好，代码布局以及实现效果是可以的。
优化：中间左右两侧和中间高度不一致
这是因为老师浏览器视口分辨率较大。图片宽度设置100%，高度会按照自身宽高比显示，所以高度也会改变。分辨率越大，图片高度越大，超出最小高度500px的时候就会导致中间部分高度比左右两侧的大。建议调整样式，不设置图片宽度，父盒子中设置图片居中
祝学习愉快！
0
相似问题