设计作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家乡的岫玉</title>
<style>
div,body,html,h1,h2,h3,h4,h5,h6,ul,li,em,dt,dd,dl,form
{padding: 0 ;
margin:0;
}
li{list-style: none;
}
img{
border: 0;
}
a{
text-decoration: none;
color:#000;
}
.clear:after{
content: "";
display: block;
clear: both;
overflow: hidden;
visibility: hidden;
zoom: 1;
}
.cb{
clear: both;
}
.box{
width: 970px;
margin: 0 auto;
}
.first{
height: 108px;
}
.two{
float:left;
width: 400px;
height:88px;
padding-top: 50px;
padding-left: 200px;
}
.two form{
width: 394px;
height: 27px;
border: 3px solid #eeeeee;
}
.two ul li{
float: left;
padding-left: 20px;
}
.q{
position: relative;
width:325px;
height:25px;
border:1px solid #babebf;
border-right: 0 none;
outline: none;
color: #999999;
padding-left: 5px;
}
.four{
position: absolute;
float: right;
display: inline;
width:68px;
height:27px;
outline: none;
color: blue;
font-size: 14px;
font-weight: bold;
}
.four p{
margin-top: 10px;
}
.four a{
color: #999999;
font-size: 12px;
margin: 0 3px;
}
.time{
position: relative;
width: 500px;
}
.time a img{
padding-top: 20px;
width: 500px;
height: 400px;
}
.time h1{
padding-top: 20px;
}
.time h2{
padding-top: 150px;
font-size: 32px;
}
.three{
position: absolute;
left: 750px;
top: 190px;
width: 400px;
}
.three p{
margin-left: 25px;
}
.three ul li{
float: left;
}
.three ul a img{
padding-top: 16px;
margin-left: 30px;
width: 70px;
height: 70px;
}
.three ul li em{
position: absolute;
right: 5px;
bottom: 5px;
}
.six{
position: absolute;
top: 690px;
left: 750px;
}
.six p{
margin-left: 25px;
}
.six ul li{
float: left;
}
.six ul a img{
padding-top: 16px;
margin-left: 30px;
width: 70px;
height: 70px;
}
.seven p{
position: absolute;
top: 1190px;
left: 750px;
font-size: 24px;
line-height: 25px;
margin-left: 13px;
color: green;
}
.eit{
padding-bottom: 150px;
width: 970px;
text-align: left;
}
.eit dl{
float: left;
display: inline;
}
.eit dt{
margin-top: 20px;
font-size: 16px;
}
.eit dd{
margin-top: 10px;
font-size: 14px;
line-height: 20px;
margin-left: 8px;
}
.eit dd a{
color: blue;
}
.eit .nine{
margin-left: 50px;
padding-top: 40px;
float: left;
display: inline;
}
.ten form{
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="first box">
<div class="two">
<form action="">
<input type="text"name="q"class="q"value="岫岩玉石"><input type="submit"class="four"value="搜 索">
</form<p>
<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></p></div>
<div class="time">
#<h2>岫玉万马奔腾摆件</h2>
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
对于这次自己做的网页。出于对家乡玉石的了解展开的，介绍了一些基本的玉石状况，这次网页设计对于巩固以前的知识点起着很重要的作用，非常感谢老师们的这些安排使我渐渐的喜欢上了前段开发，中途有好几次想放弃，可是每次跟学哥请假的时候，学哥都会说慢慢做，别着急。使我备受鼓舞，最后坚持做完了。在此，非常感谢学哥学姐们的鼓舞。其实平常感觉看起来特别简单的东西，到了自己做的时候还有许多不足的地方，还差的很多，所以我以后会更加努力的学习，对于这次网页的制作，在刚开始的制作时候最难的地方在于排版，面对一个空白的网页不知道该如何下手，在制作的过程中遇到了一个问题，在对于盒子并排显示上，用了定位，致使在后来的图片上透明文字那块无法下手，下次会注意，用浮动来做。最后感谢学哥学姐这一阶段的陪伴，你们真的好辛苦，为我们批作业，为我们打电话提问，而且还是没有任何回报的付出！相信17点网有你们会更加辉煌！
网友评论