HTML——制作新闻网页

制作如图的新闻网页

结构分析:
新闻页面有一个标题,多个段落和一条水平线构成。在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;}
发布了28 篇原创文章 · 获赞 1 · 访问量 1697

猜你喜欢

转载自blog.csdn.net/qq_45870494/article/details/103704940
今日推荐