制作如图的新闻网页
结构分析:
新闻页面有一个标题,多个段落和一条水平线构成。在html页面中我们可以使用标题标记 < h2 >、< h3 > 段落标记用< p > 水平标记用< hr/>进行定义 文本很文本中为了定义某些特殊显示的文本 可以使用< em > 、 < b>修饰
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>新闻页面</title>
<link rel="stylesheet" href="style03.css" type="text/css"/>
</head>
<body>
<h2>高校IT骨干教师培训班将于7月在京举办(图)</h2>
<p class="one"><em class="blue">2014年4月15日11:08</em><em class="blue">传智播客网</em><em class="gray">我有话说(<em id="num">802</em>人参与)</em></p>
<hr/>
<p class ="two">2014年全国高校骨干IT教师暑期培训班将于7月在京举办</p>
<p>传智播客网4月15日消息 中国电子协会将携手csdn<em class="blue">[微博]</em>
和传智播客教育集团<em class="blue">[微博]</em>于2014年7月在京举办“2014年全国高校IT骨干老师培训班”。本次将于2014年7月14日到25日举办,课程涵盖:
JavaEE、.NET、PHP、网页平面设计、ios、C++六个方向。</p>
<p class="four">高校IT骨干教师培训班将于7月在京举办</p>
<p>传智播客<em class="blue">[微博]</em>还将为校企之间、校校之间提供交流分享专业建设与教学改革的理念、经验与成果的平台。</p>
</body>
</html>
之中css样式为:
@charset "utf-8";
body{
font:14px/24px "宋体";
color:#000;}
h2{
font:normal 22px/35px "微软雅黑";
color:#072885;
text-align:center;
}
.one{
font-szie:12px;
text-align:center;
}
p{text-indent:2em;}
.blue{color:#3d6cb0;}
.gray{color:#666;}
#num{color:#3d6cb0;}
em{ font-style:normal;}
.two{font-family:"楷体_GB2312";}
.four{font-weight:bold;}
更多推荐
HTML——制作新闻网页
发布评论