作业1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#d1{
width: 80%;
background-color: darkgray;
border-right:4px solid white;
}
#d2{
height: 80px;
line-height: 40px;
text-align: center;
}
#d2 h2{
display: inline-block;
}
#hr1{
display: inline-block;
width: 70px;
height: 4px;
background-color: black;
border: 0;
}
#hr2{
display: inline-block;
width: 70px;
height: 4px;
background-color: black;
border: 0;
}
#d3{
width: 100%;
height: 400px;
background-color: darkgray;
position: relative;
}
#d4{
width: 30%;
height: 380px;
background-color: white;
top: 10px;
left: 3%;
position: absolute;
}
#d41{
width: 90%;
height: 340px;
border: 4px solid black;
bottom: 0;
position: absolute;
}
#img1{
width: 90%;
height: 340px;
left: 10%;
position: absolute;
}
#d5{
width: 30%;
height: 380px;
background-color: white;
top: 10px;
left: 35%;
position: absolute;
}
#d51{
width: 90%;
height: 60px;
left: 5%;
position: absolute;
/*background-color: red;*/
}
#h1{
display: inline-block;
left: 0;
position: absolute;
}
#img2{
display: inline-block;
width: 25px;
height: 25px;
left: 60px;
top: 18px;
position: absolute;
}
#s1{
left: 80px;
top: 19px;
width: 100px;
position: absolute;
color: darkgrey;
}
#img3{
width: 90%;
height: 40%;
top: 15%;
left: 5%;
position: absolute;
}
#img4{
width: 42%;
height: 40%;
top: 58%;
left: 53%;
position: absolute;
}
#img5{
width: 42%;
height: 40%;
top: 58%;
left: 5%;
position: absolute;
}
#d6{
width: 30%;
height: 380px;
background-color: white;
top: 10px;
left: 67%;
position: absolute;
}
#h2{
display: inline-block;
left: 0;
position: absolute;
}
#img6{
display: inline-block;
width: 25px;
height: 25px;
left: 80px;
top: 18px;
position: absolute;
}
#s2{
left: 90px;
top: 19px;
width: 100px;
position: absolute;
color: darkgrey;
}
#d11{
width: 2%;
height: 36%;
background-color: white;
top: 41%;
right: 10.3%;
position: fixed;
}
#d11 img{
width: 30px;
height: 30px;
border-radius: 5px;
float: right;
}
#d7{
width: 100%;
height: 200px;
background-color: darkgray;
margin-top: 29px;
}
#d7 div{
display: inline-block;
width: 30%;
height: 160px;
background-color: white;
margin-left: 2.5%;
float: left;
}
#d7 img{
width: 95%;
height: 90%;
margin-top: 2.5%;
}
</style>
</head>
<body>
<div id="d" align="center">
<div id="d1">
<div id="d2">
<hr id="hr1"/>
<h2>居家优品</h2>
<hr id="hr2"/>
</div>
<div id="d3">
<div id="d4">
<div id="d41">
</div>
<img id="img1" src="img/1.JPG"/>
</div>
<div id="d5">
<div id="d51">
<h3 id="h1">家电馆</h3>
<img id="img2" src="img/2.JPG"/>
<span id="s1">家店好物节</span>
</div>
<img id="img3" src="img/3.JPG"/>
<img id="img4" src="img/2-1.JPG"/>
<img id="img5" src="img/2-2.JPG">
</div>
<div id="d6">
<div id="d51">
<h3 id="h2">我爱我家</h3>
<img id="img6" src="img/2.JPG"/>
<span id="s2">品质生活</span>
</div>
<img id="img3" src="img/3-1.JPG"/>
<img id="img4" src="img/3-2.JPG"/>
<img id="img5" src="img/3-3.JPG">
</div>
</div>
<div id="d7">
<div id="d8">
<img src="img/3-1.JPG"/>
</div>
<div id="d9">
<img src="img/3-1.JPG"/>
</div>
<div id="d10">
<img src="img/3-1.JPG"/>
</div>
</div>
<div id="d11">
<img src="img/4-4.JPG"/>
<img src="img/4-3.JPG"/>
<img src="img/4-2.JPG"/>
<img src="img/4-6.JPG"/>
<img src="img/4-1.JPG"/>
<img src="img/4-7.JPG"/>
<img src="img/4-5.JPG"/>
<a href=""><img id="img7" src="img/4-8.JPG"/></a>
</div>
</div>
</div>
</body>
</html>
结果：
作业1.JPG
作业2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*=======================================*/
#d{
width: 100%;
}
#d1{
width: 100%;
height: 80px;
background-color: white;
position: relative;
}
#i1{
width:150px ;
height: 60px;
left: 200px;
bottom: 10px;
position: absolute;
}
#h3{
display: inline-block;
left: 370px;
bottom: 8px;
position: absolute;
}
#i2{
width: 22px;
height: 12px;
}
#a11{
height: 12px;
bottom:16px;
right: 220px;
position: absolute;
text-decoration: none;
}
#a11:link{
color: darkgray;
}
#a11:visited{
color: darkgray;
}
#a11:hover{
color: red;
text-decoration: underline;
}
#d2{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background-color: antiquewhite;
}
#d2 span{
color: darkgrey;
}
#d3{
width: 100%;
height: 430px;
background-color: darkred;
position: relative;
}
#i3{
width: 500px;
height: 430px;
left: 200px;
position: absolute;
}
#f{
width: 390px;
height: 390px;
background-color: bisque;
right: 215px;
bottom: 30px;
position: absolute;
}
#s{
width: 390px;
height: 390px;
}
#img2{
right: 0px;
top: 5px;
position: absolute;
}
#te{
text-align: center;
width: 120px;
height: 20px;
right: 50px;
top: 5px;
position: absolute;
}
#s1{
left: 25px;
top: 30px;
position: absolute;
}
#person{
height: 35px;
top: 80px;
left: 25px;
position: absolute;
}
#person img{
width: 41px;
height: 41px;
float: left;
}
#person input{
width: 295px;
height: 37px;
float: left;
border: 0px;
background-color: #F5DEB3;
}
#key{
top: 151px;
left: 25px;
position: absolute;
}
#key img{
width: 41px;
height: 41px;
float: left;
}
#key input{
width: 295px;
height: 37px;
float: left;
border: 0px;
background-color: #F5DEB3;
}
#b{
width: 340px;
height: 40px;
top: 221px;
left: 25px;
border: 0px;
position: absolute;
background-color: tomato;
}
#p{
width: 295px;
top: 291px;
left: 25px;
height: 20px;
position: absolute;
}
#p img{
width: 20px;
height: 20px;
}
#img3{
float: left;
}
#a4{
float: left;
text-decoration: none;
}
#img4{
left: 110px;
position: absolute;
}
#a5{
left: 132px;
position: absolute;
text-decoration: none;
}
#a{
width: 340px;
top: 341px;
left: 25px;
height: 20px;
position: absolute;
}
#a3{
float: right;
text-decoration: none;
}
#a2{
right: 80px;
position: absolute;
text-decoration: none;
}
#a1{
right: 160px;
position: absolute;
text-decoration: none;
}
#d4{
width: 100%;
height: 100px;
background-color: white;
text-align: center;
}
#d4 a{
color: black;
text-decoration: none;
}
#d4 a:link{
color: black;
}
#d4 a:hover{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="d">
<div id="d1">
<img id="i1" src="img/jingdong.JPG"/>
<h3 id=h3>欢迎登录</h3>
<a id="a11" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans"><img id="i2" src="img/4-1.JPG"/>登录页面，调查问卷</a>
</div>
<div id="d2">
<span >
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。
</span>
</div>
<div id="d3">
<img id="i3" src="img/main1.JPG"/>
<div id="f">
<form action="" method="post" id="s">
<input id="te" type="text" name="" value="" disabled="disabled" placeholder="扫码登录更安全"/>
<span id="s1">
<b>密码登录</b>
</span>
<img id="img2" src="img/jiao.JPG"/><br />
<br />
<br />
<div id="person">
<img src="img/person.JPG"/>
<input type="text" name="" value="" placeholder="请输入账号"/>
</div>
<div id="key">
<img src="img/key.JPG"/>
<input type="text" name="" value="" placeholder="请输入密码"/>
</div>
<input type="button" name="" id="b" value="登 录" />
<div id="p">
<img src="img/wei.JPG"/ id="img3"><a href="" id="a4">微博登录</a>
<img src="img/zhi.JPG"/ id="img4"><a href="" id="a5">支付宝登录</a>
</div>
<div id="a">
<a href="" id="a1">忘记密码</a>
<a href="" id="a2">忘记会员</a>
<a href="" id="a3">免费注册</a>
</div>
</form>
</div>
</div>
<div id="d4">
<a href="https://www.jd.com/">关于我们</a> |
<a href="http://about.jd.com/contact">联系我们</a> |
<a href="http://zhaopin.jd.com/home;jsessionid=8644EDF302C7B3720866C87F153CB965.s1">人才招聘</a> |
<a href="https://www.jd.com/">商家入驻</a> |
<a href="https://www.jd.com/">广告服务</a> |
<a href="https://app.jd.com/">手机京东</a> |
<a href="https://club.jd.com/links.aspx">友情链接</a> |
<a href="https://media.jd.com/">销售联盟</a> |
<a href="https://sale.jd.com/act/n0hAvqy5CW8.html">京东社区</a> |
<a href="https://gongyi.jd.com/">京东公益</a> |
<a href="https://www.joybuy.com/">English Site</a><br /><br />
Copyright © 2004-2018 京东JD.com 版权所有
</div>
</div>
</body>
</html>
</html>
结果：
作业2.JPG
