初写-简单页面设计
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />
<title>作品1</title>
<style>
*{margin:0;padding:0;}
body{
background:#E6E6E6;
}
.quan{
boder:1px solid #30F;
height:580px;
}
.logo{
border:1px solid #000;
height:35px;
overflow:hidden;
margin:1px;
background:#C33;
}
.logo img{
width:30px;
height:30px;
padding:2px;
}
.logo a {
float:right;
width:100px;
height:30px;
padding:7px;
text-align: center;
font-size:13px;
color:#FFF;
}
.figure1{
border:1px solid #0F0;
}
.row1{
border:1px solid skyblue;
}
.tuceng{
border:1px solid #F03;
width:100%;
height:160px;
}
.fig1{
margin:5px 50px;
display:block;
}
ul{
list-style:none;
float:left;
margin:10px 50px;
}
.tu{
clear:both;
width:150px;
height:120px;
border:1px solid #33C;
}
.tu img{
width:150px;
height:120px;
}
.miaoshu{
border:1px solid #9FF;
width:150px;
}
.miaoshu img{
float:right;
width:14px;
height:14px;
vertical-align:center;
margin:2px;
}
</style>
</head>
<body>
<div class="quan">
<div class="logo">
<img src="xiaoyu.jpg">
<a href="#" class="top">home</a>
<a href = "#" class="top">Gallery</a>
<a href = "#" class="top">Contact</a>
<a href = "#" class="top">Help</a>
</div>
<div class="figure1">
<div class="row1">
<div class = "tuceng">
<div class="fig1">
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
</div>
</div>
<div class = "tuceng">
<div class="fig1">
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
</div>
</div>
<div class = "tuceng">
<div class="fig1">
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
<ul>
<li class="tu">
<img src="p1.jpg"/>
</li>
<li class="miaoshu">
<p style="font-size:13px;color:#cc;">Image Caption<img src="xiaoyu.jpg"></p>
<li>
</ul>
</div>
</div>
</div>
</div>
</div>
<footer style="text-align:center;color:#999;">footer copyright ©2018</footer>
</body>
</html>
