自己照http://hangzhou.fangtoo.com/zixun/info/8-40-n465352.html 里面写的一个html
通过现在学习的内容实现的一个简单的网页，里面用了简单的CSS
HTML源代码：
<!DOCTYPE html>
<html>
<head>
<title>张韶涵现在怎么样了在《歌手》一展歌喉惊艳全场动人</title>
<!-- <link rel="stylesheet" type="text/css" href="../CSS/reset/reset.css"> -->
<link rel="stylesheet" type="text/css" href="../CSS/lesson1.css">
</head>
<body>
<!-- 标题-->
<header>
<!-- 最上面的导航栏-->
<nav class="daohanglan">
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/">首页</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/1.html">新闻</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/2.html">楼盘</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/3.html">地产</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/4.html">专家</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/5.html">知识</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/6.html">装修</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/7.html">案例</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8.html">生活</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/5-21.html">买房</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/5-22.html">卖房</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-44.html">时讯</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-45.html">奇闻</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-39.html">八卦</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-43.html">杂谈</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-43.html">人物</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-41.html">影视</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-40.html">明星</a>
<!-- logo图片 -->
<p><img src="../img/logo.PNG"></p>
<!-- logo下面的导航栏 -->
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/1.html">新闻</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/2.html">楼盘</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/3.html">地产</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/5.html">知识</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/6.html">装修</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/7.html">案例</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8.html">生活</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/renwu/">人物</a>
<a target="_blank" href="http://hangzhou.fangtoo.com/jumi/">剧迷</a>
<p class="xiaoziti">
<a class="xiaoziti" target="_blank" href="http://hangzhou.fangtoo.com/zixun/">首页></a>
<a class="xiaoziti" target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8.html">生活></a>
<a class="xiaoziti" target="_blank" href="http://hangzhou.fangtoo.com/zixun/info/8-40.html">明星></a>正文
</p>
</nav>
</header>
<!-- 正文 -->
<div class="zhengwen">
<!-- 文章标题 -->
<header>
<h1 class="biaoti">张韶涵现在怎么样了在《歌手》一展歌喉惊艳场动人</h1>
<p class="xiaoziti">2018年02月19日 14:05 编辑：路转粉 来源：互联网</p>
</header>
<!-- 文章摘要 -->
<!-- 摘要 -->
<div class="demo4">
<aside>
<p ><span class="zhaiyao">摘要：</span>说到张韶涵，很多人还是会有一番感慨和回忆的，当年的张韶涵，确实是在华语乐坛上非常知名的小天后级别了，但是她的人生经历，却让我们都同情她的遭遇，在最红的时候被自己的母亲诬陷吸毒，从此踏入了黑暗之地，那么...... </p>
</aside>
</div>
<!-- 文章正文 -->
<article>
<p class="demo">
说到张韶涵，很多人还是会有一番感慨和回忆的，当年的张韶涵，确实是在华语乐坛上非常知名的小天后级别了，但是她的人生经历，却让我们都同情她的遭遇，在最红的时候被自己的母亲诬陷吸毒，从此踏入了黑暗之地，那么现在的张韶涵怎么样了呢？其实看到她在歌手中的状态，她挺过来了。
</p>
<img src="../img/Angela1.jpg">
<p>张韶涵</p>
<p class="demo">张韶涵的每一次挺过来都非常的不容易，小的时候因为家境不好，不得不辍学赚钱，后来靠着有点唱歌的小天赋，不断的唱歌，磨练之中慢慢的红了起来。那时候的张韶涵的声音很特别，再加上偶像剧之间的相互配合，她红起来似乎就是一个必然的结果，或者说是那个时代需要这样子的歌声，所以张韶涵走红了。</p>
<img src="../img/Angela.jpg">
<p>张韶涵</p>
<p class="demo">走红之后的她却没有就此摆脱命运的悲剧，她的亲生母亲，因为要不到钱，两人之间产生了矛盾，从而就狠心诬陷自己的女儿吸毒的事情，那时候关于张韶涵的黑文，简直就是铺天盖地一下子就出来了。要么是喷她吸毒的，要么就是说她不孝的，但是她咬牙挺过来了，最终她的弟弟看不下去，终于出面说出了事情的真相。</p>
<img src="../img/A-2.jpg">
<p>张韶涵</p>
<p class="demo">但是张韶涵能因此就红起来吗？之后她也有出作品，并且还是作品不间断，可这个时候的她已经没有市场的欢迎度了，不是大家不喜欢了她，而是没有足够喜欢她了，有了其他更多的东西去喜欢。张韶涵的歌声已经跟不上这个时代的进步了，但是现在的她，状态很好，认真的唱自己的歌，对于名利其实都没那么重要了。</p>
<a target="_blank" href="http://hangzhou.fangtoo.com/renwu/info/1-7-n392.html">
<p>
<img class="demo2" src="../img/A-3.jpg">
张韶涵
</p>
<span class="demo3">更多>></span>
</a>
<p class="demo6">张韶涵（AngelaZhang），1982年1月19日出生于中国台湾省桃园县，中国台湾女歌手、演员，毕业于加拿大温斯顿爵士邱吉尔中等学校。张韶涵饰演过多部青春偶像剧，《海豚湾恋人》、《爱杀17》、《公主小妹》等。除了影视剧，张韶涵的</p>
</article>
</div>
<!-- 脚注 -->
<div class="demo4">
<footer >
<p >免责声明：本文仅代表作者个人观点，与房途网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </p>
</footer>
</div>
</body>
</html>
CSS代码：
header>nav>a:hover{
color: red;
}
header>nav>a{
color: #000;
}
.zhaiyao{
font-size: 18px;
color: red;
}
.demo6{
color: #c1c1c1;
}
.biaoti{
font-size: 30px;
}
.xiaoziti{
font-size: 15px;
color: #c1c1c1;
}
footer{
font-size: 12px;
}
