HTML+CSS(6)

来源：互联网发布：系统数据接口编辑：程序博客网时间：2024/05/16 00:28

背景的属性:

Background-color:背景颜色例如：background-color：#ff0000;background-color:red;

Background-image:背景图片例如：background-image:url(图片的路径)

Background-repeat:背景图片是否平铺

取值：no-repeat 不平铺 repeat-x 横向平铺 repeat-y 纵向平铺 repeat横向和纵向都平铺（默认）

Background-attachment:背景附件，背景是否随着上方的内容一起滚动

取值：fixed 背景固定 scroll 滚动

例如：background-attachment:fixed;

Background-position:背景图片的展开方式例如：background-position:水平垂直;

英文：水平 left center right 垂直 top center bottom

数值：正值负值

例如 background-position:left top;

例如:background-positon:0 0; background-position:10px 20px;

可以简写：Background:背景颜色背景图片背景图片是否平铺（附件通常仅用body标签）水平垂直；

注意：只有水平和垂直不能颠倒，其他的属性值可以顺序颠倒

如：<!—设置主体标签，背景图片，纵向平铺水平居中垂直距离顶端20px-->

列表：

去掉列表前面的项目符号：list-style-type:none; 可以简写为 list-style:none;

用小图代替列表前面的符号：list-style-image:url(图片的地址)

边框（html标签就可以加边框线）：

之前rules=”all” 表格<table>的属性合并表格的边框线。

Css样式如何实现：合并表格的边框线框：Border-collapse:collapse;

上边框：

1.Border-top-color:颜色值;上边框的颜色

2.Border-top-style:线型;线型有 solid 实线 dashed 虚线 dotted 点状线

3.Border-top-width:粗细；例如border-top-width:2px;

简写为：Border-top:粗细线型颜色;

下、左、右边框以此类推。

内填充（内边距）padding：

盒子模型

内容区：width 和height

边框 border

内容和边框之间的距离

1.Padding-top：数值；内容和上边框之间的距离

2.Padding-right：数值；内容和右边框之间的距离

3.Padding-bottom：数值；内容和下边框之间的距离

4.Padding-left：数值；内容和左边框之间的距离

简写形式：

Padding:10px 20px 30px 40px; 上边框距离10px 右 20px 下边框 30px 左 40px

Padding:10px 20px 30px; 上10px 左右 20px 下 30px

Padding:10px 30px; 上下10px 左右 30px

Padding:10px; 上右下左都是10px

外填充（外边距）margin：

简写为：

Margin:10px 20px 30px 40px; 上边框以外的10px 右是20px 下30px 左40px

Margin:10px 20px 30px; 上边框以外的10px 左右是20px 下是30px

Margin:10px 20px; 上下为10px 左右为20px

Margin:10px; 上右下左都是10px

网站布局的一个思想：

网站的结构就是两部分（横向和纵向）：

如果是纵向排列的，就是正常的文档流，设置内容器的宽度和高度，设置内容和边框之间的距离 padding ,边框往外的部分margin border调这些属性就可以。

如果是横向排列，我们就要使用浮动。

浮动：

float：left；

float：right;

浮动的特点：

设置浮动的元素，不占空间。

设置浮动的元素层级高于普通元素。

设置浮动之后，无论之前是否是块元素，设置浮动之后一定是块元素 。

如果在一行中的元素想横向排列，都设置浮动就可以。

通常情况下div里面还有div （外面的div父盒子，）盒子里面还有盒子。

如何让盒子在页面水平居中：

Margin: xx auto;

1.例如：margin: 0 auto;

2.Margin-left:auto; margin-right:auto;

vertical-align 属性：

设置元素的垂直对齐方式。

如：

<html><head><style type="text/css">img.top {vertical-align:text-top}img.bottom {vertical-align:text-bottom}</style></head><body><p>这是一幅<img class="top" border="0" src="../i/eg_cute.gif" />位于段落中的图像。</p> <p>这是一幅<img class="bottom" border="0" src="../i/eg_cute.gif" />位于段落中的图像。</p></body></html>

效果如下：

0 0