前面二白说了一些关于HTML和CSS的入门级知识，想要学精通，制造一个优良的界面，还有很多知识要我们坚持深入学习。而一味的学习新知识只会让我们大脑变得非常乱，那么今天我们根据前些天的知识，通过一些练习题来将我们所学的知识充分糅合在一起，既是总结，也是升华，题目不难，感兴趣的同学一起动手练练吧！
第一题：
需求截图：
二白的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐排行榜</title>
</head>
<body>
<h1>音乐排行榜</h1>
<ol>
<li>
<a href="https://baike.baidu.com/item/%E4%B8%83%E9%87%8C%E9%A6%99/12009481?fr=ge_ala" target="_blank">七里香</a> <img src="./image/pic1.png" alt="">
</li>
<li>
<a href="https://baike.baidu.com/item/%E5%8D%8A%E5%B2%9B%E9%93%81%E7%9B%92/2268287?fr=ge_ala" target="_blank">半岛铁盒</a> <img src="./image/pic1.png" alt="">
</li>
<li>
<a href="https://baike.baidu.com/item/%E5%8F%8D%E6%96%B9%E5%90%91%E7%9A%84%E9%92%9F/6616566?fr=ge_ala" target="_blank">反方向的钟</a> <img src="./image/pic1.png" alt="">
</li>
<li>
<a href="https://baike.baidu.com/item/%E4%B8%80%E8%B7%AF%E5%90%91%E5%8C%97/52259?fr=ge_ala" target="_blank">一路向北</a> <img src="./image/pic1.png" alt="">
</li>
<li>
<a href="https://baike.baidu.com/item/%E5%AE%89%E9%9D%99/2940419?fr=ge_ala" target="_blank">安静</a> <img src="./image/pic1.png" alt="">
</li>
<li>
<a href="https://baike.baidu.com/item/%E8%AF%B4%E4%BA%86%E5%86%8D%E8%A7%81/1289831?fr=ge_ala" target="_blank">说了再见</a> <img src="./image/pic1.png" alt="">
</li>
</ol>
</body>
</html>运行截图：
第二题：
需求截图：
二白的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
font-size: 25px;
}
.big{
font-size: 25px;
}
.red{
color: red;
}
.small{
font-size: 16px;
}
.black{
color: black;
font-size: 16px;
}
</style>
</head>
<body>
<h1>热点排行</h1>
<ol>
<li class="red big"><span class="black">网传天津某学校配餐公司卫生</span> <span class="small">8202</span></li><br>
<li class="red big"><span class="black">福州女孩500万婚房被男友"算</span> <span class="small">7612</span></li><br>
<li class="red big"><span class="black">轻松一刻：他凭什么才工作1</span> <span class="small">2172</span></li><br>
<li><span>每人至少生五个！曾经的罗马尼</span> <span class="red">1042</span></li><br>
<li><span>以案为鉴|编黑料炒舆论诬告他人</span> <span class="red">967</span></li><br>
<li><span>品味永远是流量的敌人？装嫩</span> <span class="red">842</span></li><br>
<li><span>英特尔高管：中国公司目前没有</span> <span class="red">746</span></li><br>
<li><span>痛心！知名表演艺术家在沪病逝</span> <span class="red">504</span></li><br>
<li><span>河南一本上线率在全国排名居于</span> <span class="red">425</span></li><br>
<li><span>上海市第六人民医院徐汇院区暂</span> <span class="red">383</span></li>
</ol>
</body>
</html>运行截图：
第三题：
需求截图：
二白的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
header{
text-align: center;
}
h1{
font-weight: 500;
font-size: 30px;
text-shadow: 2px 2px 3px ;
}
h2{
color: gray;
}
hgroup{
text-indent: 2em;
}
.em{
font-style: italic;
color: gray;
}
.str{
font-weight: 600;
}
</style>
</head>
<body>
<header>
<h1>看不见的完美硬币：细节的负担</h1>
<h2>创新公司皮克斯的指示</h2>
</header>
<hr>
<main>
<center>
<h6>2015年05月05日 <span style="color: red;">17:47</span></h6>
<img src="1.jpg" alt="一本书">
</center>
<article>
<hgroup>
<p class="em">细节从来都是个好东西，完美的细节往在给我们赢得商业上的胜利。</p>
<p class="em">但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竞然成了负担。</p>
<p class="em">怎么打造完美的细节? 又怎么赢得商业上的利益。度克斯总截艾德· 卡特为我们解答</p>
<p class="str">看不见的完美硬币：细节的负担</p>
<p>在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人
们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于
重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡待姆做出了明智的决策。</p>
<p>皮克斯有一个现象，被我们的制片人叫作:看不见的完美硬币(the pertect
coin)”，这个词指代的是皮克斯制作人员对细节的精益求
精。有时候，被我们的制片人凯瑟琳·萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚
至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是"看不见的完美
硬币”。在这幕戏中，好奇的小布第一次来到麦克和萨里的公寓，还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止她，而她还是
步步走到了两摞高高堆起的CD旁，“别乱动!"麦克大喊起来，可是小女孩还是从90多张CD盒摆成的”高塔”底部抽出一张，CD全部倒塌
数落在了地板上。麦克抱怨道:"哎，那些CD都是按字母顺序排列好的!"小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟，观众们只
能够看到几个CD盒而已，但皮克斯的制作人员不仅为每一个CD盒制作了封面，还使用了可计算物体在运动时渲染效果变化的着色器。</p>
<p>你能看到所有CD盒吗?看不到。"萨拉菲安接着说，"把所有CD盒全部设计一遍，这工作有意思吗? 其实挺有意思的。我们还真有几
位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚，所以就任劳任怨地把每张CD都雕琢了一番。也许，这其中的乐趣只有当事
人才能体会吧。”</p>
</hgroup>
</article>
</main>
<footer>
<br>
<br>
<br>
<br>
</footer>
</body>
</html>太大了就不截图了，有兴趣的可以自己动手试试
第四题：
需求截图：
二白代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东快报</title>
<style>
.s1 {
width: 200px;
font-weight: 20px;
background-color: rgb(255, 255, 255);
line-height: 28px;
}
.q1 {
font-size: 24px;
}
.q2 {
float: right;
color: gray;
font-size: 18px;
text-decoration: none;
}
.q3 {
color: rgb(235, 96, 88);
background-color: rgb(253, 240, 238);
}
.s2 {
color: rgb(163, 163, 163);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
</head>
<body>
<div class="s1">
<div>
<span class="q1">京东快报</span>
<a class="q2" href="#">更多 ></a>
</div>
<div>
<div class="s2">
<sapn class="q3">推荐</sapn> <span class="q4">过年买糖不纠结，而见谭王怒是法国人。</span>
</div>
<div class="s2">
<span class="q3">热门</span> <span class="q4">海信E3F和海信E3F-而见谭王怒是法国人。</span>
</div>
<div class="s2">
<span class="q3">最新</span> <span class="q4">各兰氏微蒸烤一体而见谭王怒是法国人。</span>
</div>
<div class="s2">
<span class="q3">热议</span> <span class="q4">UWANT清洁机和扫地而见谭王怒是法国人。</span>
</div>
</div>
</div>
</body>
</html>运行截图：
以上四题都是用这些知识，实现功能慢慢增加，知识也在不知不觉中巩固，加油，和二白一起！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
