web程序设计（３）——使用CSS设计新闻网页

实验要求

1、使用html构造一张新闻网页；
2、使用CSS对新闻网页的内容的样式进行设置：
新闻标题按照“红橙黄绿蓝紫”的方式显示标题；
新闻有主标题和新闻来源信息，主标题与副标题使用不同的字体于不同大小显示；
段落的行高设置为2em,首行缩进；
使用本节课所学的选择符，对新闻段落中某些重要信息使用加黑或是彩色文字显示。

实验目的

熟悉掌握CSS样式的使用

实验内容

打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后缀名.html
打出‘！’+tab键，使用emmet插件进行自动补齐
写‘title标签，命名网页名
写标题‘h1’—“新浪新闻网页”，使用后代选择器’>’设置每个字的颜色，并设置text-align使标题‘h1’居中

<h1><red>新</red><orange>浪</orange><yellow>的</yellow><green>新</green><qing>闻</qing><blue>网</blue><purple>页</purple></h1>
CSS:h1>red{color: red}h1>orange{color: orange}h1>yelllow{color: yellow}h1>green{color: green}h1>qing{color: greenyellow}h1>blue{color: blue}h1>purple{color: purple}h1{text-align: center;font-size: 40px;}

设置二级标题和小标题，使用id选择器设置字体（font-family），字体大小(font-size)，文本居中（text-align）等,发现两个标题离得太远，所以设置行高（line-height）使两个标题紧凑一些。“收藏本文”格式特殊且不需要大量应用，所以直接用行内样式设置字体颜色，加下划线。
HTML：

 <div ><p id='title01'>如果一个月就是世界末日 政府应该立即公布消息</p><p id='title02'>2019年8月8日 四川大学 江安校区 评论中大奖（12人参与） <u style="color: blue">收藏本文</u></p></div>
CSS:
#title01{font-size: 25px;text-align: center;line-height: 1px;     font-family: serif;  }#title02{font-size: 10px;text-align: center;line-height: 1px; font-family:fantasy}

效果图：
（1）行高设置前：

（2）行高设置后：

5. 设置新闻内容的样式，将所有内容加入

中，用class选择器设置内容板块，运用盒子模型使这一整个内容板块可以和网页边界留空。
Html:

 <div class="main"><p class="content">首先，跟您方确认一下<strong>定义</strong>，世界末日，即指人类毫无生还希望的那一天，不存在解决危机的可能性。在政府确认消息的第一时间，就应该把这个消息公布给民众。</p>
< /div >

CSS:

.main{padding: 25px;margin: 25px;width: 90%;border-top-style: solid;position:relative;}

6.利用类型选择设置段落样式，首行缩进两个相对字符长度（em）,text-align选择justify,其他文字样式同上
CSS：

.content{text-indent: 2em;text-align:justify;line-height: 2em;font-family: Arial, Helvetica, sans-serif;font-size: 15px}

7.使用后代选择器将段落的重点词句标出，如粗体（font-weight），颜色（color），斜体（font-style）等
CSS：

p>strong{font-weight: 700;}p>red{color: red}p>xie{font-style:oblique;font-weight:600;}

实验效果

实验完整代码

<!DOCTYPE html>
<html lang="en">
<head><style>h1>red{color: red}h1>orange{color: orange}h1>yelllow{color: yellow}h1>green{color: green}h1>qing{color: greenyellow}h1>blue{color: blue}h1>purple{color: purple}h1{text-align: center;font-size: 40px;}#title01{font-size: 25px;text-align: center;line-height: 1px;     font-family: serif;  }#title02{font-size: 10px;text-align: center;line-height: 1px; font-family:fantasy}p>collect{color: blue;}.content{text-indent: 2em;text-align:justify;line-height: 1em;font-family: Arial, Helvetica, sans-serif;font-size: 15px}p>strong{font-weight: 700;}p>red{color: red}p>xie{font-style:oblique;font-weight:600;}.main{padding: 25px;margin: 25px;width: 90%;border-top-style: solid;position:relative;}</style><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>新闻网页</title></head>
<body><h1><red>新</red><orange>浪</orange><yellow>的</yellow><green>新</green><qing>闻</qing><blue>网</blue><purple>页</purple></h1><div ><p id='title01'>如果一个月就是世界末日 政府应该立即公布消息</p><p id='title02'>2019年8月8日 四川大学 江安校区 评论中大奖（12人参与） <u style="color: blue">收藏本文</u></p></div><div class="main"><p class="content">首先，跟您方确认一下<strong>定义</strong>，世界末日，即指人类毫无生还希望的那一天，不存在解决危机的可能性。在政府确认消息的第一时间，就应该把这个消息公布给民众。</p><p class='content'>从<strong>个人意义</strong>上讲，公布消息可以保证人们的知情权，让他们有选择如何度过自己生命的最后一个月的<red>自由</red>，从而让自己的人生过得更加有意义。假设一个人，如果他知道了自己的生命只剩下了短短的一个月，他可能会选择完成自己一直以来想做，却因为种种原因放弃的事情，这使他能够完成自己的梦想；他也有可能选择陪自己的家人好友，对他们敞开心扉，说出自己想说却一直没有勇气说出的想法，感情，让自己没有遗憾。当然，他也有可能选择什么也不做，就如同每个最平凡的昨天，在平静中迎接死亡。但是，无论什么方式，他们拥有了选择的自由，并为自己的选择付出努力，用尽全力达成自己的目标，在生命的最后一个月，人类燃烧自己，为自己的人生画上最完美的句号，可能这并不是别人眼中的完美，在他人眼里毫无意义，然而人本来就是为自己而活，正是这不同的选择给予了人类无与伦比的<red>人性光辉</red>，为了保证每个人的选择自由，政府应该公布消息。</p><p class='content'>其次，从<strong>人类文明的意义</strong>来讲，政府公布消息有利于人类文明的展现和保存。追求文明本身的真实。不公布消息，人类文明确实可能会在一片平静中湮灭，但是政府有什么权利让人类文明的灭绝一开始就以懦弱的形态接受死亡呢？封锁消息，一开始就将人类意志钉在了耻辱柱上，为何不敢展露人性的真实呢？相反，政府公布消息，人类文明在面对死亡的时候究竟会有何伟大的壮举，难道不令人期待吗？正如有人在<xie>唐山大地震</xie>奋不顾身救出老师同学，也有人在<xie>烈火</xie>中挽救生命，人类面对死亡的骄傲姿态正是人性的伟大之处。人类当然会恐惧，茫然，扭曲，但这正是人类文明的真实啊！我们的文明，本身就是<red>有善有恶</red>，何必伪装？封锁消息无异于是否认人性，丑化人类文明。</p></div>
</body>
</html>

web程序设计（３）——使用CSS设计新闻网页相关推荐

html的页面宽高变形问题,CSS＋div 设计的网页在不同浏览器中变形的问题
给别人做了一个web,自己这边正常,一到对方,机器上,发现变形了,真郁闷,后来才发现时IE 7.0惹得祸,没有办法,学习呗. 如何使网页在IE7.0和火狐中不变形? 以下的方法可行,但并不一定是最简单 ...
Java Web 程序设计----基于SSM框架（正在更新中）
Java Web 程序设计----基于SSM框架提示:主要用于个人学习.复习.查阅等. 文章目录 Java Web 程序设计----基于SSM框架一.网页前端开发基础 HTML文档结构提示:以下 ...
css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
div+css静态网页设计web网页设计实例作业 ——中国风的茶文化(4页) web课程设计-HTML网页制作代码
web网页设计实例作业 --中国风的茶文化(4页) web课程设计-HTML网页制作代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. ...
web前端期末大作业 ~我的家乡-绿城之都html+css+javascript旅游网页设计实例
web前端期末大作业 ~ 我的家乡-绿城之都html+css+javascript旅游网页设计实例临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页 ...
HTML5期末大作业：动漫网站设计——灌篮高手(4页)HTML+CSS 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
web课程设计网页规划与设计：网页设计——在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业...
web课程设计网页规划与设计 :网页设计--在线书店(12个页面) HTML+CSS+JavaScript 学生网页课程设计期末作业临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头 ...
web前端实训作业 html+css+javascript 水果网页设计实例企业网站制作
web前端实训作业 html+css+javascript 仿果然新鲜水果(6页面)网页设计实例企业网站制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无 ...
HTML5期末大作业：商城网站设计——蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码
HTML5期末大作业:商城网站设计--蘑菇街商城(1页) HTML+CSS+JavaScript web前端课程设计_web前端课程设计代码,web课程设计-HTML网页制作代码常见网页设计作业题材 ...