项目4 美化页面_第1页
项目4 美化页面_第2页
项目4 美化页面_第3页
项目4 美化页面_第4页
项目4 美化页面_第5页
已阅读5页，还剩38页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务3美化页面Web前端开发项目式教程HTML5+CSS3具体新闻网页任务4-1任务描述新闻是网页信息的一种重要表现形式，围绕某一个具体新闻进行较全面、深入的报道。本节将通过CSS字体样式及CSS文本外观样式制作一个具体新闻页面。学习目标知识目标掌握CSS字体样式属性掌握CSS文本外观属性技能目标学会使用CSS进行字体样式设计学会使用CSS进行文本外观设计素质目标树立标准意识，遵守项目开发流程规范知识点

字体样式属性01

文本外观属性02具体新闻网页任务4-1font-size属性用于设置字号，具体单位如下表所示。font-size：字号大小一、字体样式属性font-family：字体一、字体样式属性font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：font-weight一、字体样式属性font-weight属性用于定义字体的粗细，可用属性值如下表所示。font-style一、字体样式属性font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic。color二、文本外观属性color属性用于定义文本的颜色，其取值方式有如下3种：1、预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十2、六进制是最常用的定义颜色的方式。3、RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。letter-spacing二、文本外观属性letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。word-spacing二、文本外观属性word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。line-height二、文本外观属性line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。如果设置的值和height值相同时，文字垂直方向居中对齐。text-decoration二、文本外观属性text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：1、none：没有装饰（正常文本默认值）2、underline：下划线3、overline：上划线4、line-through：删除线text-indent二、文本外观属性该属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。text-align二、文本外观属性text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐任务

具体新闻网页任务实现1、启动HBuilderX（1）打开HBuilder，默认Web项目HelloHBuilder中将index.html右键重命名为demo4-1.html。2、插入图片（2）将pic.jpg图片复制到HelloHBuilder项目中img文件夹下。右键默认项目，选择【打开文件所在目录】，就可以复制了。3、输入网页代码（3）修改<title>和<body>中的内容，按下Ctrl+S快捷键，进行文件的保存。在浏览器中运行demo4-1.html（或者双击demo4-1.html文件）。4、

保存并浏览网页任务效果运行效果美化新闻列表任务4-2任务描述新闻列表是门户网站必不可少的部分，美化新闻列表可以提高用户的观赏性，通过美化新闻列表网页，让我们熟悉CSS超链接和背景颜色的设置。学习目标知识目标掌握超链接样式的设置掌握背景颜色和背景图像的设置技能目标能够根据需要设置各种超链接样式能够熟练设置背景颜色能够熟练设置背景图像素质目标树立标准意识，遵守项目开发流程规范知识点超链接样式01

背景颜色和背景图像02一、

超链接样式在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。例如设置网页的背景颜色为灰色，代码如下：背景颜色二、

背景颜色和背景图像在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。准备一张背景图片，代码如下：背景图像二、

背景颜色和背景图像默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下：repeat：沿水平和竖直两个方向平铺（默认值）no-repeat：不平铺（图像位于元素的左上角，只显示一次）repeat-x：只沿水平方向平铺repeat-y：只沿竖直方向平铺设置背景图像平铺二、

背景颜色和背景图像（1）使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标。（2）使用预定义的关键字：指定背景图像在元素中的对齐方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。设置背景图像位置二、

背景颜色和背景图像（3）使用百分比：按背景图像和元素的指定点对齐0%0%表示图像左上角与元素的左上角对齐50%50%表示图像50%50%中心点与元素50%50%的中心点对齐20%30%表示图像20%30%的点与元素20%30%的点对齐100%100%表示图像右下角与元素的右下角对齐，而不是图像充满元素如果只有一个百分数，将作为水平值，垂直值则默认为50%设置背景图像位置二、

背景颜色和背景图像如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用background-attachment属性来设置，其属性值如下：scroll：图像随页面元素一起滚动（默认值）fixed：图像固定在屏幕上，不随页面元素滚动设置背景图像固定二、

背景颜色和背景图像同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：综合设置元素背景二、

背景颜色和背景图像任务

美化新闻列表任务实现1、启动HBuilderX（1）打开HBuilder，默认Web项目HelloHBuilder中将index.html右键重命名为demo4-2.html。修改<title>和<body>中的内容，按下Ctrl+S快

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论