为了让网页元素的样式更加的丰富, 也为了让网页的内容和样式能拆分开, CSS由此而诞生.
CSS是 Cascading Style Sheets 的首写字母缩写,意思是层叠样式表.
有了CSS, html 中大部分表现样式的标签就废弃不用了, html只负责文档的结构和内容,
表现形式完全交给CSS, 这样使得html文档变得更加简洁.
1. CSS基本语法
CSS使用格式: 选择器 { 属性 : 值; 属性 : 值; ... }
说明:
选择器是将样式和页面元素关联起来的名称
属性名是希望设置的样式属性, 每个属性有一个或者多个值
属性和值之间用冒号隔开
一个属性和值与下一个属性和值之间用分号, 最后一个分号可以省略.
例如:
div { width: 100px; height: 100px; background: gold; }
2. CSS引入方法
CSS样式导入HTML中有三种方式
1.内联式:
通过标签的 style 属性, 在标签上直接写样式.
<div style="width:100px; height:100px; background:red">这是个div标签</div>
\2. 嵌入式:
通过 style 标签, 在网页上创建嵌入的样式表.
<style type="text/css"> div { width: 100px; height: 100px; background: red; } </style>
3.外联式:
<link rel="stylesheet" type="text/css" href="css/样式文件名.css">
3. CSS选择器
1.标签选择器
标签选择器, 此种选择器影响范围大, 一般用来做一些通用设置, 或用在层级选择器中.
通用格式: 标签名 { 属性名: 值; ... }
例如:
div { color: red; } p { font-size: 18px; }
一旦使用标签选择器,则当前页面上的所有该标签全部都有该样式. 这一点需要注意
2.类选择器
通过类名来选择元素, 一个类可应用于多个元素, 一个元素上也可以使用多个类, 应用灵活, 可复用, 是css中应用最多的一种选择器
常见格式: .类名 { 属性名: 值; ... }
举例:
CSS部分: <style> .blue { color: blue; } .header { font-size: 19px; } </style> HTML部分: <div class="blue">这是个div标签</div> <h3 class="blue header">这个是个h3标签</h3> <p class="header">p标签部分</p>
3.层级选择器:
主要应用在标签嵌套的结构中,层级选择器, 是结合上面两种选择器来写的选择器, 它可与标签选择器结合使用,减少命名,同时也可以通过层级, 限制样式的作用范围
例如:
CSS部分: .con { width: 100px; height: 100px; } .con span { color: red; } .con .pink { color: pink; } HTML部分: <div class="con"> <span>这里是span标签的内容</span> <div class="pink">这里是div中的div标签,我是粉色</div> </div>
层级选择器: 按照标签的层级来匹配对应的标签
\4. id选择器
通过 id 名来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用id作为选择器。
使用格式: #id名 { 属性名: 值 }
举例：
CSS部分: #box{ color:red } HTML部分: <p id="box">这是第一个段落标签</p> <p>这是第二个段落标签</p> <p>这是第三个段落标签</p>
\5. 伪类选择器
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态。
CSS部分: .box1 { width:100px; height:100px; background:gold; } .box1:hover { width:300px; } HTML部分: <div class="box1">别看村子不咋大呀， 有山有水有树林， 邻里相亲多和睦， 老少爷们也合群</div> 补充: #input:focus { outline: none; border: 2px solid red; }
总结:
CSS 选择器的主要目的是: 获取 HTML 元素, 获取到后给当前元素添加样式.
CSS 选择器的种类非常多, 一般我们用不上, 把常用的学会即可.
标签选择器尽量少用, 覆盖面巨大. 不利于我们样式的单独调整.
class 类选择器是经常使用的选择器. 可以多多练习
层级选择器 一般配合类选择器或者其他的选择器一起使用. 常用来获取大容器里面没有明确定义类名的元素
id 选择器偶尔使用, 使用它往往就是利用他的唯一性. 获取单个某个标签使用.
伪类选择器是需要设置特殊阶段的效果时, 添加的选择器, 知道即可
<html> <head> <style type="text/css"> a:link {color: red} /* 未访问时的状态 */ a:visited {color: orange} /* 已访问过的状态 */ a:hover {color: pink} /* 鼠标移动到链接上时的状态 */ a:active {color: yellow} /* 鼠标按下去时的状态 */ </style> </head> <body> <p> <b><a href="/index.html" target="_blank">这是一个链接。</a></b> </p> <p> <b>注释：</b> 在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！ </p> <p> <b>注释：</b> 在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！ </p> </body> </html>
4. CSS属性入门
布局常用属性样式:
| 属性 | 作用 | 举例 |
|---|---|---|
| width | 设置元素(标签)的宽度 | width: 200px; |
| height | 设置元素(标签)的高度 | height: 200px; |
| background | 设置元素背景色或者背景图片(详看下面) | background: pink; |
| border | 设置元素四周的边框 | border: 1px solid pink; |
| border-top | 设置元素顶部边框 | border-top: 1px solid pink; |
| border-left | 设置元素左边边框 | border-left: 1px solid pink; |
| border-right | 设置元素右边边框 | border-right: 1px solid pink; |
| border-bottom | 设置元素底部边框 | border-bottom: 1px solid pink; |
| padding | 设置内边距(同时设置四个边,也可以分开设置) | padding: 20px; |
| margin | 设置外边距(同时设置四个边,也可以分开设置) | margin: 20px; |
| float | 设置元素浮动,浮动可以让块元素在一行排列 | float:left(左浮动) float: right(右浮动) |
补充说明:
background-color 背景颜色
background-image 背景图片
background-repeat 背景重复
我们可以对上面的代码进行合并书写:
background: url(bgimg.gif) no-repeat 5px 5px;
补充:
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
css 浮动:
准备3个框，分别标号框1、框2、框3。
当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
文本常用样式属性:
| color | 设置文字的颜色 | color: red; |
| font-size | 设置文字的大小 | font-size: 12px; |
| font-family | 设置文字的字体 | font-family: 'Microsoft Yahei'; (微软雅黑) |
| font-weight | 设置文字是否加粗 | font-weight: bold; (bold:加粗 normal: 正常) |
| line-height | 设置文字的行高 | line-height: 24px; (文字高度加上文字上下间距共计24px) |
| text-decoration | 设置文字的下划线 | text-decoration:none; (取消下划线) |
提示:样式中的注释
/* 设置头部的样式 */ .header{ width:960px; height:80px; background:gold; }
5. CSS布局演示
通过样式,并且参照下图, 可以把之前写的布局作进一步的调整, 完成最终的布局效果:
参考文字:
人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width:285px; height: 310px; border-bottom: 1px solid #c8dcf2; border-top: 1px solid #c8dcf2; } .header { width:285px; height: 40px; } .header h3 { margin:0px; font-family: 'Microsoft Yahei'; font-size: 16px; color: #172c45; line-height: 40px; float: left; } .header a { font-size: 12px; font-family: 'Microsoft Yahei'; color: #172c45; text-decoration: none; float: right; line-height: 40px; } p { font-size: 12px; font-family: 'Microsoft Yahei'; color: #737373; line-height: 20px; height:190px; width: 100%; } img { height:80px; width:100%; } </style> </head> <body> <div class="box"> <div class="header"> <h3>今日头条</h3> <a href="#">更多>></a> </div> <img src="./images/banner.jpg" alt="banner"> <p> 人工智能（Artificial Intelligence），英文缩写为AI。它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。 </p> </div> </body> </html>
第二章
一. 地址
网页上引入或链接到外部文件，需要定义文件的地址，常见引入或链接外部文件包括以下几种：
<!-- 引入外部图片 --> <img src="images/001.jpg" alt="图片" /> <!-- 添加一个图片 --> <img src="C:\course5\03day\images\001.jpg" alt="图片" /> <!-- 链接到另外一个网页 --> <a href="002.html">链接到网页2</a> <!-- 链接到另外一个网页 --> <a href="C:\source2\002.html">链接到网页2</a> <!-- 外链一个css文件 --> <link rel="stylesheet" type="text/css" href="css/main.css" /> <!-- 外链一个js文件 --> <script type="text/javascript" src="js/jquery.js"></script>
这些地址分为相对地址和绝对地址:
1. 相对地址
相对于引用文件本身去定位被引用的文件地址，相对地址的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
2. 绝对地址
相对于磁盘的位置去定位文件的地址:
例如:<img src="C:\course5\03day\images\001.jpg" alt="图片" />
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对地址就没有这个问题。
二. CSS盒子模型
盒子模型解释
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：
把元素叫做盒子，设置对应的样式分别为：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。
设置宽高 width height
width:200px; /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
设置边框 border
设置一边的边框，比如顶部边框，可以按如下设置：
border-top:10px solid red;
其中10px表示线框的粗细；solid表示线性。
设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。
四个边如果设置一样，可以将四个边的设置合并成一句：
border:10px solid red;
设置内间距 padding
设置盒子四边的内间距，可设置如下：
padding-top：20px; /* 设置顶部内间距20px */ padding-left:30px; /* 设置左边内间距30px */ padding-right:40px; /* 设置右边内间距40px */ padding-bottom:50px; /* 设置底部内间距50px */
上面的设置可以简写如下：
/* 四个值按照顺时针方向，分别设置的是 上 右 下 左 四个方向的内边距值。 */ padding：20px 40px 50px 30px;
padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：
padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ padding：20px; /* 设置四边内边距为20px */
设置外间距margin 外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。
外间距居中技巧 如果子元素是块元素，且它的宽度小于父元素，可以将子元素左右设置auto来水平居中子元素
/* 子元素上下外边距设为0，左右设置为auto */ margin:0px auto
盒子的真实尺寸 盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
三. 列表 标签
前端中列表分为两种:
有序列表
无序列表
1. 无序列表
无序列表一般应用在布局中的新闻标题列表和文章标题列表以及菜单，它是含有语义的，标签结构如下：
使用方式: ul>li{列表标题}*3 <ul> <li>列表标题</li> <li>列表标题</li> <li>列表标题</li> </ul>
列表的内容一般是可以链接的，点击链接到新闻或者文章的具体内容，所以具体结构一般是这样的：
ul>(li>a[href=#]{列表标题 $})*3 <ul> <li><a href="#">列表标题 1</a></li> <li><a href="#">列表标题 2</a></li> <li><a href="#">列表标题 3</a></li> </ul>
显示效果:
2. 有序列表
使用方式: ol>li{列表标题}*3 <ol> <li>列表标题</li> <li>列表标题</li> <li>列表标题</li> </ol>
请进行如下的 emmet 语法练习:
.box>.box1+.box2
#page>div.logo+ul#navigation>li*5>a{Item $}
div#header+div.page+div#footer.class1.class2.class3
总结:
我们在写页面的时候经常会使用列表标签
写列表标签的时候, 我们可以去掉前面的点或者是序号:
<style> li { list-style:none; /* 取消列表前面的序号或者是点 */ } </style>
写所有 html 页面的时候, 都可以使用 emmet 语法
四. HTML表单
表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，相关标签及属性用法如下：
1、<form>标签 定义整体的表单区域
action属性 定义表单数据提交地址
method属性 定义表单提交的方式，一般有“get”方式和“post”方式
使用方式:
<form action="" method="">
</form>
2、<label>标签 为表单元素定义文字标注
label 的 for 属性值可以和 input 的 id 名书写一致, 使 label 的点击也能够触发 input 的聚焦
label的使用方式: <label for="">Male</label> <label for="">Female</label> label的for属性设置: <label for="male">用户名: <input type="text" id="male">
3、<input>标签 定义通用的表单元素
type属性
type="text" 定义单行文本输入框
type="password" 定义密码输入框
type="radio" 定义单选框
type="checkbox" 定义复选框
type="file" 定义上传文件
type="submit" 定义提交按钮
type="reset" 定义重置按钮
type="button" 定义一个普通按钮
value属性 定义表单元素的值
name属性 定义表单元素的名称，此名称是提交数据时的键名
使用方法: <input type="text" name="username" placeholder="请您输入姓名"> <input type="password" name="password"> <input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="0"> 女 <input type="checkbox" name="hobby" value="1"> 唱歌 <input type="file" name="file"> <input type="submit"> <input type="reset"> <input type="button" value="按钮1">
4、<textarea>标签 定义多行文本输入框
使用方法:
<textarea name="" placeholder="提示信息..." id="" cols="30" rows="10">
textarea的使用
</textarea>
5、<select>标签 定义下拉表单元素
6、<option>标签 与<select>标签配合，定义下拉表单元素中的选项
使用方法:
创建带有 4 个选项的选择列表：
<select name="province" id="">
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">河南</option>
<option value="4">湖北</option>
</select>
注册表单实例：
<form action="http://www..." method="get">
<p>
<label>姓名：</label>
<input type="text" name="username" />
</p>
<p>
<label>密码：</label>
<input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>
单行文本框文字提示
placeholder 设置input输入框的默认提示文字。
总结:
在前端页面中, 我们往往用表单来制作用户的注册, 登录等功能.
表单包含很多内容, 例如:
单选: radio
多选: checkbox
密码: password
文本: text
按钮: reset, submit, file
多行文本输入: textarea
下拉菜单: select option
表单( form )可以直接提交: 提交方法包含 get post
action: 提交的服务器地址
method: 提交的方法
五. 表格元素及相关样式
1、<table>标签
声明一个表格
2、<tr>标签
定义表格中的行
3、<td>和<th>标签
定义列以及列中的标题
td代表列，th表示列中的标题部分(加粗)
它们的常用属性如下：
colspan 设置单元格水平合并，设置值是数值
rowspan 设置单元格垂直合并，设置值是数值
表格相关样式属性
border-collapse 设置表格的边线合并，如：border-collapse:collapse;
border='1' 可以设置table的边框大小
text-align 可以设置对齐方式: left right center
总结:
在网页中, 表格用一般用 table 标签来做
表格中分为 行 和 列
表格中的行为 tr 标签
表格中的列为 td 标签
其中每一列都可以有一个标题, 我们可以使用 th 标签
<table>
<tr>
<th>标题一</th>
<th>标题二</th>
<th>标题三</th>
<th>标题四</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
六. CSS属性进阶
1.文本常用样式属性进阶：
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:32px; 设置文字首行缩进32px
CSS部分:
<style>
.box {
width:80px;
height:30px;
background: pink;
text-align: center;
}
.pbox {
/* css里面默认的字体大小是16px */
font-size: 20px;
text-indent: 32px;
}
</style>
HTML部分:
<div class="box">
<p>
你好世界
</p>
</div>
<p class="pbox">
大头儿子小头爸爸
一对好朋友 快乐父子俩
儿子的头大手儿小
爸爸的头小手儿很大
大手牵小手
走路不怕滑
走呀走呀走 走 走
转眼儿子就长大
转眼儿子就长大
</p>
2. display属性
作用: 第一个决定了当前元素是否应该显示, 第二个决定了当前元素应该以什么类型显示
display 属性规定元素应该生成的框的类型。
display 的默认属性值是 inline, 此元素会被显示为内联元素
display属性是用来设置元素的类型及隐藏的，常用的属性有：
none 元素隐藏且不占位置
block 此元素会被显示为块元素
inline 此元素会被显示为内联元素
CSS部分:
<style>
div {
display: inline;
}
a {
display: block;
}
.pbox {
width: 200px;
height: 200px;
background: pink;
display: none;
}
</style>
HTML部分:
<div>
<div>我是要成为海贼王的男人</div>
<div>海贼王下面的div</div>
<a href="#">这是第一个链接</a>
<a href="#">这是第二个链接</a>
<p class="pbox" style="display:block">
葫芦娃 葫芦娃 一根藤上七朵花 小小树藤是我家 啦啦啦啦 叮当当咚咚当当 浇不大 叮当当咚咚当当 是我家 啦啦啦啦
</p>
</div>
3. CSS元素溢出
当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。
overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
CSS部分:
<style>
div {
width:100px;
height:100px;
overflow: auto;
}
</style>
HTML部分:
<div>
格叽格叽~
<br><br>
格叽格叽~~
<br><br>
格叽~格叽~~
<br><br>
</div>
七. 定位
把某一个标签, 安置到某一个位置去, 这个过程称为定位.
1. 文档流概念( 了解 )
文档流，是指盒子按照 HTML 标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
2. 定位分类:
我们可以使用 CSS 的 position 属性来设置元素的定位类型，position 的设置项如下：
static 默认值. 没有定位: 元素出现在正常的流中(忽略top, bottom, left, right 或者 z-index 声明)
relative 生成相对定位元素，一般是将父级设置相对定位，子级设置绝对定位，子级就以父级作为参照来定位，否则子级相对于body来定位。
absolute: 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
fixed: 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
定位元素的偏移
定位的元素还需要用left、right、top或者bottom来设置相对于参照元素的偏移值。
1. 相对定位:
CSS部分:
<style>
.con {
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
}
.con div {
width:200px;
height:70px;
margin:10px;
}
.box01 {
background:lightgreen;
/* 设置相对定位 */
position:relative;
left:50px;
top:50px;
}
.box02 {
background: lightskyblue
}
.box03 {
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
2. 绝对定位:
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
/* 父级设置为相对定位，不设置偏移，子级就可以以它为参照做绝对定位 */
position: relative;
/* 设置父级的溢出隐藏 */
overflow: hidden;
}
.con div{
width:200px;
height:70px;
margin:10px;
}
.box01{
background:lightgreen;
/* 设置绝对定位 */
position:absolute;
left:131px;
top:50px;
}
.box02{
background: lightskyblue
}
.box03{
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
3. 固定定位
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
}
.con div{
width:200px;
height:70px;
margin:10px;
}
.box01{
background:lightgreen;
/* 设置固定定位 */
position:fixed;
right:131px;
bottom:50px;
}
.box02{
background: lightskyblue
}
.box03{
background: lightpink;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
3. 元素层级
绝对定位元素是浮动在正常的文档流之上的，可以用 z-index 属性来设置元素的层级
伪代码如下:
.box01{
......
position:absolute; /* 设置了绝对定位 */
left:200px; /* 相对于参照元素左边向右偏移200px */
top:100px; /* 相对于参照元素顶部向下偏移100px */
z-index:10 /* 将元素层级设置为10 */
}
CSS部分:
<style>
.con{
width:300px;
height:300px;
border:1px solid black;
margin:0px auto;
position: relative;
}
.con div{
width:200px;
height:70px;
margin:10px;
position:absolute;
}
.box01{
background:lightgreen;
left:0px;
top:0px;
/* 设置定位元素的层级 */
z-index:6;
}
.box02{
background: lightskyblue;
left:30px;
top:30px;
z-index:7;
}
.box03{
background: lightpink;
left:60px;
top:60px;
z-index:8;
}
</style>
HTML部分:
<!-- .con>.box01+.box02+.box03 -->
<div class="con">
<!-- 如果不设置z-index属性，定位元素的层级安装代码书写的顺序，先写的排列在下面，后写的排列在上面 -->
<div class="box01">1</div>
<div class="box02">2</div>
<div class="box03">3</div>
</div>
4 . 练习: 用固定定位创建弹窗
<style>
.pop{
width:500px;
height:300px;
border:1px solid black;
background:white;
position: fixed;
/* 弹框水平垂直居中的写法： */
left:50%;
top:50%;
margin-left:-251px;
margin-top:-151px;
/* 设置弹框的层级,设置比较大的值，盖住其他所有的元素*/
z-index:9999;
}
.pop h3{
margin:5px;
background: lightskyblue;
line-height:40px;
}
.mask{
position:fixed;
left:0px;
top:0px;
width:100%;
height:100%;
background:black;
z-index:9998;
/* 设置背景的透明度 */
opacity:0.3;
/* 透明度兼容写法，兼容IE */
filter:alpha(opacity=30);
}
/* 设置pop_con的隐藏，可以同时将弹框和背景隐藏起来 */
.pop_con{
display:none;
}
</style>
HTML部分:
<h1>网页内容</h1>
<div class="pop_con" style="display:block">
<div class="pop">
<h3>弹框标题</h3>
<p>弹框的文字内容</p>
</div>
<div class="mask"></div>
</div>
八. 页面嵌套
在一个页面中可以开一个局部的窗口，嵌入另外一个页面
制作这样的功能我们一般使用: iframe 标签来实现
使用方法: <iframe src="" frameborder=""> </iframe>
src: 设置另一个网页的地址
frameborder: 设置这个局部窗口边框的粗细
提升:
iframe 可以和 a 标签搭配使用, 呈现切换的效果:
我们知道
a标签有 target 属性:target="_blank" : 新开一个浏览器窗口显示链接的页面
如果 target 的值和 iframe 的 name 值保持相同, 则 a 标签切换后的 href 将作用到 iframe 的 src 上:
<a href="001.html" target="name">001页面</a> <a href="002.html" target="name">002页面</a> <a href="003.html" target="name">003页面</a> <iframe src="001.html" frameborder="0" name="name"></iframe>
九. 元素居中显示技巧
1. 居中显示:
想要使某个元素能够居中显示, 需要设置其 margin 属性为: 0px auto:
CSS部分:
<style>
.box{
width: 300px;
height: 300px;
background: gold;
margin:0px auto;
}
</style>
HTML部分:
<div class="box"></div>
总结:
如果想要某个元素居中, 则需要设置他的 margin : 0px auto;
多个元素想要居中, 则每个单独的元素都需要设置该属性.
margin: 0px auto; =====> margin: 0px auto 0px auto; (上, 右, 下, 左)
十. CSS权重值计算 ( 简单了解 )
什么是权重值:
例子: 根据分数, 决定排名
小明的分数: 总分( 550 )
英语: 100
数学: 130
语文: 90
理综: 230
小红的分数: 总分 ( 530 )
英语: 110
数学: 120
语文: 100
理综: 200
因为 小明的分数 > 小红的分数 , 所以 小明的排名高于小红的排名
我们上面说的各个学科, 其实就相当于各个选择器, 各学科有分数, 各选择器也有分数, 分数相加最高的 显示在最上面, 覆盖掉分数低的. 各个选择器的分数就是权重.
1.权重了解
内联样式的权重值最高: 1000 (内联: 写在标签上的样式)
标签选择器的权重值为最低: 1
类选择器的权重值为: 10 ( 了解 )
伪类选择器权重值为: 10 ( 了解 )
id 选择器的权重值为: 100
CSS部分:
<style>
/* 权重值：1 */
div{
color:red;
}
/* 权重值：1+10+10+1=22 */
body .con .box h3{
color:#8e6758;
}
/* 权重值：10+10+1=21 */
.con .box h3{
color:red;
}
</style>
HTML部分:
<!-- style的权重值：1000 -->
<div style="color:blue">这是一个div</div>
<div class="con">
<div class="box">
<h3>这是一个h3标签</h3>
</div>
</div>
十一. Photoshop
1. photoshop的使用:
1) 什么是 photoshop ?
Adobe Photoshop，简称 “PS”，是由 Adobe Systems 开发和发行的图像处理软件。
Photoshop 主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。PS 有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
2) 我们这里使用 PS 来辅助测量和取色
图片预览的方法:
图片缩放
图片平移
尺寸测量方法:
设置单位
矩形框测量, 调整矩形框
文字大小的测量
取色方法:
取色工具
前景色按钮
CSS 颜色表示法:
CSS 颜色值主要有三种表示法:
颜色名表示, 比如 : red 红色, pink 金色;
16 进制数值表示, 比如: #ff0000 表示红色
扫一扫
1265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
