6项目六 应用CSS3样式美化网页_第1页
6项目六 应用CSS3样式美化网页_第2页
6项目六 应用CSS3样式美化网页_第3页
6项目六 应用CSS3样式美化网页_第4页
6项目六 应用CSS3样式美化网页_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

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

文档简介

HTML5+CSS3网页设计与布局项目六应用CSS3样式美化网页6.1CSS美化网页6.2CSS美化网页案例6.1CSS美化网页6.1.1美化网页文字6.1.2美化网页图片6.1.3美化网页背景6.1.4美化网页边框6.1.5美化网页表格6.1.8美化网页菜单6.1.7美化网页导航6.1.6美化网页表单6.1.1美化网页文字

如何实现这段文字中的重点信息加强，这就需要使用<span>标签进行样式美化。

使用<span>标签将需要凸现的词汇标记，通过CSS样式美化<span>标签标记的内容。

美化前页面代码： <body>

<p>春天来了，天气转暖,</p>

<p>心情也随之变得明媚起来。</p>

<p>很早就想换上春装,用春天明媚的</p>

<p>色彩装点自己。</p> </body>6.1.1美化网页文字

增加以下css代码： p{font-size:14px;} p.weather,.ownspan{font-size:36px;font-weight:bold;color:blue;} p#mood{font-size:24px;font-weight:bold;color:red;} p.spring{font-style:italic;color:green;font-size:28px;font-weight:bold;}6.1.2美化网页图片

图像是美化网页必不可少的元素，适用于网页的图像格式主要有JPEG、GIF和PNG。图像能比文本更直观地表达信息，在网页中通常起到画龙点睛的作用，它能表达网页的形象和风格，恰到好处地使用图像能使网页更加生动和美观。

给一个有图片的html页面增加css美化代码： img{width:100px;border:3pxsolidred;} .fillet{border-radius:20px;} .oval{border-radius:50%;} .thumb{border:1pxsolid#ddd;border-radius:4px;padding:5px;} .filter{filter:brightness(50%);}6.1.3美化网页背景

有时为了区别网页上的一些元素或者为了使某些元素更加醒目，我们会添加一些背景来更好地呈现页面想要展示的内容。

background-color属性用来给文本设置背景颜色，为了页面的美观、合理，可以选用不同的颜色。给页面增加css来美化网页背景代码：

h3{background-color:cornflowerblue;}

.imgs{background-image:url(img/fq.jpg);width:100px;padding:20px;background-repeat:repeat;}6.1.4美化网页边框

在网页中如果要想改表格、表单、图片等内容的边框，可以使用border-style属性定义了边框的样式。

给一个类增加一个边框的代码：

.first{border-style:dasheddoublesoliddotted;border-width:5px;border-color:blueredgoldcyan;}6.1.5美化网页表格

之前学表格的时候有学过用表格属性来美化表格，而css也可以用来美化表格。

css美化表格代码： table{border-collapse:collapse;width:100%;}

table,th,td{border:1pxsolidblue;}

th{height:30px;background-color:powderblue;color:brown;}

td{text-align:center;padding:20px;}6.1.6美化网页表单

表单做得是不是漂亮，是大家喜欢上一个网站的第一步，所以，对于表单的美化就显得尤为重要。

css美化表单代码： .myinput{border:2pxsolid;border-color:#D4BFFF;color:#2A00FF;}6.1.7美化网页导航

导航栏是现行主流网站都必须具备的，通过导航栏，我们可以非常直观地了解到该网站所要表达的主要内容，对于网站的每个部分大家可以一目了然。能够有一个漂亮的导航条对于每个网站都是非常重要的。

css美化网页导航代码： ul{list-style-type:none;margin:0;padding:0;}

li{float:left;}

a:link,a:visited{display:block;width:100px;background-color:#FF7B00;color:white;text-decoration:none;font-weight:bold;}

a:hover,a:active{background-color:cornflowerblue;}6.1.2美化网页菜单

导航通常都会有下拉菜单，下拉菜单是对导航的一种补充，更加丰富和增添了导航的内容。

css美化网页菜单代码：

ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:gray;} li{float:left;}

lia,.dropbtn{display:inline-block;color:white;text-align:center;padding:14px16px;text-decoration:none;} lia:hover,.dropdown:hover.dropbtn{background-color:green;}

.dropdown{display:inline-block;} .dropdown-content{display:none;position:absolute;background-color:darkgray;min-width:125px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);}

.dropdown-contenta{color:white;padding:12px16px;text-decoration:none;

display:block;}

.dropdown-contenta:hover{background-color:

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

温馨提示

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

最新文档

评论

0/150

提交评论