当前位置:Gxlcms > html代码 > html+css基础_html/css_WEB-ITnose

html+css基础_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:9人阅读

完整的HTML结构

样式的引用

一。内部编写

(if ues: so use the style just 1 times)!!!

#div_css {}

(or ues: so don't write"class or id =?" )

div.p {}

div p {}

二。外部引用

超链接的样式

a {} // all super links

a:link {} //no linked links

a:visited{} //alredy linked links

a:hover{} //on mose move to the link

a:action{} // 点击时

插入flash文件

插入视频

插入网页块

插入表单

一。文本输入(账号,密码)

账号

密码

二。提交表单

三。单选

xx

xx

四。多选

xx

xx

xx

五。下拉菜单

六。列表(没有下拉)

悬浮文字框

xx

滚动文字

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

表格

//合并横向

//合并竖向

xx
xx xx

文字的一些属性

设置元素内容的文本属性

(1)举例设置文本首行缩进

text-indent:2em;

(2)举例设置文本对齐方式

text-align:left | right | center;

(3)举例设置文本修饰方式

text-decoration:underline;

(4)举例设置字间距

letter-spacing:2em;

(5)举例设置词间距

word-spacing:0.5em;

(6)举例空白显示形式 P56

white-space:pre;

外边距margin:围绕在元素边框之外的可选区域。

内边距padding:文本内容到边框之间的可选区域

元素浮动

浮动:

float

有2个方向: left right none(不浮动)

对于文字浮动,必须设置高度,宽度,如果不设,后后果自负。

清除浮动:

clear:none; //允许元素的两边都可以有浮动

clear:left; //不允许左边有浮动元素

clear:right; //不允许右边有浮动元素

clear:both; //两边都不允许有浮动元素

定位类型position

分类:

static(静止)此为默认,即按照正常的文本流,占用正常的位置。

fixed(固定的) 相对于浏览器窗口定位(保留原位置)

position:absolute;

绝对定位:相对于父级元素(被包含容器)。

position:relative;

相对定位:相对于没有设置position时的正常位置定位

原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV,IMG等等。)

例子:

哈,我是一个帅哥

是不是哦,我晕你

我看看行不行。

运行结果为:哈我是一个帅哥 是不是哦,我晕你

我看看行不行。

解释:“哈我是一个帅哥”用的是absolute 绝对定位,它相对于第一个DIV来定位,因为第一个DIV是它的父级元素,将它包含在里面。所以它出现在顶部起头。(因为没对其设置left 和top等)

“是不是哦,我晕你”也是absolute 绝对定位,它相对于第一个DIV定位,设置了left值为160px,大于上一个div的宽度,所以不会重合。

“我看看行不行”用的是relative 相对定位,它相对与父级元素定位,也就是第一个DIV,它定位的位置从父级元素里面的最开始位置算起,所以,如果不设置top的话就会和第二个div重合。而字体的大小一般为15px‘

指定裁剪区域

position:absolute;

clip:rect(top right bottom left);

top:从上到下裁去top的长度。

left:从左到右裁去left的长度。

right:从左到右裁出right的长度。

bottom:从上到下裁出bottom的长度

将块级元素转化为字符级元素

display:inline;

将字符级元素转化为块级元素

display:block;

处理溢出

position:absolute;(必须为absolute)

overflow:visible; //溢出区域可见

overflow:hidden; //溢出区域不可见

overflow:scroll; //溢出区域出现滚动条

盒模型

有 margin padding border width height

简写时安上右下左顺序来写

如:border-width:1em 2em 2em 2em

注意:上下左右这几个属性:

在设置时如果只出现3个值,则代表上 左右 下

2个值: 上下 左右

1个值:全部 =出现4个一样的值

插入多媒体

 

转载

人气教程排行