css案例(css效果网站)

1、页面使用CSS的好处：

有效地传达的页面信息。

使用经CSS美化的页面文本，使页面美观、美观，吸引用户。

经常强调页面主题的内容，以便用户首先看到页面的主要内容。

卓越的用户体验。

2、美化网页基本风格

A:字体样式：

font-family字体类型font-family: '隶书'；

字体大小设置字体大小font-size:12px；

设置字体样式font-style:italic；

字体粗细设置字体粗细字体： bold；

字体声明中包含所有字体属性font:italic bold 36px '宋体'；

示例：

body{font-family: Times，' Times New Roman '，'楷体'； }

h1{font-size:24px； }单位-px :像素

h2{font-style:oblique； }

p{font-weight:bold； }

p span{font:oblique bold 12px '楷体'； }

B:文本属性：

颜色设定文本颜色color:#00C；

文本对齐元素的水平对齐方法；文本对齐：对齐；

text-indent:20px，用于设置文本缩进的第一行文本；

行高设置文本行高行高：25 px；

文本修饰设置文本装饰文本修饰： underline；

C:排版文本段落：

水平对齐方式：文本对齐：左对齐；

左对齐文本向左排列。默认值：由浏览器确定

right将文本向右排列

center将文本居中

justify提供两端对齐的文本效果

起始缩进：文本缩进： em或px

行高： line-height:px

文本修饰： text-decoration : none

值的说明

none默认值，定义的标准文本

underline设置文本下划线

大纲设置文本的上划线

line-through设置文本删除线

垂直对齐方式：垂直对齐属性： middle、top、bottom

文本阴影：文本阴影： colorx-offsety-offset blur-radius；

D:背景色和背景图像：

背景色： ' red '；

背景图像： URL；

背景重复：

沿着水平方向和垂直方向这两个方向并排

no-repeat :不排列瓷砖，只显示一次

repeat-x :仅在水平方向上并排

repeat-y :仅在垂直方向上平行排列

背景定位： x，y方向关键字水平关键字：左、中心、右

垂直关键字： top、center和bottom

示例：

. title {

font-size:18px；

字体权重： bold；

color:#FFF；

文本索引：1 em；

line-height:35px；

ack ground : # c 00 URL (./image/arrow-down.gif ) 205px 10px no-repeat；

}

线性渐变：线性渐变(位置、颜色1、颜色2、…)

3、例：

头部

title家电产品/title

/head

link rel=' style sheet ' href=' jiayongdianqi.CSS '

实体

div class='container '

h2家电产品/h2

div class='type '

h6a href='# '大家的电/a/h6

li a

rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">平板电视</a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">洗衣机</a> <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">冰箱</a></li>

</ul>

<ul>

</ul>

<ul>

</ul>

<ul>

</ul>

</div>

</body>

</html>

li{

/* 去圆点 */

list-style: none;

}

/* 分类页面总宽度 */

.container{

width: 500px;

}

/* 去超链接下划线 */

text-decoration: none;

}

/* 大标题字体 */

.container>h2{

font-size: 18px;

color: white;

font-weight: bolder;

line-height: 50px;

text-indent: 2px;

/*从上到下，0%开始颜色。50%颜色。70%颜色 */

background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);

}

css代码：

/* 所有电器分类内容 */

.type{

/* 首行缩进 */

text-indent: 4.5em;

/* 左外边距40px */

margin-left: 40px;

}

/* 电器分类 */

.type>h6{

font-size: 14px;

font-weight: bolder;

line-height: 30px;

background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);

}

/* 电器分类中的A标签 */

.type>h6>a{

color:#0467ac;

}

/* 电器分类中的A标签鼠标悬浮效果 */

.type>h6>a:hover{

text-decoration: underline;

}

/* 分类内容字体 */

.type>ul>li{

font-size: 12px;

line-height: 26px;

}

/* 分类内容字体里面的A标签 */

.type>ul>li>a{

color: #969696;

}

/* 分类内容字体里面的A标签悬浮效果 */

.type>ul>li>a:hover{

color: #804000;

text-decoration: underline;

}

4、效果图链接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html