-
web程序设计(3)——使用CSS设计新闻网页
2020-01-10 17:01:382、使用CSS对新闻网页的内容的样式进行设置: 新闻标题按照“红橙黄绿蓝紫”的方式显示标题; 新闻有主标题和新闻来源信息,主标题与副标题使用不同的字体于不同大小显示; 段落的行高设置为2em,首行缩进; 使用...实验要求
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>
-
百度新闻小偷 v1.06
2019-10-26 01:40:57百度新闻小偷程序,本程序为开源程序,大家可以随意更改,出现任何纠纷与作者无关,功能:1....提示:此版本做交流用,请勿正式使用,否则可能导致百度新闻屏蔽服务器IP,对网页收录不影响,只是不能显示小偷采集数据! -
百度新闻小偷 v1.06.rar
2019-08-30 15:19:27百度新闻小偷程序,本程序为开源程序,大家可以随意更改,出现任何纠纷与作者无关, ...提示:此版本做交流用,请勿正式使用,否则可能导致百度新闻屏蔽服务器IP,对网页收录不影响,只是不能显示小偷采集数据! -
本项目的创新之处在于给客户个性化的体验,客户可以根据个人兴趣和习惯设置新闻内容,还可以设置自己关心的相关主题关键词新闻(如:IT,手机,软通动力,天气等) ,还可以选择您关心的地区新闻,完全由自己选择。...
-
百度新闻爬虫网站.docx
2020-07-01 16:16:002) 移动端的实现方式可以选择Html5网页形式、微信小程序形式、混合开发模式(如APICloud)或者原生开发模式(任选其一即可)。 ) 基于Java语言及相关技术框架实现; 2) 移动端功能包括:类似今日头条的新闻列表... -
urlpages:创建和查看完全存储在URL中的网页-源码
2021-02-03 16:53:51顾名思义,URL页面通过将网页的全部内容存储在URL中而起作用。 因此,只要URL存在,它指向的页面也将存在。 URL页面程序的其余部分负责在网页代码(HTML / CSS / JavaScript)和“编码” URL之间进行翻译。 主页从... -
程序天下:JavaScript实例自学手册
2018-07-08 12:59:553.35 文本框显示网页中选中的内容 3.36 文字的垂直滚动 3.37 文字幻灯片 3.38 随机动态文字效果 3.39 实现textarea的自动滚动 3.40 使用marquee实现文字上下滚动 3.41 类似安装效果的textarea滚动 3.42 始终显示在最... -
大型学校网站源码学校网页模板正式版
2010-05-14 20:15:148:新闻页快速评论功能,加入新闻阅读签收功能,新闻图片鼠标滚轮缩放功能,新闻标题后评论显示。 9:全新的单位部门设定。 10:增加图片新闻页面。 11:目录结构,文件命名,书写规则规范化。 12:统一了字符... -
司科仿美团O2O程序源码最新版+wap+微信版亲测完整版
2016-05-30 16:19:00一、合作商家可以通过后台发布自己的展示商品和商家新闻,帮助树立商家企业形象,加强与商家的合作。 二、商家可以自己的后台对商品券进行验证消费。 商家上传系统 商家可以自行上传产品,管理员审核,审核通过即可... -
XML轻松学习手册--XML肯定是未来的发展趋势,不论是网页设计师还是网络程序员,都应该及时学习和了解
2008-12-05 08:39:07XML和HTML都来自于SGML,它们都含有标记,有着相似的语法,HTML和XML的最大区别在于:HTML是一个定型的标记语言,它用固有的标记来描述,显示网页内容。比如表示首行标题,有固定的尺寸。相对的,XML则没有固定的... -
97酷5生活门户系统 v5.0 更新版
2019-10-18 02:25:17程序简介页面简介大方支持全站静态与伪静态生成,提高网页访问速度,有利于搜索引擎的收录。支持js和标签调用,主站与论坛统一后台管理,同一数据库记录数据。QQ登陆功能大大降低用户注册的门槛,提高用户体验度。... -
第一网站导航[生成html]网址管理系统 v130729.zip
2019-07-06 02:51:10本程序体积小(压缩起来只有1M左右),后台功能强大、界面清新、操作简单,不需要专业的建站知识,也可轻松管理本站的程序 本程序模版全部采用div css编辑(访问速度比普通table编辑的更快)并且完美兼容互联网所有... -
第一网站导航网址管理系统 v110512.rar
2019-07-09 17:32:04本程序体积小(压缩起来只有1M左右),后台功能强大、界面清新、操作简单, 不需要专业的建站知识,也可轻松管理本站的程序, 本程序模版全部采用div css编辑(访问速度比普通table编辑的更快) 并且完美兼容互联网... -
86CMS企业网站管理系统 2011.SP7 UTF-8.zip
2019-07-05 03:10:47top2.asp 用于子目录下留言板和会员中心读取网页头部内容。 程序说明: 本程序为智能ASP网站管理程序,适合中小企业自建网站、二次开发使用。本程序具有体积小巧、程序文件结构严谨、界面清爽简单、功能... -
靓亮建站吧网站管理系统 v2.0.rar
2019-07-05 03:56:59靓亮建站吧网站管理系统采用ASP ACCESS平台开发,网页精美、大气,具有稳性定强,功能多、安全、代码加载速度快,网站内容管理的易操作性等优点,方便快捷低成本,是中小企业建站首选。 系统功能介绍 ... -
XYCMS大闸蟹销售经营店源码 v3.1
2019-10-18 09:45:48功能简述:企业信息管理:包括基本信息管理,添加,在线报名信息管理,问答中心信息管理新闻中心管理:管理新闻信息内容,管理相关分类,添加或者删除产品内容管理:对产品类别进行管理,分为大类和小类,发布最新... -
DB_v2.0 网站建设管理系统免费版.rar
2019-07-05 04:16:18东北工作室网站管理系统采用ASP ACCESS平台开发,网页精美、大气,具有稳性定强,功能多、安全、代码加载速度快,网站内容管理的易操作性等优点,方便快捷低成本,是中小企业建站首选。 系统功能介绍 基本设置... -
xleach - My iRSS Paper v0.8.8.0(RSS客户端阅读工具)
2019-11-06 17:23:16OPML导出时附带分组信息 [+]优化更新信息时的代码效率[+]频道增加一个下载相关网页的属性,可以强制下载或者不下载 [+]自定义数据库路径 [+]将RSS内容进行压缩保存,减少数据库的大小 [+]即时显示频道的更新情况,... -
专业的事要专业的工具来做,搜索引擎的核心功能就是对网页内容进行索引,即使网站有百万网页, 通过搜索引擎语法进行关键词的查找,出结果只需要一瞬间。 078《Bookmarks clean up》高效清理重复和损坏的书签 ...
-
艺帆婚纱摄影婚庆公司网站源码.rar
2019-07-05 08:36:55特色功能:产品、新闻内容图片可以批量上传(免去一张张上传的烦恼),全站伪静态(优化SEO,对搜索引擎更友好),全站关键词可自动设置(每个页面关键词都有针对性),文章内容可以分页,图片渐显载入(优化显示速度... -
html入门到放弃笔记
2018-05-15 15:06:12WEB,是基于Internet上的一种应用程序(网页应用程序) WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User ... -
企业SEO站 v17.0 无组件生成HTML.rar
2019-07-05 03:36:3640、修复部分用户在本地测试时后台可以正常打开,首页空白的情况,修复留言提交字段报错,修复程序整体兼容性 41、修正手机端网站不能同步生成问题。 42、栏目类别新增功能上下移动,产品和新闻新增功能置顶、前移... -
网趣网上购物系统时尚版V13.0
2015-09-12 16:35:34应用户要求,首页新闻增加了滚动显示方式,更为美观,滚动显示的新闻不限新闻条数,可以满足更多需要此功能的用户,后台可以控制新闻显示方式,如滚动式与静止式。 三十、增中管理员登陆日志功能 新增管理员后台... -
ASP.NET开发实战1200例(第1卷).part2
2016-06-11 20:12:37实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示... -
ASP.NET开发实战1200例(第1卷).part1
2016-06-11 20:07:19实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示... -
ASP.NET开发实战1200例(第1卷).part3
2016-06-11 20:19:00实例141 使用网页对话框显示图片 226 实例142 上传图片并生成高清缩略图 228 实例143 删除上传到服务器指定文件夹中的数码照片 231 实例144 批量上传数码相片 232 5.5 Panel容器控件 236 实例145 使用Panel控件显示... -
JS、JQuery、CSS+DIV实例大全
2012-07-12 14:03:2152.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩... -
JQuery&CSS;&CSS;+DIV实例大全.rar
2018-08-13 12:03:5252.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩... -
JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)
2018-08-13 13:37:4352.jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53.jquery网站顶部滑动广告插件 54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩...
收藏数
92
精华内容
36
-
每日算法-路径总和
-
springmvc-01.rar
-
3.Linux vim
-
@CSDN官方
-
flyPointData.json
-
455. Assign Cookies (Easy)
-
MHA 高可用 MySQL 架构与 Altas 读写分离
-
项目管理工具与方法
-
小达人毛毛虫蓝猫贝比点读笔资源.zip
-
UI布局ScrollView+RecyclerView自动往上滑动显示到RecyclerView底部
-
LVS + Keepalived 实现 MySQL 负载均衡与高可用
-
C51编程13-中断篇(外部中断)
-
Hive什么时候可以用别名?
-
C++MFC开发远程控制软件教程(VS2013)
-
python爬虫 demo_1
-
类和对象-运算符重载-1、加减号运算符重载
-
程序员必修基础套餐课
-
基于Flink+Hudi构建企业亿级云上实时数据湖教程(PC、移动、小
-
PPT大神之路高清教程
-
Laravel-admin表单Form多级下拉复选框组件multiCheckbox(优化版).rar