初写-简单页面设计

<!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 &copy;2018</footer>
</body>
</html>

初写-简单页面设计