![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
yu&2022
菜鸟程序员
展开
-
21.z-index
21.z-index html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>z-index</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <div id="content">原创 2021-02-24 10:27:19 · 69 阅读 · 0 评论 -
20.定位
20.定位 ①默认情况 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>默认情况</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="father"> &原创 2021-02-24 10:26:40 · 51 阅读 · 0 评论 -
19.float
19.float html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="father"> <原创 2021-02-24 10:24:30 · 117 阅读 · 0 评论 -
18.display
18.display html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>display</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div>块元素</div>原创 2021-02-24 10:23:23 · 72 阅读 · 0 评论 -
17.阴影
17.阴影 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阴影</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div></div> </body>原创 2021-02-24 10:22:27 · 86 阅读 · 0 评论 -
16.圆角边框
16.圆角边框 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角边框</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div></div> </body原创 2021-02-23 09:52:43 · 102 阅读 · 0 评论 -
15.内外边距及div居中
15.内外边距及div居中 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="box"> <h2原创 2021-02-23 09:51:55 · 120 阅读 · 0 评论 -
14.盒子模型及边距
14.盒子模型及边距 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子模型</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="box"> <h2>原创 2021-02-23 09:51:17 · 50 阅读 · 0 评论 -
13.渐变
13.渐变 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>渐变</title> <link rel="stylesheet" href="css/style.css"> </head> <body> </body> </html> css: bo原创 2021-02-23 09:50:23 · 131 阅读 · 0 评论 -
12.背景
12.背景 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="div1"></div>原创 2021-02-23 09:49:41 · 56 阅读 · 0 评论 -
11.列表
11.列表 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/style.css"> <title>列表样式</title> </head> <body> <div id="nav"> <h2 cla原创 2021-02-23 09:49:00 · 114 阅读 · 0 评论 -
10.超链接伪类
10.超链接伪类 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <a href="#"> <img原创 2021-02-23 09:48:25 · 86 阅读 · 0 评论 -
9.文本样式
9.文本样式 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>斗破苍穹故事简介</h1> <原创 2021-02-23 09:47:43 · 66 阅读 · 0 评论 -
8.字体样式
8.字体样式 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式</title> <link rel="stylesheet" href="css/style01.css"> </head> <body> <h3>斗破苍穹故事简介</h3> &l原创 2021-02-23 09:46:59 · 173 阅读 · 0 评论 -
7.span
7.span html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> 欢迎学习<span id="Hi">CSS</s原创 2021-02-23 09:46:14 · 80 阅读 · 0 评论 -
6.属性选择器
6.属性选择器 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <p class="demo"> <a原创 2021-02-22 19:49:04 · 54 阅读 · 0 评论 -
5.结构伪类选择器
5.结构伪类选择器 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style01.css"> </head> <body> <!--<h3>h3</h3&g原创 2021-02-22 19:48:38 · 98 阅读 · 0 评论 -
4.层次选择器
4.层次选择器 ①后代选择器 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="css/style01.css">--> <!-- <link rel="stylesheet"原创 2021-02-22 19:47:59 · 108 阅读 · 0 评论 -
3.基本选择器
3.基本选择器 ①标签选择器 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style01.css"> </head> <body> <h1>标题1</h1>原创 2021-02-22 19:45:34 · 67 阅读 · 0 评论 -
2.导入方式
导入方式 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--内部样式--> <style> h1{ color: red; } </style> <!--外部样式-->原创 2021-02-22 19:43:57 · 50 阅读 · 0 评论 -
1.我的第一个CSS程序
我的第一个CSS程序 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style>可以编写css的代码,每一个声明,最好使用分号结尾 语法: 选择器{ 声明1; 声明2;原创 2021-02-22 19:42:41 · 108 阅读 · 0 评论