网页设计与制作结课题目三大题网页代码
第一题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页大作业</title>
<style>
*{padding:0;margin:0}
body{background:#fff;}
.box{width:318px;height:178px;margin:0 auto;padding:10px;}
.a1{float:left;width:106px;margin-right:20px;}
.a2{float:left;width:176px;}
.a2 p.top{font-size:12px;color:#9d9d9d}
.a2 h2{font-size:16px;line-height: 32px;}
.a2 p{font-size:12px;line-height: 20px;color:#6a6a6a}
.a2 a{color:#f00;text-decoration: none;}
</style>
</head>
<body>
<div class="box">
<div class="a1"><img src="img/1.jpg"></div>
<div class="a2">
<p class="top">中国经济周刊</p>
<h2>2013年上市公司成绩单</h2>
<P>2013中国股市以年跌幅8%的表现“熊”冠全球。而在这背后，
则是A股2534家上市公司上演着各自的悲喜剧。<a href="">[详细]</a></P>
</div>
</div>
</body>
</html>第二题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第二题</title>
<style>
*{padding:0;margin:0}
body{background:#fff;}
.box{width:748px;height:232px;margin:0 auto;padding:10px;}
.top{line-height: 50px;}
.top h3{float:left;padding-left:20px;font-weight:300;font-size:18px;background:url(img/titletubiao.png) center left no-repeat;}
.top .more{float:right;color:#3a9590}
.clear{clear:both;}
.list ul li{float:left;margin:8px;list-style: none;width:118px;padding:5px;border:1px solid #f2f2f2}
.list ul li img{width:100%;height:153px;}
.list ul li p{font-size:12px;text-align: center;}
</style>
</head>
<body>
<div class="box">
<div class="top">
<h3>新书</h3>
<div class="more">更多 》</div>
</div>
<div class="clear"></div>
<div class="list">
<ul>
<li><img src="img/1.jpg"><p>1966年</p></li>
<li><img src="img/2.jpg"><p>陆犯焉识（新版）</p></li>
<li><img src="img/3.jpg"><p>重庆往事</p></li>
<li><img src="img/4.jpg"><p>随意</p></li>
<li><img src="img/5.jpg"><p>孤独的人都要吃饱</p></li>
</ul>
</div>
</div>
</body>
</html>
第三题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第三题</title>
<style>
*{padding:0;margin:0}
body{background:#fff;}
.box{width:345px;margin:0 auto;padding:10px;}
.btn{display: flex;margin-bottom:10px;}
.btn .spanList{text-align:center;display:block;background:#d9eafe;width:150px;line-height: 28px;color:#333;flex: 2 2 2px;}
.clear{clear:both;}
.btn .active{background:#ffff;color:#000;font-weight: bold;border:1px solid #5a98d6;border-bottom:none;}
.context li{font-size:14px;line-height:28px;overflow:hidden;position:relative;padding:0 20px 0 22px;margin:0 0 10px 0;background: url(img/border_bottom.png) bottom repeat-x;}
.context li em{width:20px;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.context li em{background-position:0 -16px;}
.context li.top em{background-position:0 0;color:#fff;}
.context li .num{position:absolute;right:0;top:0;color:red;}
</style>
</head>
<body>
<div class="box">
<div class="btn">
<!-- Tab标题 -->
<span class="active spanList">点击排行</span>
<span class="spanList">评论排行</span>
<div class="clear"></div>
</div>
<div class="context">
<ul>
<li><em style="color:#5a98d6">1</em><p>中国各城市房子不要卖多少年(详数据)</p><span class="num">187706</span></li>
<li><em style="color:#5a98d6">2</em><p>任志强:60多年来我不知道国企给了我们</p><span class="num">171186</span></li>
<li><em style="color:#5a98d6">3</em><p>三精制药跳楼老总被查因华润商贿案 省食</p><span class="num">127631</span></li>
<li><em>4</em><p>内地17省铺开不动产统一登计职责整合工作</p><span class="num">113865</span></li>
<li><em>5</em><p>山西煤老板抛售整栋99套二手房8年投资翻</p><span class="num">87706</span></li>
<li><em>6</em><p>北京城南楼市“沦陷” 变相降价措施加码 </p><span class="num">72770</span></li>
<li><em>7</em><p>中国3D打印技术取得重大突破近1200人连</p><span class="num">62971</span></li>
<li><em>8</em><p>重磅利空突至致全球暴跌A股或黑周五无是</p><span class="num">27456</span></li>
<li><em>9</em><p>七匹狼早盘上演奇葩一幕:单笔4手卖单刷</p><span class="num">25322</span></li>
<li><em>10</em><p>长油小股东主导股东大会当场爆料董事长</p><span class="num">11667</span></li>
</ul>
</div>
</div>
</body>
</html>
①本站所有成品淘宝购买需确认收货并好评后发货；
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作结课题目三大题网页代码
②所有作品如需修改需另加费用；
③所有作品没有任何人的姓名学校之类信息；
④请务必确认网页是您需要的，源码具有可复制性，所以无法退换！
⑤每份网页都可以更换内容，费用50元起，如需更换内容请联系客服!
dw网页设计 » 网页设计与制作结课题目三大题网页代码
