4.4 各元素之间的转换
<!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>元素显示模式转换</title> <style> a { width: 150px; height: 50px; background-color: pink; /* 把行内元素 a 转换为 块级元素 */ display: block; } div { width: 300px; height: 100px; background-color: purple; /* 把 div 块级元素转换为行内元素 */ display: inline; } span { width: 300px; height: 30px; background-color: skyblue; display: inline-block; } </style> </head> <body> <a href="#">金星阿姨</a> <a href="#">金星阿姨</a> <div>我是块级元素</div> <div>我是块级元素</div> <span>行内元素转换为行内块元素</span> <span>行内元素转换为行内块元素</span> </body> </html>
5. snipaste的学习
通过该工具进行开发的实例，通过该工具截图以及查看所作行的宽高以及颜色：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米侧边栏</title> <style> a { display: block; width: 283px; height: 35px; text-decoration: none; color: #fff; background-color: #55585a; text-indent: 2em; } a:hover { background-color: #ff6700; } </style> </head> <body> <a href="#">手机 电视卡</a> <a href="#">电视 盒子</a> <a href="#">笔记本 平板</a> <a href="#">出行 穿戴</a> <a href="#">智能 路由器</a> <a href="#">健康 儿童</a> <a href="#">耳机 音响</a> </body> </html>
让文字垂直居中的一个解决方法：line-height（行高）
