CSS笔记整理4 -- 例子综合

• 将整个网站公用的css样式卸载外部样式中。
• 在页面中，写当前页面样式。

CSS例子

css例子1–背景透明、手型光标

• margin设置为none时，无边界；
• background-color设置为transparent时，背景颜色为透明；
• cursor设置为pointer时，当光标移动到当前标记的时候变成“手”的形状；

css例题2–细线表格、内容居中

在表格中的属性border、bordercolor 等表现，出于规范化将用css来书写。

• 在table中将margin-left 和margin-right同时设置为auto，边界的左自动右自动即居中（仅对块显示标记）；
• 在td中text-align设置为center时，将td中的内容居中；
• border-collapse设置为collapse（塌陷）时，将表格设置为细线；

css例题3–背景平铺

• background-image:url('背景图片地址')：设置背景图片，默认为平铺（重复出现）；
• background-repeat设置为no-repeat时，设置背景图不平铺；设置为repeat-y时，设置背景图沿y轴平铺；
• padding-left设置为110px时，将盒子内的左边填充110像素即空出110像素。
• font-size设置文字大小为14px固定文字大小为14像素。

css例题4–背景满屏设置

• body设置背景色或背景图是满屏设置的，不管其内容有多小或多大。

css例题5–伪对象的使用

实现鼠标移上时给表格增加边框。

方法：

1. 伪对象:hover和:before搭配使用
2. content:'';设置默认为空
3. display属性规定元素应该生成的框的类型为块级元素block
4. 设置width和height均为100%的同时，box-asizing取值为border-box保证产生的边框是原盒子的大小
5. border设置边框
   颜色百分比rgba(红色值,绿色值,蓝色值,透明度百分比 其最大值为1即不透明)
solid实线
   以及它的宽度；

参考代码如下：

css例题5–内容超出后显示省略号

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

参考链接：CSS设置内容超出后显示省略号

圆角矩形的实现

传统方法

做一个圆角的图片，切片（上中下），最后用table（三行一列）拼版，设置为background。

CSS方法

运用border-radius
代码：

div:nth-of-type(1){
	border-radius:10px;
}

• 表示应用在第1个div，圆的半径是10px

border-radius后的参数规则与margin类似。

兼容性如下：

应用：设置圆形头像border-radius:50%;

ul无序列表在CSS中的应用

导航栏

导航栏书写一般用无序列表，即ul和li标签的组合。

• 准备工作：设置全部边界为0；
  

• 在daohang（ul的ID）中设置，list-style-type设置为none时，去除ul前面的圆点。

• 设置daohang中的内容居中：margin-left，margin-right 为 auto

• 设置daohang下的li的float属性为left

• 设置daohang中overflow:hidden;闭合浮动，撑开ul盒子
  注意：
  当子元素li设置浮动为左浮动时，会导致父元素高度坍塌，注意在父元素中补充overflow:hidden;闭合浮动。

• daohang下的li设置边框，注意将li的宽度减少相应值

• daohang下的li下的a超链接去除下划线：text-decoration:none;

• 设置li中的行间距line-height撑开盒子高度

• 设置li中的文字水平居中：text-aligh:center;

• 设置li中的文字设置行高：vertical-align:middle;，是为了将文字垂直居中

• li中的图片默认是基线对齐，所以图片下面会出现空隙。
  解决：在li样式中设置样式底对齐vertical-aligh:bottom;，去掉空隙。

• 设置a:hover当鼠标移上去时的动作，背景颜色background-color发生改变，确定一个颜色；再 给a超链接设置宽度，将更改超链接整块

图片拼版

• 将图片一个个放进同一个ul中的li中，设置图片相同高度
• 设置ul左浮动float:left;
• 将ul设置overflow:hidden;
  … …

在项目中拼版用div+CSS+table的方式拼版，如果拼的是展示性页面，用div+css；如果显示的是数据，用table；后台一般用table。

CSS Sprites技术

CSS Sprites技术利用背景的定位来实现，将很多小图拼接成一张大图，然后通过css定位来实现不通的盒子来使用不同的背景。

优点：利用CSS Sprites技术能很好地减少网页的http请求从而大大提高页面的性能。