<!-- 这是第一题 --> <!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> /* 标签选择器 */ div { background-color: aqua; color: chartreuse } /* 类选择器 */ .class { background-color: blanchedalmond; color: coral } /* id选择器 */ #id { background-color: darkgray; color: black; } </style> </head> <body> <div class="class" id="id">盒子模型</div> </body> </html>
这是第二题
.box { /* padding */ padding-top: 20px; padding-right: 30px; padding-bottom: 40px; padding-left: 50px; /* 简写padding */ padding: 20px 30px 40px 50px; /* 这是背景颜色 */ background-color: aqua; /* 上边框 */ border-top-color: red; border-top-style: double; border-top-width: 50px; /* 右边框 */ border-right-color: silver; border-right-style: dotted; border-right-width: 80px; /* 下边框 */ border-bottom-color: tomato; border-bottom-style: groove; border-bottom-width: 11px; /* 左边框 */ border-left-color: yellow; border-left-style: solid; border-left-width: 100px; /* 简写边框 */ border-top: red double 50px; border-right: silver dotted 80px; border-bottom: tomato groove 11px; border-left: yellow solid 100px; }
<!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> <link rel="stylesheet" href="css.css"> </head> <body> <div class="box"> <h1>这是一个大盒子,演示用的</h1> </div> </body> </html>