哈哈哈哈，不得不说，今天是一个值得高兴的日子，因为明天就周末啊。
又能在被窝里偷一下懒，不过友情提醒大家，周末睡懒觉虽好，但是切莫多睡，这样容易变懒。、
哈哈哈，多了一些心里安慰，不过四级考试将至，大家也要加油啊！
好了，进入真题吧，今天做了一个新闻的详情页，话不多说，看效果图
大家一眼看上去，会运用到些什么知识呢？是不是就是<p>、<span>、<a>标签，就是这么简单。
我做这个实训作业首先看一下，划分一下用几个div盒子装起来，因为这样后面调格式的时候会很方便，其他就是一些小知识点综合起来。
像这里
这种可以用<span>标签来把文字装进去，然后对要调节的字段加上效果。
这里和大家介绍一下css中的居中标签text-alignh和边框
定义和用法
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
border 边框属性
定义和用法
border 简写属性在一个声明设置所有的边框属性。
可以按顺序设置如下属性：
- border-width
- border-style
- border-color
-
border-width 规定边框的宽度。 border-style 规定边框的样式。 border-color 规定边框的颜色。 inherit 规定应该从父元素继承 border 属性的设置。
老规矩代码如下：欢迎大家批评指正！
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鲁能足球队</title>
<style>
a{
text-decoration: none;
color: #0454a7;
}
#body {
width: 644px;
margin-left: calc(100% / 2 - 644px / 2);
font-size: 15px;
color: #333;
border: 1px solid #999;
border-top: 3px solid #094683;
}
#body > b {
font-size: 24px;
display: block;
text-align: center;
}
#headtxt {
color: #999;
font-size: 12px;
text-align: center;
}
#headtxt>span:first-child {
color: red;
margin-left: 3em;
}
#headtxt>span:nth-child(2) {
margin-left: 2em;
margin-right: 2em;
}
#headtxt>span:nth-child(3) {
color: red;
}
#headtxt>span:last-child {
margin-left: 3em;
}
hr {
background-color: #999;
width: 94%;
}
img {
width: 90%;
margin-left: 5%;
margin-top: 20px;
}
#imgtxt {
color: #999;
font-size: 12px;
text-align: center;
}
.txt {
text-indent: 2em;
width: 90%;
margin-left: 5%;
}
#card{
width: 90%;
margin-left: 5%;
border: 1px dashed #999;
}
#card > p{
margin: 0px;
padding: 10px;
}
#card > p > span:first-child{
color: #0454a7;
}
#card > p > span:last-child{
display: block;
text-align: right;
font-size: 12px;
}
.mgtop{
margin-top: 30px;
}
#key{
width: 90%;
margin-left: 5%;
}
#key > span{
color: #0454a7;
margin-right: 10px;
}
#key > span:first-child{
margin-right: 0px;
}
#download{
width: 80%;
margin-left: 10%;
text-align: center;
border: 1px solid #0454a7;
height: 2em;
line-height: 2em;
color: #0454a7;
background-color: #dee2f3;
margin-bottom: 40px
}
</style>
</head>
<body>
<div id="body">
<b>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</b>
<p id="headtxt">2015年08月08日18:19<span>新浪体育</span><span>微博</span>我有话说(<span>10,370</span>人参与)<span>收藏本文</span>
</p>
<hr />
<img src="img.jpg" alt="">
<p id="imgtxt">鲁能热身赛16-0大胜鲁能热身赛16-0大胜</p>
<p class="txt">
新浪体育讯 北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源均取得进球。
</p>
<div id="card">
<p><span><a href="">鲁能泰山足球新闻：</a></span>#鲁能泰山#鲁能热身赛16-0击败一支业余球队，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文钊、成源取得进球。
<span>2015-08-08 17:54 来自百度浏览器 转发(49) | 收藏 | 评论(50)</span>
</p>
</div>
<p class="txt mgtop">由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目前状态不错。</p>
<p class="txt mgtop">下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)</p>
<p id="key"><span>文章关键词：</span><span><a href="">中超</a></span><span><a href="">鲁能</a></span><span>阿洛伊西奥<a href=""></a></span><span><a href="">蒙蒂略</a></span></p>
<a href=""><p id="download">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</p></p>
</div>
</body>
</html>
来自一个青铜选手学html的日常
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
