一个HTML+CSS的简单实现
历时近两个小时终于完成了这样一个简单的页面，感觉还行，还原度百分之80下面是源码：<!doctype html>
<html lang="zh-CN">
<head>
<title>山东鲁能</title>
<meta charset="utf-8" />
<style>
.news{
width:600px;
margin:100px auto;
border:1px solid #bbb;
border-top:3px solid #094683;
padding:11px 20px 15px 20px;
}
h2{
padding:0;
margin:0;
text-align:center;
font-weight:400;
font-size:22px;
}
.nav{
padding:10px 0;
text-align:center;
font-size:12px;
color:#999;
border-bottom:1px solid #ccc;
}
.nav a{
color:#999;
text-decoration:none;
}
.red{
color:#b60c0c;
}
.nav a:hover{
text-decoration:underline;
}
.data,.nav a{
margin:0 10px;
}
a.rea{
color:#b60c0c;
}
a .red:hover{
color:red;
}
.content{
padding:20px;
}
.pcname{
font-size:12px;
text-align:center;
color:#999;
}
.content p{
margin:10px 0;
font-size:14px;
line-height:23px;
color:#333;
}
.ins{
border:1px dashed #ccc;
padding:10px;
}
.content p span{
display:block;
text-align:right;
font-size:12px;
}
b{
font-size:14px;
}
.content a{
color:#0454a7;
font-size:14px;
text-decoration:none;
}
.content a:hover{
text-decoration:underline;
}
.footer{
margin:10px 20px;
border:1px solid #0454a7;
text-align:center;
padding:5px 0;
background:rgb(222,226,243)
}
</style>
</head>
<body>
<div class="news">
<h2>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h2>
<div class="nav">
<span class="data">2015年08月08日18:19</span>
<a href="#" class="rea" >新浪体育</a>"微博"
<a href="#">我有话说(<span class="red">10,370</span>人参与)</a>
<a href="#">收藏本文</a>
</div>
<div class="content">
<img src="img.jpg" />
<p class="pcname">鲁能热身赛16-0大胜</p>
<p > 新浪体育讯 北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。</p>
<p class="ins"><a href="#">鲁能泰山足球新闻：</a>#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。<span>2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</span></p>
<p> 由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。</p>
<p> 下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)</p>
<b>文章关键词：</b><a href="#">中超</a>
<a href="#">鲁能</a>
<a href="#">阿洛伊西奥</a>
<a href="#">蒙蒂略</a>
<div class="footer">
<a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a>
</div>
</div>
</div>
</body>
</html>在敲码的过程中时间不知不觉的过去了，但只做了一个简单的毫无交互的界面，路漫漫其修远兮，吾将上下而求索。在编程的过程中遇到的问题还是有的，发现自己CSS的选择器应用上还是不行，需要在好好的看看，怎样好的掌控雷电还要再去看看。
还有一个简单一些的案例：
<!doctype html>
<html lang="zh-CN">
<head>
<title>新闻直播中</title>
<meta charset="utf-8" />
<style>
.newbar{
padding:10px;
width:240px;
margin:20px auto;
border:1px solid #090;
background:url("img/bg.gif");
}
h2{
border-left:5px solid green;
color:#fff;
font-size:20px;
padding:0px;
margin-top:0px;
margin-bottom:8px;
}
ul{
margin:0px;
padding:0px;
background:#fff;
list-style:none;
}
li{
background:url("img/tb.gif") no-repeat left;
font-size:12px;
margin-left:0px;
padding:3px 0;
line-height:25px;
border-bottom:1px dashed #ccc;
}
a{
text-decoration:none;
margin-left:15px;
}
a:hover{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<!--新闻-->
<div class="newbar">
<!--头部-->
<div class="head">
<h2>爱宠知识</h2>
</div>
<!--内容-->
<div class="content">
<ul>
<li><a href="#">养狗比养猫对健康更有利</a></li>
<li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
<li><a href="#">狗狗歌曲《新年旺旺》</a></li>
<li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
<li><a href="#">【爆笑】这狗狗太不给力了</a></li>
<li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
<li><a href="#">狗狗各个阶段健康大事件</a></li>
<li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
<li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
</ul>
</div>
</div>
</body>
</html>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
