初写-简单页面设计 - 好文

<!DOCTYPE html> <html> <head> <meta 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>

热门工具换一换