1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html基础复习</title> 6 </head> 7 <body> 8 <!-- 前端: 用户可见的所有界面均是前端(PC端/移动端) --> 9 <!-- html: 页面架构搭建 | css: 页面布局样式 | js: 页面交互渲染 --> 10 <!-- 编辑器: webstrom | sublime | atom | pycharm --> 11 12 <!-- 标签: <字母开头 + 合法字符(数字|-)> => (标签具有作用域,有头有尾) <abc> | <num1> | <nav-title> --> 13 <!-- 指令: <!doctype html> 注释 --> 14 <!-- 转移字符: ≷ --> 15 16 <!-- 基本标签: div | span | hn | p | ul>li | hr | br | form>input | table>tr>th(td) | a | img | b | i | meta | link | script | style --> 17 18 <!-- 分类: 单双 | dispaly --> 19 <!-- inline: span | b | i | a --> 20 <!-- inline-block: img | input --> 21 <!-- block: div | hn | p | ul | hr | br --> 22 </body> 23 </html> 24 25 26 <!DOCTYPE html> 27 <html> 28 <head> 29 <meta charset="UTF-8"> 30 <title>css复习</title> 31 </head> 32 <body> 33 <!-- 1.css三种引入: 行间式 | 内联式 | 外联式 --> 34 <!-- 选择器 作用域 样式块 --> 35 36 37 <!-- 2.长度单位: px | em | rem | cm | mm | vw | vh | in --> 38 39 <!-- 3.颜色: rgb(0, 255, 189) | rgba(0,0,0, 0~1) | red | #000000~#FFFFFF --> 40 41 <!-- 4.文本样式 --> 42 <style> 43 span { 44 font: 900 normal 30px/100px '首选字体', '备用字体1', '备用字体2'; 45 text-align: center; 46 color: red; 47 text-decoration: underline; 48 letter-spacing: 3px; 49 word-spacing: 10px; 50 text-indent: 2em; 51 } 52 </style> 53 54 <!-- 5.选择器 --> 55 <style type="text/css"> 56 /*选择器： css连接html标签的桥梁，建立连接后就可以控制标签样式*/ 57 /*标签 类 id*/ 58 /*组合选择器*/ 59 /*伪类选择器*/ 60 61 /*优先级：*/ 62 /*基础选择器： !important > id > 类[属性] > 标签 > 通配*/ 63 /*组合选择器: 权重(同类型个数比较)*/ 64 .b > .s {} 65 .b .s {} 66 .b + .s {} 67 .b.s {} 68 .b[class] {} 69 70 #ss { font-size: 50px; } 71 span.s2 { font-size: 40px; } 72 [class] { font-size: 35px; } 73 .s1 { font-size: 30px; } 74 span { font-size: 20px!important; } 75 76 /* 标签名 | . | # */ 77 /*后代"空格"(子代) | 兄弟"~"(相邻) | 群组"," | 交集"紧挨着"*/ 78 /* [属性名="属性值"] */ 79 80 </style> 81 82 <span class="s1 s2" id="ss" style="font-size: 60px;">12345</span> 83 84 <style type="text/css"> 85 /* 伪类选择器 */ 86 /* :link :hover(鼠标悬浮) :active(鼠标点击中) :visited */ 87 /* :nth-child() 先位置后类型 :nth-of-type() 先类型后位置 */ 88 /* :not() */ 89 /* :before(盒子渲染前) :after(盒子渲染后) :focus(表单标签获取焦点) */ 90 p:nth-child(3) { font-size: 100px } 91 p:nth-of-type(2n) { font-size: 50px } 92 </style> 93 <div class="box"> 94 <span>span</span> 95 <p>pp1</p> 96 <p>pp2</p> 97 </div> 98 99 <!-- 6.精灵图 --> 100 <style type="text/css"> 101 .pg { 102 width: 200px; 103 height: 200px; 104 border: 1px solid black; 105 position: absolute; 106 top: 10px; 107 left: calc(50vw - 100px); 108 } 109 .pg { 110 background: url('img/bg.png') no-repeat; 111 /*将背景图片的具体位置移至显示区域*/ 112 background-position: -300px -350px; 113 } 114 </style> 115 <div class="pg"></div> 116 </body> 117 </html> 118 119 120 <!DOCTYPE html> 121 <html> 122 <head> 123 <meta charset="UTF-8"> 124 <title>盒模型复习</title> 125 <style type="text/css"> 126 abc { 127 display: inline-block; 128 } 129 130 .box { 131 background: orange; 132 133 /*文本类型的样式具有继承关系*/ 134 font-size: 30px; 135 font-weight: 900; 136 /*inline-block不会继承*/ 137 text-decoration: underline; 138 text-indent: 2em; 139 line-height: 60px; 140 } 141 </style> 142 </head> 143 <body> 144 <!-- 文本属性通过拥有继承关系: 子标签没有设置文本属性时,值会从父级中获取(父级如果没有设置,会找到html) --> 145 146 <div class="box"> 147 <span>inline</span> 148 <div>block</div> 149 <abc>inline-block</abc> 150 </div> 151 152 <!-- 1.盒子的四个组成部分 --> 153 <!-- content | padding | border | margin --> 154 <!-- display: inline | inline-block | block --> 155 156 <!-- content: 提高给内容(文本,图片,子标签整个盒子)的显示区域 --> 157 158 <!-- padding: 介于border与content之间的距离, 可以撑开border与content之间的距离, 没有自身颜色(透出背景颜色),只有区域 --> 159 <!-- 注: padding-top可以将自身与自身第一个子级分离 --> 160 <style type="text/css"> 161 .p { 162 width: 20px; 163 height: 20px; 164 background: red; 165 } 166 .b { 167 width: 100px; 168 padding-bottom: 100px; 169 border-bottom: 1px solid black; 170 } 171 .c { 172 background: pink; 173 /*border: 1px solid black;*/ 174 border-style: solid; 175 padding-left: 32px; 176 padding-bottom: 32px; 177 margin-left: 32px; 178 /*text-indent: 2em;*/ 179 } 180 </style> 181 <div class="b"> 182 <div class="p"></div> 183 </div> 184 <div class="c">123</div> 185 186 <!-- border: 边框, 有宽度颜色样式, 如果给颜色设置透明也可以透出背景颜色 --> 187 188 <!-- margin: 控制盒子位置 => 盒模型布局 --> 189 190 <!-- 2.边界圆角 --> 191 <style type="text/css"> 192 .bj { 193 width: 100px; 194 height: 100px; 195 background: pink; 196 } 197 .bj { 198 /*border-radius: 20px;*/ 199 /*border-radius: 40%;*/ 200 /*border-radius: 10px 30px 50px;*/ 201 border-radius: 10px / 50px; 202 } 203 </style> 204 <div class="bj"></div> 205 206 <!-- 3.display --> 207 208 <!-- 4.margin布局 --> 209 <!-- i) margin-top | margin-left 完成自身布局, 右下两个方向影响兄弟 --> 210 <style type="text/css"> 211 .hh { 212 width: 30px; 213 height: 30px; 214 background: black; 215 /*display: inline-block;*/ 216 float: left; 217 /*自身动,控制自身布局*/ 218 /*margin-top: 30px;*/ 219 /*margin-left: 30px;*/ 220 221 /*右兄弟动,辅助兄弟布局*/ 222 margin-right: 100px; 223 /*下兄弟动,辅助兄弟布局*/ 224 /*margin-bottom: 30px;*/ 225 } 226 .xx { 227 width: 30px; 228 height: 30px; 229 background: red; 230 /*display: inline-block;*/ 231 float: left; 232 } 233 </style> 234 <div class="hh"></div> 235 <div class="xx"></div> 236 237 <!-- ii) 上下间距会重叠取大值, 左右间距会叠加 --> 238 <!-- 坑1: 父子联动 坑2: 上兄弟下margin和下兄弟上margin重叠取大值 --> 239 <style type="text/css"> 240 .x, .z { 241 width: 50px; 242 height: 50px; 243 background: blue; 244 } 245 .x { 246 /*margin-bottom: 40px;*/ 247 } 248 .z { 249 margin-top: 10px; 250 background: yellow; 251 } 252 .y { 253 width: 10px; 254 height: 10px; 255 background: red; 256 /*margin-top: 10px;*/ 257 } 258 /*坑1解决方案*/ 259 .y { 260 /*方案1*/ 261 /*float: left; 262 margin-top: 10px;*/ 263 264 /*方案2*/ 265 /*position: relative;*/ 266 position: absolute; 267 /*top: auto;*/ 268 /*top: 20px;*/ 269 margin-top: 20px; 270 } 271 .z { 272 /*position: relative;*/ 273 } 274 </style> 275 <div class="x"></div> 276 <div class="z"> 277 <div class="y"></div> 278 </div> 279 </body> 280 </html>