目录
效果图
01 家庭电器分类
02 音乐排行榜
03 畅销书排行榜
代码
01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家用电器分类</title>
<link href="three.css" rel="stylesheet" text="/text/css">
</head>
<body>
<div id="total_page">
<h2>家用元素</h2>
<h3><a class="middle" href="#" target="_blank">大家电</a></h3>
<div class="small">
<a class="linkWord" href="#" target="_blank">平板电脑</a>
<a class="linkWord" href="#" target="_blank">洗衣机</a>
<a class="linkWord" href="#" target="_blank">冰箱空调</a>
<a class="linkWord" href="#" target="_blank">烟机/灶具</a>
<a class="linkWord" href="#" target="_blank">热水器</a> <br>
<a class="linkWord" href="#" target="_blank">家庭影院</a>
<a class="linkWord" href="#" target="_blank">消毒柜</a>
<a class="linkWord" href="#" target="_blank">酒柜/冷柜</a>
</div>
<br>
<h3><a class="middle" href="#" target="_blank">生活电器</a></h3>
<div class="small">
<a class="linkWord" href="#" target="_blank">电风扇</a>
<a class="linkWord" href="#" target="_blank">净化器</a>
<a class="linkWord" href="#" target="_blank">吸尘器</a>
<a class="linkWord" href="#" target="_blank">净水设备</a>
<a class="linkWord" href="#" target="_blank">挂烫机</a>
<a class="linkWord" href="#" target="_blank">电话机</a>
</div>
<br>
<h3><a class="middle" href="#" target="_blank">厨房电器</a></h3>
<div class="small">
<a class="linkWord" href="#" target="_blank">榨汁机</a>
<a class="linkWord" href="#" target="_blank">电压力锅</a>
<a class="linkWord" href="#" target="_blank">电饭煲</a>
<a class="linkWord" href="#" target="_blank">豆浆机</a>
<a class="linkWord" href="#" target="_blank">微波炉</a>
<a class="linkWord" href="#" target="_blank">电磁炉</a>
</div>
<br>
<h3><a class="middle" href="#" target="_blank">五金家装</a></h3>
<div class="small">
<a class="linkWord" href="#" target="_blank">淋浴/水槽</a>
<a class="linkWord" href="#" target="_blank">电动工具</a>
<a class="linkWord" href="#" target="_blank">手动工具</a>
<a class="linkWord" href="#" target="_blank">仪器仪表</a>
<a class="linkWord" href="#" target="_blank">浴霸/排气</a>
<a class="linkWord" href="#" target="_blank">灯具</a>
</div>
</div>
</body>
</html>#total_page{
width: 300px;
text-align: left;
}
h2{
font-weight: bolder;
font-size: 18px;
color: white;
line-height: 35px;
text-indent: 1em;
background: -moz-linear-gradient(to top,#0467AC,#63A7D6,#B6DBF5);
}
h3{
font-weight: bolder;
font-size:14px;
line-height: 30px;
text-align: center;
background: -moz-linear-gradient(to bottom,rgba(200,200,100),rgba(255,200,20,0.5),wheat);
}
.middle{
color: #0565C6;
text-decoration: none;
}
a.middle:hover{
text-decoration: underline;
}
.small{
font-size: 12px;
line-height: 26px;
}
.linkWord{
text-decoration: none;
color: #666;
}
a.linkWord:hover{
color: #F60;
text-decoration: underline;
}02
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐排行榜</title>
<style>
div ol li{
font-weight: bold;
font-size: 40px;
color: wheat;
text-decoration: underline;
}
img{
height: 40px;
width: 40px;
}
div{
height: 400px;
width: 600px;
background: -moz-linear-gradient(to top,#63A7D6,#000033);
}
</style>
</head>
<body>
<h2>音乐排行榜</h2>
<div>
<ol>
<li>Promise <img src="image/icon.jpg" alt="小图标"></li>
<li>起风了 <img src="image/icon.jpg" alt="小图标"></li>
<li>慢热 <img src="image/icon.jpg" alt="小图标"></li>
<li>萱草花 <img src="image/icon.jpg" alt="小图标"></li>
<li>想见你想见你想见你 <img src="image/icon.jpg" alt="小图标"></li>
<li>失眠城市 <img src="image/icon.jpg" alt="小图标"></li>
</ol>
</div>
</body>
</html>03
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>畅销书排行榜</title>
<link href="bookList.css" rel="stylesheet" text="/text/css">
</head>
<body>
<div id="backg">
<h2 id="title">畅销书排行榜</h2>
<ul>
<li><a class="aLink" href="book1.html" target="_blank">禅与摩托车维修技术</a></li>
<li><a class="aLink" href="book2.html" target="_blank">边城</a></li>
<li><a class="aLink" href="book3.html" target="_blank">羊的门</a></li>
<li><a class="aLink" href="book4.html" target="_blank">路过合庄</a></li>
<li><a class="aLink" href="book5.html" target="_blank">姑娘寨</a></li>
<li><a class="aLink" href="book6.html" target="_blank">蒲柳人家</a></li>
<li><a class="aLink" href="book7.html" target="_blank">平凡的世界</a></li>
<li><a class="aLink" href="book8.html" target="_blank">月亮与六便士</a></li>
<li><a class="aLink" href="book9.html" target="_blank">大江大河</a></li>
<li><a class="aLink" href="book10.html" target="_blank">人间失格</a></li>
</ul>
</div>
</body>
</html>#title{
font-weight: bolder;
font-size: 16px;
color: white;
line-height: 30px;
background: #518700;
}
#backg{
height: auto;
width: auto;
color: wheat;
background: -moz-linear-gradient(to top,#F9FBCB,#F8F8F3);
}
li{
font-size: 12px;
line-height: 28px;
}
.aLink{
color: #1A66B3;
text-decoration: none;
}
.aLink:hover{
color: #1A66B3;
text-decoration: underline;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>禅与摩托车维修技术</title>
<link href="bookTotal.css" rel="stylesheet" text="/text/css">
</head>
<body>
<div>
<h2 id="title">禅与摩托车维修技术</h2>
<h3>作者：<a class="aLink" href="#" target="_blank">（美）罗伯特·M·波西格</a></h3>
<p id="points">豆瓣：8.2</p>
<p id="pic">
<img src="image/L1.jpg" alt="禅与摩托车维修技术" title="禅与摩托车维修技术"><br>
<em>内容简介：在一个炎热的夏天，父子两人和约翰夫妇骑摩托车从明尼苏达到加州，跨越美国大陆，
旅行的过程与一个青年斐德洛研修科学技术与西方经典，寻求自我的解脱，以及探寻生命的意义的过程相互穿插。
一路上父亲以一场哲学肖陶扩的形式，将见到的自然景色，野外露营的经历，夜晚旅店的谈话，
机车修护技术等等日常生活与西方从苏格拉底以来的理性哲学的深入浅出的阐述与评论相结合，
进行了对形而上学传统的主客体二元论的反思，以及对科学与艺术，知识与价值，古典主义与浪漫主义
，精神与物质，机械论与神秘主义，西方与东方等西方二分法划分下的事物间的关系的思考
。并潜入自己的过去，探寻在现代文明下自己精神的分裂的起源，完成了一次自我心灵与人类文明的探索。
</em>
</p>
</div>
</body>
</html>#title{
font-weight: bold;
font-size: 20px;
text-align: center;
}
h3{
font-weight: bold;
font-size: 15px;
color: black;
text-align: center;
}
h3 a{
font-weight: lighter;
font-size: 15px;
color: #0467AC;
text-align: center;
text-decoration: none;
}
.aLink:hover{
color: #9C2F06;
}
#points{
font-weight: bold;
text-align: right;
}
#pic{
height: 350px;
width: auto;
font-weight: lighter;
font-size: 15px;
color: black;
text-align: center;
background: -moz-linear-gradient(to top,#F8F8F3,#F9FBCB,white);
}
扫一扫
498
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
