标签：jpg cal beta 初识 合并 顺时针 www. 基本选择器 tps
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>初识html</title> 6 </head> 7 <body> 8 <!-- 9 什么是 HTML？ 10 HTML 是用来描述网页的一种语言。 11 HTML 指的是超文本标记语言 (Hyper Text Markup Language) 12 HTML 不是一种编程语言，而是一种标记语言 (markup language) 13 标记语言是一套标记标签 (markup tag) 14 HTML 使用标记标签来描述网页 15 16 HTML 标签(元素) 17 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 18 HTML 标签是由尖括号包围的关键词，比如 <html> 19 HTML 标签通常是成对出现的，比如 <b> 和 </b> 20 标签对中的第一个标签是开始标签，第二个标签是结束标签 21 开始和结束标签也被称为开放标签和闭合标签 22 23 HTML 文档 = 网页 24 HTML 文档描述网页 25 HTML 文档包含 HTML 标签和纯文本 26 HTML 文档也被称为网页 27 Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。 28 浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容. 29 --> 30 </body> 31 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 a{ 8 /*去掉a的下划线*/ 9 text-decoration: none; 10 } 11 </style> 12 </head> 13 <body> 14 <a href="" id="box">我是顶部的a标签</a> 15 <!--h1在一个页面上出现一次 h2-h6自己分配--> 16 <h1 class="box box1 box2">我是h1标签</h1> 17 <h2 class="box box1 box3">我是h2标签</h2> 18 <h3 id="box1">我是h3标签</h3> 19 <h4>我是h4标签</h4> 20 <h5>我是h5标签</h5> 21 <h6>我是h6标签</h6> 22 我是外面的 23 24 <h2>段落标签</h2> 25 <p> 26   在您开始之前,在你的计算机将需要Python，但您可能不需要下载它。 首先检查(在命令行窗口输入python)有没有安装<b>Python</b> !如果你看到了一个Python解释器的响应，那么就能在她的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向后兼容。 27 </p> 28 <p> 29   如果您需要安装， 您不妨下载最近稳定的版本。 就是那个以没有被标记作为alpha或Beta发行的最高的版本。目前最稳定的版本是Python3.0以上 30 </p> 31 <h2>粗体标签</h2> 32 <!--b标签 只是物理加粗 strong 不仅加粗 还利于seo搜索--> 33 <b>我是B标签</b> 34 <strong>我是strong标签</strong> 35 我是写在外面的 36 <h2>斜体标签</h2> 37 <!--i标签 只是斜体 em 不仅斜体 还利于seo搜索--> 38 <!--br 换行标签 hr水平线标签--> 39 <i>我是i标签</i><br> 40 <em>我是em标签</em><hr> 41 我是写在外面的 42 <h2>特殊符号</h2> 43 <p> 44 小于号：---<<br> 45 大于号：---><br> 46 空格符号：---12 34<br> 47 空白位：---12 34<br> 48 版权符号：---© 49 </p> 50 51 <h2>a标签</h2> 52 <!--href 是a标签的标签属性--> 53 <!-- 54 target属性 55 _self 当前页面打开 默认 56 _blank 在新窗口打开 57 --> 58 <a href="http://www.baidu.com" target="_blank">点击去百度</a> 59 <a href="#box">锚点</a> 60 <!-- 61 只有拥有name属性的a标签才有锚点 62 其他标签可以通过id属性实现锚点 63 --> 64 <a href="javascript:void(0);">死链接</a> 65 <a href="#">回到顶部</a> 66 <!-- 67 HTML书写规范 68 1.名字用小写字母 69 2.以英文开头，可以包含英文字母，数字，_，-，不能使用中文 70 3.驼峰命名 71 className 第二个单词首字母大写 72 4.id命名 73 id只能有一个名字，而且在页面中相同的名字只能出现一次，相当于身份证号码一样 74 5.class命名 75 class可以出现多次，而且相同的名字可以有多个，相当于人名一样 76 --> 77 </body> 78 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 </head> 8 <body> 9 <img src="htts://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2150780143,1380810452&fm=58&bpow=1372&bpoh=864" title="Python" height="288"> 10 11 12 <!-- 13 src 定义图片路径 相对、绝对 14 alt 图片描述，用于seo搜索 当图片路径错误的时候 会显示在页面上 15 width 定义图片宽度 16 height 定义图片高度 17 title 鼠标划入 有提示 18 当width/height只给一个值的时候，另一个值等比例缩放，然后不给默认图片大小 19 --> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 li{ 8 list-style: none;/*去掉li前面的默认*/ 9 } 10 </style> 11 </head> 12 <body> 13 14 <h2>无序列表</h2> 15 <!--tab--> 16 <!--ul>li*4 tab--> 17 <ul type="circle"> 18 <li>1</li> 19 <li>2</li> 20 <li>3</li> 21 <li>4</li> 22 </ul> 23 <!-- type 24 disc 默认 小黑圆点 25 circle 空心圆 26 square 小方框 27 --> 28 29 <h2>有序列表</h2> 30 <!--ol>li{$}*4 tab--> 31 <ol type="A"> 32 <li>1</li> 33 <li>2</li> 34 <li>3</li> 35 <li>4</li> 36 </ol> 37 <!-- 38 1 1 2 3 4 默认 39 a a b c d 40 A A B C D 41 I 42 i 43 --> 44 <h2>自定义列表</h2> 45 <dl> 46 <dt>前端</dt> 47 <dd>html</dd> 48 <dd>css</dd> 49 <dd>js</dd> 50 </dl> 51 </body> 52 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 50px; 10 background: #7feb5f; 11 /*display: inline;*/ 12 display: inline-block; 13 } 14 span{ 15 width: 300px; 16 height: 50px; 17 background: blue; 18 /*display: block;*/ 19 display: inline-block; 20 } 21 #box{ 22 background: green; 23 } 24 ul{ 25 display: none; 26 } 27 </style> 28 </head> 29 <body> 30 <div id="box">div1</div> 31 <div>div2</div> 32 <span>span1111</span> 33 <span>span2</span> 34 <div>div3</div> 35 <ul> 36 <li>1</li> 37 <li>2</li> 38 <li>3</li> 39 </ul> 40 <p>111</p> 41 <!-- 42 块级元素div display:block; 43 可以包含任何块和行内元素 44 独占一行，支持设置宽高 45 如果没有设置宽高，高度由内容撑开，宽度默认浏览器宽度 46 没有内容，在网页上肉眼看不到东西，但是审查元素，宽度是浏览器宽度，高度0 47 48 49 行内（内联）元素span display:inline; 50 可以和其他行内元素位于同一行 51 行内元素不要包块级元素 52 不支持设置宽高 53 内容撑开宽高 54 55 行内块元素 display:inline-block; 56 块级元素可以横排展示 57 行内元素可以设置宽高 58 元素既能设置宽高 也能排在一排 59 60 display:none 61 隐藏元素,包括他的子标签，在页面中不占位置，等同于消失了 62 --> 63 </body> 64 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 table{ 8 border-collapse: collapse; 9 /* 10 collapse 边框合并，如果相邻的话，共用一个框 11 separate 默认值，边框分开，不合并 12 */ 13 text-align: center;/*文字水平居中*/ 14 } 15 </style> 16 </head> 17 <body> 18 <table border="1"> 19 <caption><b>学员信息表</b></caption> 20 <thead> 21 <tr> 22 <th>姓名</th> 23 <th>班级</th> 24 <th>年龄</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr> 29 <td>杨梦飞</td> 30 <td>29</td> 31 <td rowspan="2">18</td> 32 </tr> 33 <tr> 34 <td>黄绍杰</td> 35 <td>30</td> 36 <!--<td>18</td>--> 37 </tr> 38 <tr> 39 <td>杨梦飞</td> 40 <td colspan="2">29</td> 41 <!--<td>29</td>--> 42 </tr> 43 </tbody> 44 </table> 45 </body> 46 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 background: red; 9 height: 200px; 10 width: 50px; 11 /*display: block;*/ 12 display: inline-block; 13 } 14 span{ 15 background: skyblue; 16 height: 200px; 17 width: 50px; 18 /*display: inline;*/ 19 display: inline-block; 20 } 21 </style> 22 </head> 23 <body> 24 <div>div</div> 25 <span>span</span> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 textarea{ 8 width: 200px; 9 height: 50px; 10 /*resize: none;*/ 11 resize: horizontal; 12 /*resize: vertical;*/ 13 } 14 </style> 15 </head> 16 <body> 17 <form action="" autocomplete="on" method="get"> 18 <!--action 规定当前提交表单向何处发送表单数据--> 19 <!--method 默认get post--> 20 <!--autocomplete自动完成，on输入框会提示 off输入框不会提示--> 21 <!--?name=value&name=value&name=on...--> 22 账号：<input type="text" name="user" placeholder="请输入你的账号"><br> 23 密码：<input type="password" name="psd" placeholder="请输入你的密码" required><br><br> 24 <!--required 必填字段--> 25 文件上传：<input type="file"><br><br> 26 单选框：<input type="radio" name="gender" value="1">男 27 <input type="radio" name="gender" value="2">女 28 <input type="radio" name="gender" value="3" id="box" disabled> 29 <label for="box">保密</label><br><br> 30 <!--checked 默认选中--> 31 <!--checked 默认选中--> 32 多选框：<input type="checkbox" name="hobby">爬山 33 <input type="checkbox" name="hobby">唱歌 34 <input type="checkbox" name="hobby" checked>逛街 35 <input type="checkbox" name="hobby">学习<br><br> 36 文本域：<textarea name="text"></textarea><br><br> 37 下拉框：<select size="2"> 38 <option value="1">东莞</option> 39 <option value="2">杭州</option> 40 <!--selected 规定在option里面默认展示第几项--> 41 <option value="3" selected>成都</option> 42 <option value="4">武汉</option> 43 <option value="5">山西</option> 44 </select> 45 <select name="" size="2"> 46 <!--size规定下拉列表中可见选项的数目--> 47 <option value="1">东莞</option> 48 <option value="2">杭州</option> 49 <!--selected 规定在option里面默认展示第几项--> 50 <option value="3">成都</option> 51 <option value="4" selected>武汉</option> 52 <option value="5">山西</option> 53 </select><br><br> 54 提交：<input type="submit" value="submit"><br><br> 55 重置：<input type="reset"> 56 </form> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!--外链css样式--> 7 <link rel="stylesheet" href="index.css"> 8 <style> 9 /*内嵌的css样式*/ 10 div{ 11 width: 100px; 12 height: 20px; 13 background: blue; 14 } 15 p{ 16 background: skyblue !important; 17 } 18 </style> 19 </head> 20 <body> 21 <!--css Cascading Style Sheet 层叠样式表——修饰、美化网页，化妆师 22 CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。 23 行间样式 > 内嵌css样式 > 外链css样式（在style之前引入） 24 --> 25 <div></div> 26 <!--行间样式--> 27 <p style="width: 100px;height: 20px;background: red;"></p> 28 <ul> 29 <li></li> 30 <li></li> 31 <li></li> 32 </ul> 33 </body> 34 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* *通配符选择器 匹配任何元素 */ 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 /*元素选择器 选择相同的元素对相同的元素设置一种css样式 选中页面中所有的此元素*/ 13 div{ 14 width: 200px; 15 height: 50px; 16 background: red; 17 } 18 /* id选择器 给标签设置一个id属性，在写样式时，在id名字前面加个 # */ 19 #box{ 20 background: gold; 21 } 22 23 /* class选择器 给标签设置一个class属性，在写样式时，在class名字前面加个.一般给具有相同属性的元素设置同一个class */ 24 .wrap{ 25 background: yellowgreen; 26 } 27 .box{ 28 background: yellowgreen; 29 } 30 31 32 </style> 33 </head> 34 <body> 35 <!--id > class > 标签(TagName) > *--> 36 <div class="wrap">1</div> 37 <div>2</div> 38 <div class="box" id="box" >3</div> 39 <div class="wrap">4</div> 40 <div>5</div> 41 <ul> 42 <li></li> 43 <li></li> 44 <li></li> 45 </ul> 46 <p>111</p> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开*/ 8 /*div,p{*/ 9 /*width: 100px;*/ 10 /*height: 50px;*/ 11 /*background: blue;*/ 12 /*}*/ 13 /*p{*/ 14 /*width: 100px;*/ 15 /*height: 50px;*/ 16 /*background: blue;*/ 17 /*}*/ 18 19 /* ~ 兄弟选择器 操作的对象是该元素下的所有兄弟元素*/ 20 /*.box ~ p{*/ 21 /*width: 100px;*/ 22 /*height: 50px;*/ 23 /*background: blue;*/ 24 /*}*/ 25 26 /*!* + 相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素*/ 27 .box+p,.box+p+p{ 28 width: 100px; 29 height: 50px; 30 background: blue; 31 } 32 33 /* > 子代选择器 选择某个元素下面的子元素*/ 34 div > ul{ 35 list-style: none; 36 } 37 </style> 38 </head> 39 <body> 40 <p>777</p> 41 <div class="box">1</div> 42 <p>p1</p> 43 <p>p2</p> 44 <div>1</div> 45 <p>p1</p> 46 <p>p2</p> 47 48 <ul> 49 <li>1</li> 50 <li>2</li> 51 <li>3</li> 52 </ul> 53 54 <div> 55 <ul> 56 <li>1 57 <ul> 58 <li>55</li> 59 <li>66</li> 60 </ul> 61 </li> 62 <li>2</li> 63 <li>3</li> 64 <li>4</li> 65 </ul> 66 </div> 67 </body> 68 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div ul{ 8 list-style: none; 9 } 10 11 </style> 12 </head> 13 <body> 14 <div> 15 <ul> 16 <li> 17 <ul> 18 <li>4</li> 19 <li>4</li> 20 <li>4</li> 21 <li>4</li> 22 </ul> 23 </li> 24 <li>2</li> 25 <li>3</li> 26 </ul> 27 </div> 28 29 <ul> 30 <li> 31 <ul> 32 <li>4</li> 33 <li>4</li> 34 <li>4</li> 35 <li>4</li> 36 </ul> 37 </li> 38 <li>2</li> 39 <li>3</li> 40 </ul> 41 </body> 42 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*首先是个ul标签 其次这个ul标签 class名字叫做box*/ 8 ul.box{ 9 list-style: none; 10 } 11 12 div ul.box{ 13 background: blue; 14 } 15 ol.box{ 16 background: brown; 17 } 18 #wrap2{ 19 background: blueviolet; 20 } 21 </style> 22 </head> 23 <body> 24 <!--id > class > tagName--> 25 <!--id > class > 标签--> 26 <!-- 27 复杂后代选择器 1 1 1 28 1.先比id(最高位) class（中间位） tagName（个数位） 29 1 2 3 30 2.id选择器个数不相等，id越多，优先级越高 31 3.id选择器个数相同,则看class,class多的优先级高 32 4.class个数相等，就看tagName个数 33 --> 34 <div> 35 <ul class="box" id="wrap2"> 36 <li>1</li> 37 <li>2</li> 38 <li>3</li> 39 <li>4</li> 40 </ul> 41 <ol class="box"> 42 <li id="wrap">1</li> 43 <li>2</li> 44 <li>3</li> 45 </ol> 46 </div> 47 48 <ul> 49 <li>1</li> 50 <li>2</li> 51 <li>3</li> 52 <li>4</li> 53 </ul> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 html{ 8 /*font-size: 20px;*/ 9 } 10 /*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/ 11 .box1{ 12 font-family: "华文中宋",Algerian; 13 } 14 /* 15 font-size 字体大小 16 单位 px rem % em 17 px 谷歌浏览器默认字体大小16px,最小是12px 18 rem 相对于html(根标签)的字体大小 19 em 等于父级的字体尺寸——相对于父级字体大小而言的 20 % 相对于父容器中字体的%调整 这个要知道 21 */ 22 .box2{ 23 font-size: 20px; 24 } 25 .box3{ 26 font-size: 25px; 27 } 28 .box4{ 29 font-size: 2rem; 30 } 31 .box5{ 32 font-size: 8px; 33 } 34 .wrap{ 35 font-size: 30px; 36 } 37 .wrap span{ 38 /*font-size: 2rem;*/ 39 /*font-size: 2em; 60px*/ 40 font-size: 200%; 41 } 42 /* 43 font-weight 字体粗细 44 关键字 45 normal 默认字体 46 lighter 较细 47 bold 加粗 这个要知道 48 bolder 很粗 49 给值 50 只能100-900的整百数 51 400相当于正常的 52 700相当于bold 53 */ 54 .box6{ 55 font-weight: bold; 56 } 57 .box7{ 58 font-weight: 900; 59 } 60 /* 61 font-style 字体类型 62 normal 默认 文字正常 63 italic 文字斜体（属性） 64 oblique 文字斜体 65 */ 66 .box8{ 67 font-style: italic; 68 } 69 /* 70 color 文字颜色 71 关键字 72 英文单词 red green 73 16进制（0-9 a-f） 74 #5544aa #54a #abd456 75 #dddddd #ddd 76 rgb(0-255,0-255,0-255) 77 r red 78 g green 79 b blue 80 rgba(0-255,0-255,0-255,0-1) 81 r red 82 g green 83 b blue 84 a alpha(透明度) 85 0 完全透明 86 1 完全不透明 87 */ 88 .box9{ 89 /*color: green;*/ 90 /*color: #ff4a4c;*/ 91 color: rgba(255,20,25,0.2); 92 } 93 .box10{ 94 color: rgb(255,20,25); 95 } 96 </style> 97 </head> 98 <body> 99 <!--div[class=box$]{内容}*10 tab--> 100 <div class="box1">hello Word 123</div> 101 <div class="box2">hello Word 123</div> 102 <div class="box3">hello Word 123</div> 103 <div class="box4">hello Word 123</div> 104 <div class="box5">hello Word 123</div> 105 <div class="box6">hello Word 123</div> 106 <div class="box7">hello Word 123</div> 107 <div class="box8">hello Word 123</div> 108 <div class="box9">hello Word 123</div> 109 <div class="box10">hello Word 123</div> 110 <div class="wrap"> 111 <span>hello Word 123</span> 112 </div> 113 </body> 114 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 white-space: 换行方式 9 normal 正常换行 10 nowrap 不换行 11 */ 12 div{ 13 width: 400px; 14 background: skyblue; 15 16 white-space: nowrap; 17 /*超出隐藏*/ 18 overflow: hidden; 19 /*省略号*/ 20 text-overflow: ellipsis; 21 height: 50px; 22 line-height: 50px; 23 } 24 /* 25 text-indent 首行缩进（em） 26 line-height 行高 ***** 27 letter-spacing 字距 28 word-spacing 词距 29 */ 30 p{ 31 text-indent: 2em; 32 line-height: 35px; 33 } 34 35 /* 36 text-align 文本水平对齐方式 37 left 默认值 向左对其 38 right 39 center ***** 40 */ 41 div{ 42 text-align: center; 43 } 44 span{ 45 background: brown; 46 } 47 /* 48 text-transform 文本大小写 49 none 默认值 无转换发生 50 uppercase 转换成大写 51 lowercase 转换成小写 52 capitalize 将英文单词的首字母大写 53 */ 54 55 /* 56 text-decoration: none; 57 text-decoration:line-through; 58 text-decoration:overline; 59 text-decoration:underline; 60 */ 61 a{ 62 text-decoration: none; 63 } 64 </style> 65 </head> 66 <body> 67 <div> 68 在您开始之前，在你的计算机将需要Python，但您可能不需要下载它。首先检查(在命令行窗口输入python)有没有安装Python!如果你看到了一个Python解释器的响应，那么就能在她的显示窗口中得到一个版本号。通常较新的版本都可以做到Python的向后兼容。 69 </div> 70 <p>如果您需要安装， 您不妨下载最近稳定的版本。 就是那个以没有被标记作为alpha或Beta发行的最高的版本。目前最稳定的版本是Python3.0以上</p> 71 <p>如果您需要安装， 您不妨下载最近稳定的版本。 就是那个以没有被标记作为alpha或Beta发行的最高的版本。目前最稳定的版本是Python3.0以上</p> 72 <div>999</div> 73 <span>999</span> 74 <a href="">去百度</a> 75 </body> 76 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*LoVeHAte*/ 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 a:link{/*link 未被点击的链接*/ 13 color: red; 14 } 15 a:visited{/*已被点击的链接*/ 16 color: skyblue; 17 } 18 a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/ 19 color: yellow; 20 } 21 a:active{/*鼠标已经再其上按下但是还没有释放的元素*/ 22 color: black; 23 } 24 div{ 25 width: 200px; 26 height: 200px; 27 background: blue; 28 } 29 /*div:hover{*/ 30 /*!*div:hover 改变的是div元素本身*!*/ 31 /*width: 200px;*/ 32 /*height: 200px;*/ 33 /*background: brown;*/ 34 /*}*/ 35 p{ 36 width: 100px; 37 height: 100px; 38 background: skyblue; 39 display: none; 40 } 41 /*div:hover p{*/ 42 /*!*div被划入的时候 改变的是div的后代p标签*!*/ 43 /*width: 100px;*/ 44 /*height: 100px;*/ 45 /*background: yellow;*/ 46 /*}*/ 47 div:hover p{ 48 display: block; 49 } 50 </style> 51 </head> 52 <body> 53 <a href="https://www.jd.com">去京东</a> 54 <div> 55 <p></p> 56 </div> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 500px; 9 height: 500px; 10 background-color: red; 11 /*background-image: url("img/01.jpg");*/ 12 /*background-repeat: no-repeat;*/ 13 /*!*background-repeat: repeat-x;*!*/ 14 /*!*background-repeat: repeat-y;*!*/ 15 /*background-size: 200px 300px;*/ 16 /*!*background-size: cover;*!*/ 17 /*!*background-size: contain;*!*/ 18 /*!*background-position: 50px 100px;*!*/ 19 /*background-position: top left;*/ 20 background: red url("img/01.jpg") no-repeat center/200px 300px; 21 } 22 /*background: color image repeat position/size*/ 23 /* 24 background-color 背景色 25 background-image 背景图片 26 background-repeat 背景平铺 27 repeat 平铺 默认 28 repeat-x 平铺x 29 repeat-y 平铺y 30 np-repeat 不平铺 31 注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果 32 33 background-position 背景位置 x轴 y轴 34 x轴 left center right 35 y轴 top center bottom 36 如果只给一个值，默认在x轴，y轴默认center(50%) 37 % px 38 39 background-size 背景大小 40 % px 41 给一个值的时候，默认x轴，y轴默认auto auto会等比缩放 42 cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片 43 contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片 44 */ 45 </style> 46 </head> 47 <body> 48 49 <div> 50 51 </div> 52 </body> 53 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 盒子模型 9 盒子是由内容(content)、内边距(padding)、外边距(margin)、边框(border)组成的 10 */ 11 /* 12 border:边框 类型 颜色; 13 border:width style color;复合样式 14 border-width 15 border-style solid实线 dashed虚线 dotted点线 double双边框 16 border-color 17 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 18 二个值的时候： 上下 右左 19 三个值的时候： 上 右左 下 20 四个值的时候： 上 右 下 左 21 22 border-width 边框大小 23 border-top-width 上边框大小 24 border-right-width 右边框大小 25 border-bottom-width 下边框大小 26 border-left-width 左边框大小 27 border-top-width:0 28 29 border-style 边框样式 30 border-top-style 顶部边框类型 31 border-right-style 右边边框类型 32 border-bottom-style 底部边框类型 33 border-left-style 左边边框类型 34 35 border-color 边框颜色 36 border-top-color 顶部边框颜色 37 border-right-color 右边边框颜色 38 border-bottom-color 底部边框颜色 39 border-left-color 左边边框颜色 40 */ 41 div{ 42 width: 200px; 43 height: 200px; 44 background: blue; 45 border: 2px solid red; 46 } 47 p{ 48 width: 200px; 49 height: 200px; 50 border-width: 20px 5px; 51 border-style: solid double dotted; 52 border-color: red blue yellow blueviolet; 53 } 54 </style> 55 </head> 56 <body> 57 <div></div> 58 <p></p> 59 </body> 60 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /* 8 padding 内边距，边框与内容之间的距离 9 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 10 二个值的时候： 上下 右左 11 三个值的时候： 上 右左 下 12 四个值的时候： 上 右 下 左 13 */ 14 div{ 15 width: 200px; 16 height: 200px; 17 border: 2px solid red; 18 /*padding: 20px;*/ 19 /*padding: 50px 30px;*/ 20 padding-top: 50px; 21 } 22 </style> 23 </head> 24 <body> 25 <div>8888</div> 26 </body> 27 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 /* 12 margin 外边距 元素与其他元素的距离（边框以外的距离） 13 一个值的时候： 代表四个方向值一样 上右下左（顺时针） 14 二个值的时候： 上下 右左 15 三个值的时候： 上 右左 下 16 四个值的时候： 上 右 下 左 17 margin: auto; 快速左右居中 18 垂直方向： margin-bottom,margin-top 取两者之间的较大值 19 水平方向： margin-left,margin-right 取两者的和 20 overflow:hidden; 解决内边距重叠问题 21 border 22 */ 23 div{ 24 width: 200px; 25 height: 200px; 26 /*border: 1px solid red;*/ 27 /*display: inline-block;*/ 28 /*margin: 50px;*/ 29 /*margin: 50px auto;*/ 30 /*margin: 20px 30px 40px 50px;*/ 31 } 32 .wrap{ 33 width: 200px; 34 height: 200px; 35 /*border: 1px solid red;*/ 36 background: blue; 37 /*解决内边距重叠*/ 38 overflow: hidden; 39 /*border: 1px solid red;*/ 40 } 41 .box{ 42 width: 100px; 43 height: 100px; 44 background: yellow; 45 margin: 50px; 46 } 47 </style> 48 </head> 49 <body> 50 <!--<div></div><div style="margin-left: 100px;"></div>--> 51 <div class="wrap"> 52 <div class="box"></div> 53 </div> 54 </body> 55 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 100px; 10 background: red; 11 border: 10px solid blue; 12 padding: 50px; 13 margin: 50px; 14 } 15 /* 16 盒子大小=样式宽 + 内边距 + 边框 17 盒子宽度=左border+右border+width+左padding+右padding 18 盒子高度=上border+下border+height+上padding+下padding 19 */ 20 </style> 21 </head> 22 <body> 23 <div></div> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 div{ 12 width: 20px; 13 height: 20px; 14 background: rebeccapurple; 15 padding: 50px; 16 } 17 span{ 18 /*padding 对于行内元素而言 只有左右有效果*/ 19 background: yellow; 20 /*padding: 50px;*/ 21 padding: 0 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <div>1</div> 27 <div>2</div> 28 <span>3</span> 29 <span>4</span> 30 <div>1</div> 31 <div>2</div> 32 </body> 33 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 /* 12 浮动的定义：使元素脱离文档流，按照指定（左右）方向发生移动，遇到父级边界或者相邻的浮动元素停下来。 13 文档流:是文档中可显示对象在排列时所占用的位置/空间（在页面中占位置） 14 脱离文档流 ：在页面中不占位置 15 16 17 清除浮动 18 1.给父级增加高度（不推荐使用） 19 2.给父级加overflow:hidden; 20 3.给父级加一个类 21 .clearfix::after{ 22 content: ""; 23 display: block; 24 clear: both; 25 } 26 浮动的特点 27 如果只给前面的元素浮动，后面的要占据他的位置 28 造成高度坍塌 29 30 子元素浮动 父元素清楚浮动 31 */ 32 ul{ 33 border: 1px solid red; 34 /*width: 100px;*/ 35 /*height: 100px;*/ 36 /*overflow: hidden;*/ 37 } 38 39 .clearfix ::after{ 40 /*内容*/ 41 content: ""; 42 display: block; 43 clear: both; 44 } 45 46 ul li{ 47 list-style: none; 48 width: 50px; 49 height: 50px; 50 background: rebeccapurple; 51 /*float: left;*/ 52 float: right; 53 54 /*圆角 可以有1,2,3,4个值*/ 55 border-radius: 50% 20px 10px 5px; 56 text-align: center; 57 line-height: 50px; 58 } 59 div{ 60 width: 500px; 61 height: 200px; 62 background: yellow; 63 /*float: left;*/ 64 } 65 p{ 66 width: 700px; 67 background: red; 68 height: 30px; 69 } 70 </style> 71 </head> 72 <body> 73 <ul class="clearfix"> 74 <li>1</li> 75 <li>2</li> 76 <li>3</li> 77 <li>4</li> 78 <!--<li>1</li>--> 79 <!--<li>2</li>--> 80 <!--<li>3</li>--> 81 <!--<li>4</li>--> 82 <!--<li>1</li>--> 83 <!--<li>2</li>--> 84 <!--<li>3</li>--> 85 <!--<li>4</li>--> 86 </ul> 87 <div></div> 88 <p></p> 89 </body> 90 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 /* 12 position 定位 13 static 静态定位（没有定位），默认 14 relative 相对定位，相对于正常位置(原来没定位之前的位置)进行定位，还要占据位置 15 absolute 绝对定位，没有占据位置，使元素完全脱离文档流 16 没有定位父级，则相对于整个文档发生偏移 17 参考最近非static定位的父级进行定位 18 fixed 固定定位，相对于浏览器窗口进行定位 19 方向词 20 left 21 right 22 top 23 bottom 24 25 margin-left 26 z-index 规定定位的层级（默认0） 27 值：number 值越大层级越高 28 29 */ 30 31 .box{ 32 width: 200px; 33 height: 200px; 34 background: rebeccapurple; 35 /*position: relative;*/ 36 /*top: 50px;*/ 37 /*left: -118px;*/ 38 /*margin: 50px auto;*/ 39 40 position: absolute; 41 /*会使margin auto失效*/ 42 /*margin: 50px auto;*/ 43 /*margin: 50px;*/ 44 /*top: 50px;*/ 45 bottom: 30px; 46 } 47 .wrap{ 48 width: 300px; 49 height: 300px; 50 background: red; 51 } 52 </style> 53 </head> 54 <body style="height: 2000px;width: 2000px"> 55 <div class="box"></div> 56 <div class="wrap"></div> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 border: 1px solid blue; 13 width: 100px; 14 height: 100px; 15 position: relative; 16 margin: 50px auto; 17 } 18 li{ 19 list-style: none; 20 width: 100px; 21 height: 100px; 22 position: absolute; 23 } 24 .box1{ 25 background: rebeccapurple; 26 /*z-index: 2;*/ 27 } 28 .box2{ 29 background: red; 30 } 31 .box3{ 32 background: yellow; 33 } 34 .box4{ 35 background: aqua; 36 /*z-index: 1;*/ 37 z-index: -1; 38 } 39 </style> 40 </head> 41 <body> 42 <ul> 43 <li class="box1"></li> 44 <li class="box2"></li> 45 <li class="box3"></li> 46 <li class="box4"></li> 47 </ul> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 300px; 14 background: rebeccapurple; 15 margin: 50px auto; 16 position: relative; 17 } 18 .fix{ 19 width: 200px; 20 height: 200px; 21 background: yellow; 22 position: relative; 23 top: 50px; 24 } 25 .wrap{ 26 width: 100px; 27 height: 100px; 28 background: red; 29 position: absolute; 30 top: 50px; 31 } 32 p{ 33 width: 100px; 34 height: 100px; 35 background: red; 36 /*position: absolute;*/ 37 position: fixed; 38 bottom: 100px; 39 right: 100px; 40 } 41 </style> 42 </head> 43 <body style="height: 2000px;width: 2000px"> 44 <div class="box"> 45 <div class="fix"> 46 <div class="wrap"></div> 47 </div> 48 </div> 49 50 <p></p> 51 </body> 52 </html>
标签：jpg cal beta 初识 合并 顺时针 www. 基本选择器 tps
原文地址：https://www.cnblogs.com/gkl123/p/9808157.html
