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

前言：好久没更新过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代码如下：

背景示例

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代码如下：

文字样式示例

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 {
	font-size:66px;/*设置字体的尺寸为66px*/
	font-style:oblique;/*字体以斜体显示*/
	font-weight:900; /*字体的粗细为900*/
	}

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

 

CSS链接

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

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

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

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

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

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

 

CSS链接——实例7

HTML代码如下：

链接样式示例
我是超链接，yeah!

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后效果如下：

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

 

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/