梦幻西游 1

梦幻西游:CSS基础教程,CSS基本样式

上边是CSS常用基本样式和质量。

box1{

 width:200px;
 height:200px
 position:relative;

}

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=gb2312″>
<title>鼠标悬停时展现图片边框和文字勾勒叙述的图样特效</title>
<style type=”text/css”>
body{margin: 0;padding: 0;font: normal 10px Verdana, Arial, Helvetica,
sans-serif;line-height: 1.8em;background: #1d1d1d url(bg.jpg)
repeat;}
a{color:#999;}
h1{font-family:Georgia, “Times New Roman”, Times, serif;text-align:
center;font-weight: normal;font-size: 4em;line-height: 1.2em;margin: 0;
padding: 20px 0;color:#999;font-size:18px;}
img{border: none;}
ul.gnineh{width: 960px;list-style: none;margin: 0 auto; padding: 0;}
ul.gnineh li{width: 220px;float: left; display: inline;margin: 10px;
padding: 0;position: relative;}
ul.gnineh li:hover{z-index: 99;}
ul.gnineh li img{position: relative;filter: alpha(opacity=30);opacity:
0.3;-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=30)”;}
ul.gnineh li:hover img{z-index: 999;filter: alpha(opacity=100);opacity:
1;-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=100)”;}
梦幻西游:CSS基础教程,CSS基本样式。ul.gnineh li .info{position: absolute;left: -10px; top: -10px;padding:
210px 10px 20px;width: 220px;display: none;background: #fff;font-size:
1.2em;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius:
3px;}
ul.gnineh li:hover .info{display: block;}
ul.gnineh li h2{font-size: 1.2em;font-weight: normal;text-transform:
uppercase;margin: 0; padding: 10px 0;}
ul.gnineh li p{padding: 0; margin: 0; font-size: 0.9em;}
body{font-size:12px;font-family:’Arial’;line-height:25px;}
#header{background:#000;height:30px;line-height:30px;margin-bottom:20px;}
#header h2{float:left;margin:0px 10px;}
#header h2 a{color:#梦幻西游:CSS基础教程,CSS基本样式。fff;}
#main{width:950px;margin:0px auto}
.code{border:#ccc 1px solid;background:#梦幻西游:CSS基础教程,CSS基本样式。ffffcc;padding:10px;}
</style>
</head>
<body>
<div><A
href=”;</A></div>
<h1>纯CSS完毕的鼠标触及展现边框和描绘叙述的图纸特效</h1>
<ul class=”gnineh”>
<li><a href=”/”><img src=”wall_s3.jpg”
alt=””></a><div
class=”info”><h2>美丽荃银高科</h2><p>新车上市堪比波音。

#box1{
width:350px;
height:350px;
background: #f00;
border: 10px solid #000;
font-size: 16px;
color: yellow;
font-weight: bold;
font-family: “宋体”;
line-height:32px;
font-style: italic;
text-indent:
2em;/*首行缩进:1em=3个文字大小*/

text-align: left;/*对齐格局*/
text-decoration:
underline;/*文字修饰:through-line(删除线)、overline(上划拉)、underline(下划线)、none*/

word-spacing: 6px;/*梦幻西游:CSS基础教程,CSS基本样式。词间距*梦幻西游:CSS基础教程,CSS基本样式。/

letter-spacing:5px;/*字母间距(字间距)

*/
}

box2{

 position:absolute;
 top:20px;
 left:30px

}

## 三、CSS代码缩写
缩写可以减少占用的带宽
1、盒模型代码缩写
>三种缩写方法:
(1)如果top、right、bottom、left的值相同
`margin:10px;`
(2)如果top和bottom的值相同,left和right的值相同
`margin:10px 20px`
(3)如果left和right的值相同
`margin:10px 20px 30px`

2、颜色值缩写
当设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
如:
`p{color:#000000;}`可缩写为`p{color:#000;}`
再如:
`p{color:#336699;}`可缩写为:`p{color:#369;}`

3、字体缩写
(1)缩写时至少要指定font-size和font-family的属性,其他属性(如weight、style、variant、height)未指定则自动使用默认值。
(2)font-size和line-height之间要加/
>比如:

body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:”宋体”,sans-serif;
}

可缩写为:

body{
font:italic small-caps bold 12px/1.5em “宋体”,san-serif;
}

## 四、单位和值
1、颜色值
>1)英文命令颜色:
`p{color:red;}`
2)RGB颜色:
`p{color:rgb(133,45,200);}`或者`p{color:rgb(20%,33%,25%);}`
3)十六进制颜色:
`p{color:#00ffff;}`

2、长度值
(1)像素
像素指的是显示器上的笑点(CSS规范中假设90px=1英寸)
(2)em
如果font-size为14px,则1em=14px,如果font-size为18px,则1em=18px
(3)百分比
`p{font-size:12px;line-height:130%}`
表示:设置行高为字体的130%(12*1.3=15.6px)

## 五、CSS样式设置小技巧
1、水平居中设置-行内元素
当被设置元素为文本、图片时,通过给父元素设置`text-align:center`实现
>举例:

html代码:
<body>
<div class=”txtCenter”>笔者要居中</div>
</body>
CSS代码:
<style>
.txtCenter{
text-align:center;
}
</style>

2、水平居中设置-定宽块状元素
块状元素分为定宽和不定宽
定宽元素:设置左右margin值为auto
>如:

div{
wedth:200px;
margin:20px auto;
}

3、水平居中总结-不定宽块状元素方法
不定宽块状元素:块状元素的宽度不固定
>不定宽块状元素有三种方法居中:
(1)加入table标签
(2)设置display:inline方法
(3)设置position:relative和left:50%方法

(1)加入table标签
第一步:为需要居中的元素加入一个table标签(包括`<tbody> <tr> <td>`)
第二步:设置左右margin居中
>如

table{
border:1px solid;
margin:0 auto;
}

(2)设置display:inline方法
改变块元素dispaly为inline(行内元素),再用text-align:center
>比如:

<body>
<div class=”haha”>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</body>

<style>
.haha{
text-align:center;
}
.haha ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.haha li{
margin-right:8px;
display:inline;
}
</style>

1、2两种方法对比:
2的优势是不用增加无语义标签,但由于类型变成行内元素,也无法设定长度值了。

(3)设置position:relative和left:50%方法
方法:给父元素设置float,position:relative和left:50%,子元素设置position:relative和left:-50%
>如:

<div class=”haha”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

.haha{
float:left;
position:relative;
left:50%
}
.haha ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.haha li{float:left;display:inline;margin-right:8px;}

像这样就可以让元素居中了。

3、垂直居中
垂直居中的两种情况:父元素高度确定的单行文本、父元素高度确定的多行文本。
(1)单行文本
设置父元素的height和line-height使其高度一致。
>如:

<div class=”haha”>
<h1>CHINA</h1>
</div>

.haha{
height: 100px;
line-height: 100px;
background: #999;;
}

这样,CHINA就是垂直居中的。

(2)多行文本
父元素高度确定的多行文本、图片等竖直居中方法有两种。
方法一:插入table标签(包括tbody、tr、td),同时设置vertical-align:middle(垂直居中的属性)
>如:

<table>
<tbody>
<tr>
<td class=”haha”>
CHINA
</td>
</tr>
</tbody>
</table>

table td{
height: 500px;
background: #ccc;
vertical-align:middle
}

此时效果图:

![垂直方法一效果图.png](http://upload-images.jianshu.io/upload_images/3194437-dad0cd97cc2ac3b2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

方法二:此方法兼容性较差,IE6、IE7不支持此方法。
设置块级元素display为table-cell(表格单元显示)、vertical-align:middle
此方法优点:不用添加多余无意义标签
缺点:兼容性不好、破坏了原有块状元素性质
>如:

<div class=”haha”>
<p>11111</p>
<p>22222</p>
</div>

.haha{
height: 300px;
background: gold;
display:table-cell;
vertical-align: middle;
}

此时效果图:

![垂直方法二效果图.png](http://upload-images.jianshu.io/upload_images/3194437-3f108e2ba8ea2718.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4、隐性改变display类型
当html代码出现以下两句之一时,元素display显示类型就会自动变为块状元素display:inline-block,此时可以设置width和height

1)position:absolute
2)float:left或float:right“`

</p></div></li>
<li><a href=”/”><img src=”wall_s4.jpg”
alt=””></a><div
class=”info”><h2>小编的黄狗</h2><p>万分迷人的猩猩</p></div></li>
<li><a href=”/”><img src=”wall_s5.jpg”
alt=””></a><div
class=”info”><h2>穿过市区</h2><p>是野外的清凉</p></div></li>
<li><a href=”/”><img src=”wall_s6.jpg”
alt=””></a><div
class=”info”><h2>梦中情人</h2><p>回首一眸万物俱焚</p></div></li>
</ul>
</body>
</html>

牢记:浏览器有暗许margin和padding。样式最初叶记得一定写:*{margin:0;padding:0}。

一、CSS盒模型

① 、成分分类:html标签中成分分为块状成分、内联成分(行内元素)和内联块探花素。

常用块状成分:
<div> <p> <h1> <ol> <ul> <table> <address> <blockquote> <form> <dl>
常用内联成分:
<a> <br> <i> <em> <strong> <label> <q> <var> <cite> <code>
常用内联块状成分:
<img> <input>

(1)块状成分

将成分显示/转换为块状成分:
a{display:block;}
块状成分特点:
a)各种块状成分和现在的因素都要独占一行
b)成分的高度、宽度、行高和底部距都可设置
c)成分宽度不设置时,暗中同意是它自个儿父成分的大幅度

(2)内联成分

将成分突显/转换为内联成分:

div{
display:inline;
}```
内联元素特点:
a)和其余元素在一行上
b)元素的高度、宽度、顶部和底边距不可设置
c)元素宽度(它包含的文字或图片宽度)不可改变


(3)内联块状元素(inline-block)
同时具备内联元素和块状元素的特点
>`display:inline-block`
特点:
a)和其他元素在一行上
b)元素高度、宽度、行高、顶和底边距可设置

2、盒模型

![盒模型.png](http://upload-images.jianshu.io/upload_images/3194437-962a89858ecc088b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
>以月饼举例:
月饼盒为一个页面元素比如<div>
五仁月饼为盒模型里的内容(可以是文字、图片或标签元素)
4个padding为内填充
盒子的边框为border
盒模型与盒模型的间距为margin

(1)盒模型边框
边框可以被设置粗细、样式、颜色
>如:

div{
border:2px solid red;
}

边框的样式常见的有:
dashed(虚线)、solid(实线)、dotted(点线)

>也可以只为下边框设置样式:
`div{border-bottom:1px solid red;}`

(2)盒模型宽度和高度
盒模型实际宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
>举个例子:

div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}

元素实际宽度为:10+1+20+200+20+1+10=262

(3)盒模型填充
元素内容与边框之间的距离是填充,写代码时有方向:顺时针上、右、下、左
`div{padding:20px 10px 15px 30px;}`
如果四个方向填充都为10px,可写:
`div{padding:10px;}`
如果上下填充为10px,左右填充为20px,可写:
`div{padding:10px  20px;}`

(4)盒模型边界
边界margin是元素与其他元素之间的距离,顺序也是上、右、下、左
>padding与margin的区别:
padding在边框里
margin在边框外

## 二、CSS布局模型
>CSS有三种布局模型:
(1)流动模型(Flow)
(2)浮动模型(Float)
(3)层模型(Layer)

(1)流动模型(Flow)
流动模型是默认的网页布局模式。
有2个典型特征:
1)块状元素在所处的包含元素内自上而下按顺序垂直延伸分布,默认块状元素的宽度为100%,以行的形式占据位置
2)内联元素会在所处包含元素内从左到右水平分布显示(不会霸占一行)

(2)浮动模型(Float)
元素在默认情况下是不能浮动的,可以使用CSS定义为浮动
>如:定义为左浮动

div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}

(3)层模型(Layer)
可以让网页元素在网页中精确定位,像PS中的图层一样。
>层模型的三种形式:
1)绝对定位(position:absolute)
2)相对定位(position:relative)
3)固定定位(position:fixed)

1)绝对定位
将元素从文档流中拖出来,用left/top/right/bottom属性相对于其最接近的一个具有定位属性的父包含快进行绝对定位,如果不存在这样的包含块,就相对于body元素(浏览器窗口)。
>如:

div{
position:absolute;
left:100px;
top:50px
}

表示div元素相对于浏览器窗口向右移动100px,向下移动50px

2)相对定位
相对定位的过程是首先按static(float)方式生成一个元素,然后相对于以前的位置移动,移动的方向和幅度由上下左右四个属性确定,偏移前的位置保留不动。

3)固定定位
固定定位的相对移动坐标是视图(网页窗口),不会随着浏览器窗口的滚动条变化而变化,除非移动浏览器窗口的位置或者改变浏览器窗口的大小。固定定位不会受文档流动影响。

4)relative与absolute组合使用
用于不想对于浏览器定位,相对于其他元素的定位
>第一步:
参照定位的元素必须是相对定位元素的前辈元素
第二步:
参照定位的元素(前辈元素)加入position:relative
第三步:
定位元素加入position:absolute
如box1是box2的父辈元素

梦幻西游 1

运营结果:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>和讯情报小实例</title>
<style>
*{
margin:0;
padding:0;
}
#box{
width:300px;
height:419px;
background: url(bg.png) 0 0 no-repeat;
margin: 0 auto;
}
li{
font-family: “宋体”;
font-size: 12px;
line-height: 24px;
list-style: none;
padding-left:52px;
vertical-align: middle;