HTML-day02笔记

• 页面布局

1. div 盒子

       盒子模型，定义页面布局的一块区域范围

       <div></div>

写table表格布局：整齐，需要行列组成，布局死板

 

1. Css

    样式设置方式

1. .内联样式，行内样式 写在标签内，通过style属性定义样式
2. 内部样式:写在<style></style>.<style>定义样式

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

样式选择器的类型：

1. 通配符选择器：定义页面中所有的标签     * 表示 *{样式属性：属性值}
2. 元素（标签）选择器：通过标签来定义样式： span{属性:值}
3. 类选择器：通过class定义类名，在通过类名定义样式

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

        .类名{属性：值；.c1{color:yellow;}

        /*标签必须满足有两个类选择器，才有效果

.c1.c2{font-weight: bold;color:#fff;}

 

前缀是  .

 

1. id选择器：通过id属性定义id名，通过id名定义样式

Id的前缀是#

<标签 ids=”名字”></标签>

        #id名字{属性：值；}

Id名字唯一

1. 分组选择器：同时定义多个选择器

    选择器1，选择器2，选择器3{属性：值；}

#id1,#id2,.c1{样式}

 

1. 派生选择器：指派标签中，需要定义的标签的样式。

 

Div li{属性：值;}

 

1. 伪类选择器：定义样式的效果；

样式常用：hover 鼠标悬停，focus 点击获取焦点等;

选择器：效果（样式）

比如：hover

#d1:hover{}--当鼠标停留在#d1的样式

 

样式重复优先级：通配符<标签<类<id<内联

派生选择器

 

 

1. 外部样式

写在css样式文件中，在html文件中通过link标签引入。

1. 创建css

<link href="css02.css" type="text/css" rel="stylesheet">

1. 通过link标签引入css样式

Href：引入文件的路径

Type：引入文件的类型

Rel：引入文件与文本文件的关系

Stylesheet：级联样式表

text/css文本样式类型

3.

<link href="../html01/image.png" rel="icon">

Icon:关系是图标小图片

 

 

• 盒子模型设置距离

1.Padding

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

 距离边框的方向：top，buttom，left，right；

设置方式：

 1.Padding-方向：距离；设置距离的方向的距离

 2.padding：值1  内边距距离四个方向是值1的距离

   Padding：值1  值2  值3；上方向是值1，左右方向是值2，下方向是值3；

   Padding：值1  值2  值3 值4  ；上右下左

使用内边距padding，标签范围会变大 注意页面布局

 

 

 

3.Margin

  

  外边距：标签以外的距离，本标签与其他标签的距离

  距离边框的方向：top，buttom，left，right；

  设置方式与padding类似

1. margin-方向
2. Margin：值

 

• 定位

Position:标签的位置属性

属性值：static relative,absolute,fixed

1. static(默认)：默认定位，静态定位，系统自动生成
2.  Relative；相对定位:相对于标签的原位置进行定位

与定位的四个方向：top，buttom，left，right；结合使用

保留原位置

 

1. absolute；绝对定位

1. 默认：以页面body的左上角
2. 当标签的postion不是static的时候，就以父标签进行定位
3. 不保留原位置

 

1. fixed:固定定位，确定定位；

1. 以整个页面整体进行定位
2. 不会随着滚动条发生位置变化，固定在页面中
3. 不保留位置

 

 

• 隐藏，溢出

隐藏：display(不保留位置的隐藏) 和 visibility（保留位置的隐藏）

Display：none 隐藏/  block 显现

Visibility：hidden 隐藏/  visible显现

 

溢出：Overflow;标签中的内容超出了标签范围默认是可见

Overflow:hidden/visible/scroll:溢出的内容隐藏/显现/滚动

 

层级：z-index

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

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

z-index:正整数

 

 

• 常用的属性设置

1. 边框  border：颜色 大小 样式；border:red 1px solid;

solid实线；dashed:虚线

        边框占用px位置空间

 

Border-radius:大小值；设置标签中边框四个角的弧度，圆角

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

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

 

1. 轮廓

        Outline:颜色 大小 样式；与边框设置一样

        与边框是一致，区别：轮廓不占用空间，边框占用空间

 

 

 

 

作业

1. 找到让鼠标变成自定义的图片