前言：好久没更新过CSDN博客了，现在从原来的OI，变成了一个科研工作者。最近打算把原来的一些资料整理一下，作为经验公开分享，希望能帮到更多默默努力耕耘的人~

网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿，有关HTML+CSS框架的编程，比较基础。当时为了给入门的同学更多感性认识，提供了很多小实例，这里也都给出来了。

DIV+CSS布局

CSS样式

CSS背景

CSS背景——实例5

CSS文本

CSS文本——实例6

CSS字体

CSS链接

CSS链接——实例7

CSS列表

CSS列表——实例8

DIV+CSS布局

CSS样式

CSS样式就是设计整个页面布局的核心部分。通过设置不同的样式值可以改变显示内容的外观。常用的CSS样式有：

CSS 背景

CSS 文本

CSS 字体

CSS 链接

CSS 列表

CSS 定位

接下来将分别介绍

CSS背景

如下表所示：

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。(该标签下的选项可自行百度)
background-image	设置背景图片
background-color	设置背景颜色
background-position	设置图像的起始位置
background-repeat	设置图像是否及怎么重复

CSS背景——实例5

HTML代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="simple5.css" />
</head>
<body>
<h1 align="center">背景示例</h1>
</body>
</html>

CSS代码如下：

body{
background-color:yellow;
}

打开HTML后效果如下：

我们在此基础上稍微改变一点：将下方的这个图保存下来（或者任意找一张也行），文件名为“1.png”：

将之前的CSS代码段修改为：

body{
background-image:url('1.png');/*把当前文件夹下的1.png作为背景图片*/
background-repeat:repeat-x;/*x轴方向上图片重复*/
background-attachment:fixed;/*背景图像固定*/
}

打开HTML后效果变为（原因参见代码中的注释，有兴趣可以自行修改、删除试试效果，有助于增强认识）：

CSS文本

如下表所示：

属性	描述
color	设置文本颜色
direction	设置文本方向
line-height	设置行高
letter-spacing	设置字符间距
text-align	对齐方式
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-trasform	控制元素中的字母
white-spacing	设置元素中空白的处理方式
word-spacing	设置字间距

CSS文本——实例6

HTML代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="simple6.css" />
</head>
<body>
<div id="one">文字样式示例</h1>
</body>
</html>

CSS代码段如下：

#one{
color:red;/*设置字体颜色为红*/
line-height:45px;/*设置行高为45px*/
text-align:center;/*水平居中*/
letter-spacing:20px;/*设置字符间距为20px*/
}

打开HTML后效果如下，可参见CSS代码段中的注释以便于了解效果：

CSS字体

如下表：

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。（具体的字体种类可以自行上网搜索）
font-size	设置字体的尺寸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

在CSS中设置<p>标签中的字体样式示例，在注释中提到了效果：

p {font-size:66px;/*设置字体的尺寸为66px*/font-style:oblique;/*字体以斜体显示*/font-weight:900; /*字体的粗细为900*/}

这里与之前的类似，就不设实例了，有兴趣的可以自行尝试

CSS链接

在网页中一个超链接有四种状态，分别是未被访问，已经访问，鼠标指针位于链接上方，链接被点击的时刻。

CSS中用下面的语段分别代表这四种状态：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

CSS链接——实例7

HTML代码如下：

<html>
<head>
<link rel="stylesheet" type="text/css" href="simple7.css" />
</head>
<body>
<h1 align="center">链接样式示例</h1>
<a href="*">我是超链接，yeah!</a>
</body>
</html>

CSS代码段如下：

/*设置链接未被访问和被访问后的样式*/
a:link,a:visited{
display:block;/*将该标签以块级元素显示*/
text-decoration:none;/*取消超链接的下划线*/
color:blue;/*设置字体颜色为蓝色*/
}
/*设置链接被激活和指针在其上方时的样式*/
a:hover,a:active{
text-decoration:none;/*取消超链接的下划线*/
background-color:red;/*设置标签的背景颜色*/
}

打开HTML后效果如下，可参见CSS代码段中的注释以便于了解效果：

这个是link和visited的效果：

这个是hover和active的效果：

CSS列表

如下表：

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

CSS列表——实例8

HTML代码如下：

<html>
<body>
<ul style="list-style:square;"><!--创建一个列表-->
<!--列表中的项目-->
<li>咖啡</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>

打开HTML后效果如下：

PS：在一般的页面中列表往往会和超链接一起使用，可以利用列表的块级元素的性质对<a>作很多样式设计，如导航栏。

CSS定位又将牵涉到《网页设计（二）——DIV+CSS布局1》中提到的盒子模型，比较重要，将放在下一篇文章中介绍。

附网页设计系列的文章链接：

网页设计（一）——HTML基础概念：https://blog.csdn.net/csyzcyj/article/details/107283767

网页设计（二）——DIV+CSS布局1：https://blog.csdn.net/csyzcyj/article/details/107284087

网页设计（三）——DIV+CSS布局2：https://blog.csdn.net/csyzcyj/article/details/107284655

网页设计（四）——DIV+CSS布局3：https://blog.csdn.net/csyzcyj/article/details/107285198

网页设计（五）——marquee标签：https://blog.csdn.net/csyzcyj/article/details/107285901

网页设计（六）——基于HTML+CSS框架的网页设计实例：https://blog.csdn.net/csyzcyj/article/details/107286067

转载注明出处：https://blog.csdn.net/csyzcyj/

网页设计（三）——DIV+CSS布局2相关推荐

Photoshop图象切片保存为网页HTML（DIV+CSS布局）的方法
Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法首先,制作图象切片(以一张图片为例子) 一.选择"切片"工具,在图像上拖动以分割图像(例如:一张图像切割2 ...
div+css动漫网页制作,dw个人网页设计,静态html+css网页设计
简单个人网页制作大学生网页设计作业静态HTML个人博客主页 DW个人网站模板下载大学生简单个人网页作品代码一.作品介绍 1.作品简介 :学生个人网页制作,dw网页设计,静态div+css网页设 ...
HTML5+CSS期末大作业：环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码
HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码常见网页设计 ...
网页设计（四）——DIV+CSS布局3
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML+CSS大作业web网页设计实例作业 ——中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码
web网页设计实例作业 --中国民间年画 (5页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
HTML+CSS+JS计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍文章目录 HTML5期末大作业:苏苏网站设计--仿苏苏超市(1页) 大学生简单个人 ...
div+css静态网页设计`生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) 大学生简单个人静态HTML网页设计作品 DIV布局文章目录 HTML5期末大作业:生活服务网站设计--生活服务同城商城(33页) ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
HTML+CSS静态页面网页设计作业——布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:布偶猫网站设计--布偶猫(7页)带留言板大学生简单个人静态HTML网页设计作品 DIV布局动物网页模板代码 DW学生个人网站制作成品下载常见网页设计作业题材有个人. 美食. ...

网页设计（三）——DIV+CSS布局2

DIV+CSS布局

CSS样式

CSS背景

CSS背景——实例5

CSS文本

CSS文本——实例6

CSS字体

CSS链接

CSS链接——实例7

CSS列表

CSS列表——实例8

网页设计（三）——DIV+CSS布局2相关推荐

最新文章

热门文章