html和css进阶

一、相对地址和绝对地址：

相对地址：“./” 表示当前文件所在目录 “…/” 表示当前文件所在目录的上一级目录
绝对地址：做为了解，一般不用

二、列表标签相关：

新闻标题列表、文章标题列表、菜单要使用列表标签
列表创建的快捷键：

无序列表：快捷键
<!-- ul>(li>a{无序列表文字$})*8 -->
<ul>
<li><a href="">无序列表文字1</a></li>
<li><a href="">无序列表文字2</a></li>
<li><a href="">无序列表文字3</a></li>
<li><a href="">无序列表文字4</a></li>
<li><a href="">无序列表文字5</a></li>
<li><a href="">无序列表文字6</a></li>
<li><a href="">无序列表文字7</a></li>
<li><a href="">无序列表文字8</a></li>
</ul>

有序列表：快捷键
<!-- ol[type="A"]>(li>a[href="#"]{有序$}+h{段落$}+h{另一段落$})*3 -->
<ol type="A">
<li>
<a href="#">有序1</a>
<h>段落1</h>
<h>另一段落1</h>
</li>
<li>
<a href="#">有序2</a>
<h>段落2</h>
<h>另一段落2</h>
</li>
<li>
<a href="#">有序3</a>
<h>段落3</h>
<h>另一段落3</h>
</li>
</ol>

多行操作：点击一行，然后按住alt键不放，再点击其他行，就可以选中多行
列表标签样式：list-style:none 去掉小圆点

三、表单，常用的标签：

1、标签 定义整体的表单区域

action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式

2、标签 为表单元素定义文字标注 3、标签 定义通用的表单元素

type属性
type=“text” 定义单行文本输入框
type=“password” 定义密码输入框
type=“radio” 定义单选框
type=“checkbox” 定义复选框
type=“file” 定义上传文件
type=“submit” 定义提交按钮
type=“reset” 定义重置按钮
type=“button” 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名

4、标签 定义多行文本输入框 5、标签 定义下拉表单元素 6、标签 与标签配合，定义下拉表单元素中的选项

四、三种选择器：

Id选择器： 通过id名称来选择标签

#box{color:red}
......
<p id="box">这是一个段落标签</p>

组选择器： 将通过的样式抽取出来写在一起，选择器之间用“，”隔开

.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

伪类选择器： 定义鼠标悬停时标签的样式

.box1:{width:100px;height:100px;background:gold;}
.box1:hover{width:300px;}

五、盒子模型：

padding 的定义方式:

<!-- 设置内边距（四个参数）：上为20、右为40、下为60、左为80   顺时针-->
padding: 20px 40px 60px 80px;

<!-- 设置内边距（三个参数）：上、左右、下 -->
padding: 20px 40px 60px;

<!-- 设置内边距（两个参数）：上下、左右 -->
padding: 20px 40px;

<!-- 设置内边距（一个参数）：上下左右 -->
padding: 20px;

<!-- 也可以使用padding-top, padding-left, padding-right, padding-bottom进行设置 -->

margin 的定义方式:

<!-- 设置外边距（四个参数）：上为20、右为40、下为60、左为80   顺时针-->
margin: 20px 40px 60px 80px;

<!-- 设置外边距（三个参数）：上、左右、下 -->
margin: 20px 40px 60px;

<!-- 设置外边距（两个参数）：上下、左右 -->
margin: 20px 40px;

<!-- 设置外边距（一个参数）：上下左右 -->
margin: 20px;

<!-- 也可以使用margin-top, margin-left, margin-right, margin-bottom进行设置 -->

盒子的真实尺寸计算：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下