实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面仿站</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="menu">
<div class="leftmenu">
<ul>
<li id="first"><a href="">Home</a></li>
<li><a href="">Features</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Blog</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div class="logo"><img src="images/logo.png"></div>
</div>
</div>
<!-- 面包屑 -->
<div class="weizhi">
<div class="wzqy">
<p class="wzl">Home</p>
<p class="wzr"><span>Login </span>
<img src="images/login_arrow.png">
</p>
<p class="wzsearch">
<input type="search" name="search" placeholder="关键字">
<img src="images/search_button.png">
</p>
</div>
</div>
<!-- 轮显 -->
<div class="lunxian">
<img src="images/6.jpg">
<p class="sm">User Friendly Scripts</p>
<span>
<a href=""><img src="images/slider_buttons1.png"></a>
<a href=""><img src="images/slider_buttons2.png"></a>
</span>
</div>
<!-- 选项卡 -->
<div class="xxk">
<div class="kg">
<div class="xxktop">
<ul>
<li id="xfirst">
<img src="images/circle.png">
<a href="">Start Here!</a>
</li>
<li>
<img src="images/circle.png">
<a href="">Start Here!</a>
</li>
<li>
<img src="images/circle.png">
<a href="">Start Here!</a>
</li>
<li>
<img src="images/circle.png">
<a href="">Start Here!</a>
</li>
</ul>
</div>
</div>
<div class="wenzi">
<h2>You wonder what we can offer to you ?</h2>
<p>These are just some of our services, read herefor more informations</p>
</div>
<div class="liucheng">
<ul>
<li>
<a href="">Listen </a>
</li>
<li>
<a href="">Listen </a>
</li>
<li>
<a href="">Listen </a>
</li>
<li>
<a href="">Listen </a>
</li>
</ul>
</div>
<div class="lcwz">
<p>
<span>Listen to your favorite music online. You can eve
</span>
<span>Listen to your favorite music online. You can even mak
</span>
<span>Listen to your favorite music online. You can even make multiple pla
</span>
<span>Listen to your favorite music online. You can
</span>
</p>
</div>
</div>
<!-- 排序 -->
<div class="paixu">
<div class="shang">
Top Stores
</div>
<div class="xia">
<ul>
<li>
<img src="images/5.jpg">
<h3>Top 10 singles</h3>
<p>Lorem ipsum dolor sit amers asd ds consectetur adipiscing rselits dtoo lokjadas
</p>
<a href=""><button>Read More</button></a>
</li>
<li>
<img src="images/5.jpg">
<h3>Top 10 singles</h3>
<p>Lorem ipsum dolor sit amers asd ds consectetur adipiscing rselits dtoo lokjadas
</p>
<a href=""><button>Read More</button>
</a>
</li>
<li>
<img src="images/5.jpg">
<h3>Top 10 singles</h3>
<p>Lorem ipsum dolor sit amers asd ds consectetur adipiscing rselits dtoo lokjadas
</p>
<a href=""><button>Read More</button></a>
</li>
<li>
<img src="images/5.jpg">
<h3>Top 10 singles</h3>
<p>Lorem ipsum dolor sit amers asd ds consectetur adipiscing rselits dtoo lokjadas
</p>
<a href=""><button>Read More</button></a>
</li>
</ul>
</div>
</div>
<!-- 新闻 -->
<div class="news">
<div class="newss">
News
</div>
<div class="newslist">
<ul>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
<br>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
<br>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
<li>
<img src="images/11.jpg">
<strong>JAINA PARKER IS TO SELL OFF THE STAGE 'CLAWS'</strong><br>
<p>The american pop star created incredible 29,000 square foot steel 'claws'
<a href=""><span>Read More...</span>
</a>
</p>
</li>
</ul>
</div>
</div>
<!-- 底部 -->
<div class="bottom">
<div class="bottomtop">
</div>
<div class="bottomxia">
<ul>
<li>
<img src="images/footer_head_bullet.png">
<span>Last Works</span> <hr>
<ul>
<li>
<img src="images/footer_pic1.jpg">
<p>Bob Dylan <br>Photo Gallery <br>
15,234 views</p>
</li>
<li>
<img src="images/footer_pic1.jpg">
<p>Bob Dylan <br>Photo Gallery <br>
15,234 views</p>
</li>
<li>
<img src="images/footer_pic1.jpg">
<p>Bob Dylan <br>Photo Gallery <br>
15,234 views</p>
</li>
</ul>
</li>
<li>
<img src="images/footer_head_bullet.png"><span>Last Works</span> <hr>
<p>See and touch your email in u before. In landscape, you ge a screen uniview showing both an opened email uiiand the messages in your inbox. Too csee the opened email by itself, turn iPad Nulla accumsan at porttitor neque </p>
</li>
<li>
<img src="images/footer_head_bullet.png"><span>Last Works</span> <hr>
<p>
<a href="">Read RFQ</a><br>
<a href="">Read RFQ</a><br>
<a href="">Read RFQ</a><br>
<a href="">Read RFQ</a><br>
<a href="">Read RFQ</a>
</p>
</li>
<li>
<img src="images/footer_head_bullet.png"><span>Last Works</span> <hr>
<pre>
Address:
Level 12, 1 Elizabeth St, Melbourne
Victoria 3000 Australia
Phone:
+1 555-12345
+1 555-54321
Email:
myemail@mail.com
</pre>
</li>
</ul>
</div>
</div>
<!-- 版权 -->
<div class="footer">
<div class="sj">
<a href="">
<img src="images/social_facebook.png">
</a>
<a href="">
<img src="images/social_facebook.png">
</a>
<a href="">
<img src="images/social_facebook.png">
</a>
<a href="">
<img src="images/social_facebook.png">
</a>
<a href="">
<img src="images/social_facebook.png">
</a>
</div>
<p>Copyright 2013.Company name All rights reserved.模板之家 Collect from 网站模板</p>
</div>
<!-- 遇到问题：1，li里面图文混排 文字靠底部失败；
2，列表图片和后面的标题水平对齐失败；
3，鼠标hover属性添加换图片失败； -->
</body>
</html>
点击 "运行实例" 按钮查看在线实例
Correction status：qualified
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
