10.29

一、页面布局
1.div盒子

盒子模型,定义页面某一块区域范围
<div></div>,块级标签
与table表格布局:整齐,规则,需要行和列组成,布局死板
2.css内部样式

样式设置方式:

1)内联样式,行式样式

写在标签内,通过style来定义样式

<div style="width: 1000px;height: 500px;background: mediumturquoise;">
</div>
2)内部样式

写在<style></style>标签中,<style>标签定义样式

需要样式选择器 选择body中的标签

样式选择器类型:

A.通配符选择器:定义页面中的所有标签

*表示所有标签

*{ 样式属性:属性值.....}

Eg:/*通配符:一般清楚margin和padding的值*/

*{color: #FB00AB;margin: 0;padding: 0; font-family: 宋体;}
B.标签选择器:通过标签来定义所有此标签样式

ul{width: 600px; height: 100px; background-color:snow;}
li{font-family: 微软雅黑;}
C.类选择器:通过class定义类名,通过类名定义样式

<标签 class=”类名”></标签>

.类名{属性:值;}

前缀:.点

Eg:

<li class="c1">类选择器</li>

/*类*/
.c1{color: #086FF9;}

Eg:

<li class="c1">类选择器</li>
<li class="c2">先定义类名,通过类名来定义样式</li>
<li class="c1 c2">类选择器组合使用</li>

/*标签中必须满足有两个类选择器,才有样式效果*/

D.id 选择器;通过id属性定义id名,通过id名定义样式

Id 前缀是#

<标签 id=”名字”>

#id 名字{属性,值}

Id选择器的名字是唯一的,不能重复

 

<li id="d1" class="c1 c2">
/*id*/
#d1{color: #807e05;}
E.分组选择器:同时定义多个选择器

选择器1,选择器2,选择器

#id1,id2,.c1{样式}

.c2,#d1{border: #308003 dashed 1px;}
F.派生选择器:指派标签中,需要定义的标签的样式

父级标签 标签{属性:值}

Div li{属性:值}

div p{
width: 100px;
height: 100px;
border: #0e8020 1px solid;
}
G.伪类选择器:定义样式的效果

样式效果:hover 鼠标悬停 ,focus 点击获取焦点等...

选择器:效果{样式}

比如:hover

#d1:hover{ }--当鼠标悬停到#d1标签上,定义#d1的样式

#d1:hover{
font-size: 50px;
}
3)优先级

样式重复,需要考虑优先级问题

注意:样式重复,优先级:通配符<标签<类<id<内联样式

派生选择器:

父级选择器 子级选择器{样式}

父级选择器 选择器{样式}

#d1 a{
font-size: 30px;
}
/*使用派生选择器,优先级 要注意添加父级选择器,不然没有优先级效果*/
#d1 .ca{
font-size: 50px;
}
<div id="d1">
<a id="da" class="ca" href="javascript:;">超链接</a>
</div>
3.外部样式
写css样式文件中,在html文件中通过link标签引入
创建css文件
通过link引入css
<link href="css02.css" rel="stylesheet" type="text/css">

Href:引入文件的路径

Type:引入文件的类型

Rel:引入文件与文件的关系

Stylesheet:级联样式表

text/css:文本样式类型

3.在css样式文件中通过选择器定义样式

<link href="../image.png" rel="icon">
Icon:关系是标题小图片

二、盒子模型设置距离

1.padding

在标签中,设置内容与标签边框的距离

距离边框的方向:top,bottom,left,right;
Padding-方向:距离;设置距离方向的距离
Padding:值1;内边距距离四个方向是值1的距离
Padding:值1 值2;上下方向是值1,左右方向是值2

Padding:值1 值2 值3;上方向是值1,左右方向是值2,下方向是值3

Padding:值1 值2 值3 值4;四个方向分别对应:上右下左

注意:使用内边距padding,标签范围会变大,注意页面布局
2.margin

外边距的外边距离,本标签与其他标签的距离

可设置边框的方向:top,bottom,left,right;

三、定位

Position:标签的位置属性

属性值:static(默认),relative,absolute,fixed

1.static(默认):默认定位,静态定位;系统自动生成

2.relative;相对定位:相对于标签的原位置的左上角(0,0)进行定位

与定位的方向:top,bottom,left,right 结合使用.

(1)相当于标签原位置的左上角进行定位

(2)保留标签原位置

3.absolute;绝对定位

(1)以页面body标签的左上角来定位

(2)当父标签的position不是static,以父标签进行定位

(3)不保留原位置

4.fixed 固定定位,确定定位

(1)以整个页面整体进行定位

(2)不会随着滚动条滚动发生位置变化,固定在页面上

(3)不保留位置
隐藏,溢出 属性
隐藏:display(不保留位置的隐藏) 和 visibility(保留位置的隐藏)display:none隐藏/block 显现

Visibility:hidden 隐藏/visible 显现
溢出:overflow;标签中的内容超出了标签范围默认是可见
overflow:
Hidden溢出内容隐藏/visibility溢出内容显示/scroll滚动方式查看
层级:z-index

处理标签显示,覆盖优先级

z-index的值越大,层级越高

z-index:正整数

其他常用属性设置
1.边框

Border:颜色 大小 样式;

边框占用 px位置空间

Border:red 1px solid;

Solid:实线

Dashed:虚线
Boder-radius:大小值;设置标签中边框四个角的弧度,圆角

Border-top-left-radius:设置左上角的弧度

Border-bottom-right-radius:设置右下角的弧度

2.轮廓

Outline:颜色 大小 样式;与边框设置是一致

与边框是一致,区别:轮廓不占空间,边框占空间

上一篇:开关电源三种工作方式


下一篇:Ollydbg_x36dbg贴心伴侣 8.88版2021-5-5号发布