0. *
HTML + CSS + JavaScript
结构 + 表现 + 动作
- ==结构==化标准语言(HTML,XML)
- ==表现==标准语言(CSS)
- ==行为==标准语言(DOM,ECMAScript)
1. 特殊HTML字符
HTML源码 |
显示结果 |
描述 |
\< |
< |
小于号显示标记 |
\> |
> |
大于号或显示标记 |
\& |
& |
可用于显示其他特殊字符 |
\" |
‘’ |
引号 |
\® |
© |
已注册 |
\© |
® |
版权 |
\™ |
TM |
商标 |
\ |
|
半个空白位 |
\ |
|
一个空白位 |
\ |
|
不断行的空白 |
1. CSS简介
1.1 CSS
- Cascading Style Sheet - 层叠样式表
- CSS - 表现(美化网页)
- 字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动
1.2 发展史
1.3 快速入门
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范 语法: 选择器 { 声明1; => 属性: 值; 声明2; ... } -->
<style> h1{ color: red;
} </style> </head>
|
1 2 3 4 5 6 7 8 9 10
| <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head>
<!-- style.css --> h1{ color: red; }
|
css注释:/* css注释 */
1.4 CSS优势
- 内容和表现分离;
- 网页结构表现统一,可以实现复用
- 样式十分的丰富
- 建议使用独立于html的css文件
- 利用SEO,容易被搜索引擎收录!
1.5 CSS的3种导入方式
1.5.1 三种样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式 --> <style> h1 { color: red;
} </style>
<!-- 外部样式 --> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>我是标题</h1>
<!-- 应用优先级: 行内样式 > 内部样式 > 外部样式 --> <!-- 行内样式: 在标签元素中,编写一个style属性,编写样式即可 --> <h1 style="color: blue">我也是标题</h1> </body> </html>
|
1.5.2 外部样式两种导入方式
2. 选择器
作用:选择页面上的某一个后者某一类元素
2.1 基本选择器
- 优先级:id选择器 > class选择器 > 标签选择器
2.1.1 标签选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| <head> <meta charset="UTF-8"> <title>标签选择器</title>
<style> h1 { color: #ff0000; background: bisque; border-radius: 24px; } p{ font-size: 80px; border-bottom: aqua 2px solid; } </style> </head> <body> <h1>Bayyys</h1> <h1>bayyys</h1> <p>bay</p> </body>
|
2.1.2 类选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| <head> <meta charset="UTF-8"> <title>类选择器</title>
<style> .class1 { color: #ff0000; background: bisque; border-radius: 24px; } .class2 { font-size: 80px; border-bottom: aqua 2px solid; } </style>
</head> <body> <h1 class="class1">标题1</h1> <h1 class="class2">标题2</h1> <h1>标题3</h1> </body>
|
2.1.3 id选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| <head> <meta charset="UTF-8"> <title>id选择器</title>
<style> #id1 { color: #ff0000; background: bisque; border-radius: 24px; } #id2 { font-size: 80px; border-bottom: aqua 2px solid; } .class1 { color: #ff0000; background: bisque; border-radius: 24px; } </style> </head> <body> <h1 id="id1">标题1</h1> <h1 id="id2" class="class1">标题2</h1> <h1 class="class1">标题3</h1> </body>
|
2.2 层次选择器
2.2.1 后代选择器
1 2 3 4 5
| /* 后代选择器: 元素后面的所有代 */ body p { color: green; background: red; }
|
2.2.2 子选择器
1 2 3 4 5
| /* 子代选择器: 只有一代 */ body>p { color: blue; background: yellow; }
|
2.2.3 相邻兄弟选择器
1 2 3 4 5
| /* 相邻兄弟选择器: 选择紧跟在另一个元素后的元素,且二者有相同的父元素(紧跟着的下一个) */ .active+p { color: yellow; background: blue; }
|
2.2.4 通用选择器
1 2 3 4 5
| /* 通用选择器: 元素后的所有同级元素,且二者有相同的父元素(所有的后级元素) */ .usual~p { color: red; background: blue; }
|
2.3 结构伪类选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
|
<style> ul li:first-child { color: green; background: red; } ul li:last-child { color: blue; background: yellow; } p:nth-child(2) { color: red; background: green; } p:nth-of-type(2) { color: green; background: red; } </style>
<body> <h1>h1</h1> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body>
|
2.4 属性选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
| <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: blue; text-align: center; color: gray; text-decoration: none; margin: 5px; font: bold 20px/50px Arial; } .demo a[href] { background: pink; } .demo a[id] { background: red; } .demo a[title] { background: yellow; } .demo a[target] { background: green; } .demo a[class*="class_test"] { background: orange; } .demo a[href^="/"] { background: gray; } .demo a[href$=".doc"] { background: black; } </style> </head> <body>
<p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links item active" target="_blank" title="test1">2</a> <a href="img/1.png" class="links item" title="test2">3</a> <a href="img/2.html" class="links item class_test">4</a> <a href="img/3.jpg" class="links item">5</a> <a href="/4.pdf" class="links item">6</a> <a href="5.doc" class="links item">7</a> <a href="6.ppt" class="links item last">8</a> <a class="links item2">9</a> </p>
</body>
|
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾
3. 美化网页信息
3.1 美化需求
- 有效的传递页面信息
- 美化网页,页面漂亮才能吸引客户
- 凸显页面的主题
- 提高用户的体验
3.2 span标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <head> <meta charset="UTF-8"> <title>span标签</title> <style> span { color: red; background: green; } </style> </head> <body> <p>hello world! <span>Bayyys</span></p> </body>
|
3.3 字体样式
font-family:字体系列
font-size:字体大小
font-weight:字体粗细
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| <style> <!-- oblique - 字体风格 --> p{ font: oblique bolder 12px "楷体"; } body{ font-family:楷体; color:red; } h1{ font-size: 50px; } .p1{ font-weight:blod; } </style>
|
3.4 文本样式
- 颜色 –> color, rgb,rgba
- 文本对齐方式 –> text-align:center
- 首行缩进 –> text-indent:2em
- 行高 –> line-height:300px;单行文字上下居中!line-height = height
- 下划线 –> text-decoration
- 文本图片水平对齐:vertical-align: middle;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
|
text-decoration:underline/*下划线*/ text-decoration:line-through/*中划线*/ text-decoration:overline/*上划线*/ text-decoration:none/*超链接去下划线*/
img,span{vetical-align:middle}/*图片、文字水平对齐 - 垂直对齐 middle中间*/
<p> <img src="1.png"> <span>123124124</span> </p>
|
3.5 超链接伪类
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50
| <head> <meta charset="UTF-8"> <title>超链接伪类</title> <style> a { text-decoration: none; color: black; } a:hover { text-decoration: underline; color: red; } a:active { text-decoration: line-through; color: green; } a:link { text-decoration: none; color: blue; } a:visited { text-decoration: none; color: yellow; } #price { text-shadow: 5px 5px 5px red; } </style> </head> <body>
<a href="#"> <img src="images/book.jpg" alt=""> </a> <p> <a href="#"><this book></a> </p> <p> <a href="">作者: HIS</a> </p> <p id="price"> ¥99 </p> </body>
|
3.6 列表
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表样式</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body>
<div id="nav"> <h2 class="title">全部商品分类</h2> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li> </ul> </div>
</body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| #nav{ width: 275px; background: gray; }
.title{ font-size: 18px; font-weight: bold; text-indent: 1em; line-height: 35px; background: red; }
ul{ background: gray; }
ul li{ height: 30px; list-style: none; text-indent: 1em; }
a{ text-decoration: none; color: #000; font-size: 14px; }
a:hover{ color: orange; text-decoration: underline; }
|
3.7 背景
- 背景颜色:background
- 背景透明度:opacity
- 背景图片
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <style> div{ width: 500px; height: 200px; margin: 10px; float: initial; border: 1px solid red; background-image: url("images/pic.png"); } .div1{ background-repeat: repeat-x; } .div2{ background-repeat: repeat-y; } .div3{ background-repeat: no-repeat; } .div4{ background-repeat: repeat; } .div5{
</style> </head> <body> <div></div> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11
| .title{ ... background: red url("../images/down.png") 250px no-repeat; }
ul li{ ... background-image: url("../images/right.png"); background-repeat: no-repeat; background-position: 210px center; }
|
3.8 渐变
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> body{ background-color: #FFFFFF; background-image: linear-gradient(66deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%); } </style> </head> <body>
</body> </html>
|
4. 盒子模型
4.1 盒子
- margin:外边距
- padding:内边距
- border:边框
4.2 边框
border:粗细 样式 颜色
- 边框的粗细
- 边框的样式
- 边框的颜色
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style>
#box { width: 300px; border: 1px solid red; }
h2 { font-size: 16px; background-color: cornflowerblue; line-height: 30px; margin: 0px; }
form { background: #008800; }
div:nth-of-type(1) input { border: 3px solid black; }
</style> </head> <body>
<div id="box"> <h2>会员登录</h2> <form action="#"> <div> <span>用户名:</span> <input type="text"> </div> <div> <span>密码:</span> <input type="password"> </div> <div> <span>邮箱:</span> <input type="text"> </div>
</form> </div>
</body> </html>
|
4.3 外边距
1 2 3 4 5
| #box { width: 300px; border: 1px solid red; margin: 0 auto; }
|
1 2 3 4 5 6 7 8
| margin:0 0 0 0/*分别表示上、右、下、左;从上开始顺时针*/ /*例1:居中*/ margin:0 auto /*auto表示左右自动*/ /*例2:*/ margin:4px/*表示上、右、下、左都为4px*/ /*例3*/ margin:10px 20px 30px/*表示上为10px,左右为20px,下为30px*/
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div1{ width: 100px; height: 100px; border: 10px solid red; border-radius: 100px; } #div2{ width: 100px; height: 50px; border: 10px solid red; border-radius: 100px 100px 0 0; } #div3{ width: 50px; height: 50px; border: 10px solid red; border-radius: 100px 0 0 0; } img{ border-radius: 100px; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div>
<img src="images/tx.jpg" alt=""> </body> </html>
|
4.5 盒子阴影
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> img { border-radius: 50px; box-shadow: 10px 10px 100px yellow; } </style> </head> <body> <div> <div style="width: 500px;display: block;text-align: center "> <img src="images/pic.png" alt=""> </div> <img src="images/pic.png" alt="" style="display: block;margin: 0 auto"> </div> </body> </html>
|
5. 浮动
5.1 标准文档流
块级元素:独占一行 h1~h6 、p、div、 列表…
行内元素:不独占一行 span、a、img、strong
注: 行内元素可以包含在块级元素中,反之则不可以。
5.2 display
- display可选参数
- block:块元素
- inline:行内元素
- inline-block:是块元素,但是可以内联,在一行
- none:消失
5.2.1 基本展示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> div{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } span{ width: 100px; height: 100px; border: 1px solid red; display: inline-block; } </style> </head> <body> <div>div块元素</div> <span>span行内元素</span> </body> </html>
|
5.2.2 导航页展示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ会员</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="wrap"> <header class="nav-header"> <div class="head-contain"> <a href="" class="top-logo"><img src="images/pic.png" width="145" height="90"/></a> <nav class="top-nav"> <ul> <li><a href="">功能特权</a></li> <li><a href="">游戏特权</a></li> <li><a href="">生活特权</a></li> <li><a href="">会员特权</a></li> <li><a href="">成长体系</a></li> <li><a href="">年费专区</a></li> <li><a href="">超级会员</a></li> </ul> </nav> <div class="top-right"> <a href="">登录</a> <a href="">开通超级会员</a> </div> </div> </header> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| * { padding: 0; margin: 0; }
a { text-decoration: none; }
.nav-header { height: 90px; width: 100%; background: rgba(0, 0, 0, .6); }
.head-contain { width: 1180px; height: 90px; margin: 0 auto; text-align: center; }
.top-logo, .top-nav, .top-nav li, .top-right { height: 90px; display: inline-block; vertical-align: top; }
.top-nav { margin: 0 48px; }
.top-nav li { line-height: 90px; width: 90px; }
.top-nav li a { display: block; text-align: center; font-size: 16px; color: #fff; }
.top-nav li a:hover { color: blue; }
.top-right a { display: inline-block; font-size: 16px; text-align: center; margin-top: 25px; border-radius: 35px; }
.top-right a:first-of-type { width: 93px; height: 38px; line-height: 38px; color: #fad65c; border: 1px #fad65c solid; }
.top-right a:first-of-type:hover { color: #986b0d; background: #fad65c; }
.top-right a:last-of-type { width: 140px; height: 40px; font-weight: 700; line-height: 40px; background: #fad65c; color: #986b0d; }
.top-right a:last-of-type:hover { background: #fddc6c; }
|
5.3 float
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <div id="father"> <div class="layer01"><img src="images/1.png" alt=""></div> <div class="layer02"><img src="images/2.png" alt=""></div> <div class="layer03"><img src="images/3.png" alt=""></div> <div class="layer04"> 浮动的盒子可以向左浮动,也可以向右浮动,知道它的外边缘碰到包含或另一个浮动盒子为止 </div> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| div{ margin: 10px; padding: 5px; } #father{ border: 1px #000 solid; } .layer01{ border: 1px #F00 dashed; display: inline-block; float: left; clear: both; } .layer02{ border: 1px #00F dashed; display: inline-block; float: left; clear: both; } .layer03{ border: 1px #060 dashed; display: inline-block; float: left; clear: both; } .layer04{ border: 1px #666 dashed; font-size: 12px; line-height: 23px; float: left; clear: both; }
|
5.4 overflow及父级边框塌陷问题
- clear
- right:右侧不允许有浮动元素
- left:左侧不允许有浮动元素
- both:两侧不允许有浮动元素
- none
5.4.1 增加父级元素的高度
1 2 3 4
| #father{ border: 1px #000 solid; height: 800px; }
|
5.4.2 增加一个空的div标签
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
| div{ margin: 10px; padding: 5px; } #father{ border: 1px #000 solid; height: 800px; } .layer01{ border: 1px #F00 dashed; display: inline-block; float: left; } .layer02{ border: 1px #00F dashed; display: inline-block; float: left; } .layer03{ border: 1px #060 dashed; display: inline-block; float: right; }
.layer04{ border: 1px #666 dashed; font-size: 12px; line-height: 23px; display: inline-block; float: right; clear: left; } .clear{ clear: both; margin: 0; padding: 0; }
|
5.4.3 父级元素overflow:hidden
- ```html
overflow: hidden/隐藏/
overflow: scoll/滚动/1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
<style> #content{ width: 200px; height: 150px; overflow: scroll; } </style> </head> <body>
<div id="content"> <img src="images/1.png" alt=""> <p> 某雌性生物醉倒在草地上,路人对其上下其手,并在草地上翻滚,一番折腾后某雌性生物迷迷糊糊醒来步履蹒跚地离开了 </p> </div> </body> </html>
|
5.4.4 父类添加一个伪类:after
5.4.5 总结
- 浮动元素增加空div——》简单、代码尽量避免空div
- 设置父元素的高度——-》简单,元素假设没有了固定的高度,就会超出
- overflow——》简单,下拉的一些场景避免使用
- 父类添加一个伪类:after(推荐)——》写法稍微复杂,但是没有副作用,推荐使用
5.5 display与float对比
- display:方向不可以控制
- float:浮动起来的话会脱离标准文档流,所以要解决父级边框塌陷的问题。
6. 定位
6.1 相对定位
position: relative; 相对定位 上下左右
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>相对定位</title>
<style> body { padding: 20px; }
div { margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; }
.father { border: 1px solid #666; }
#first { border: 1px dashed red; background-color: yellow; position: relative; top: 20px; }
#second { border: 1px dashed blue; background-color: green; position: relative; left: 20px; }
#third { border: 1px dashed orange; background-color: pink; position: relative; bottom: 20px; }
</style> </head> <body> <div class="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div>
</body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>practice</title> <style> * { margin: 0; padding: 0; text-decoration: none; }
body { padding: 20px; }
.father { width: 300px; height: 300px; border: 5px solid pink; text-align: center; margin: 0 auto; }
a { width: 100px; height: 100px; background-color: mediumpurple; line-height: 100px; text-align: center; color: whitesmoke; display: block; }
a:hover { background-color: #986b0d; }
#two, #four { position: relative; left: 200px; top: -100px; }
#five { position: relative; left: 100px; top: -300px; } </style> </head> <body> <div class="father"> <a href="#" id="one">链接1</a> <a href="#" id="two">链接2</a> <a href="#" id="three">链接3</a> <a href="#" id="four">链接4</a> <a href="#" id="five">链接5</a> </div> </body> </html>
|
6.2 绝对定位
- 相对定位,基于:
- 没有父级元素定位的前提下,相对于浏览器定位
- 假设父级元素存在定位,我们通常会相对于父级元素进行偏移
- 在父级元素范围内移动
- 总结:相对一父级或浏览器的位置,进行指定的偏移,绝对定位的话,它不在标准文档流中,原来的位置不会被保留
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绝对定位</title> --> <style> div { margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; }
#father { border: 1px solid #666; padding: 0; position: relative; }
#first { background-color: #a13d30; border: 1px dashed #b27530;
}
#second { background-color: green; border: 1px dashed #0ece4f; position: absolute; right: 30px; top: 30px }
#third { background-color: red; border: 1px dashed #ff1b87; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html>
|
6.3 固定定位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 1000px; }
div:nth-of-type(1) { width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; }
div:nth-of-type(2) { width: 50px; height: 50px; background: yellow; position: fixed; right: 0; bottom: 0; } </style> </head> <body>
<div>div1</div> <div>div2</div> </body> </html>
|
6.4 Z-index
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="content"> <ul> <li><img src="images/2.png" alt=""></li> <li class="tiptext">study</li> <li class="tipBg"></li> <li>时间:2023.1.1</li> <li>地点:火星</li> </ul> </div> </body> </html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| #content { width: 380px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid black; }
ul, li { padding: 0px; margin: 0px; list-style: none; }
#content ul { position: relative; }
.tiptext, .tipBg { position: absolute; width: 380px; height: 25px; top: 90px; }
.tiptext { z-index: 999; }
.tipBg { background-color: white; opacity: 0.7; }
|