实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS常用选择器</title> <link rel="stylesheet" href="static/css/style01.css"> </head> <body> <!-- 演示基本选择器 --> <ul> <li>1</li> <li id="bg-blue">2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <!-- 演示伪类选择器中的子元素与类型选择器之间的区别与联系 --> <div> <p>猪哥</p> <li>朱老师</li> <p>西门大官人</p> </div> <div> <p>灭绝师太</p> <li>韦小宝</li> </div> <!-- 演示表单选择器 --> <form action=""> <label for="email">邮箱:</label> <input type="email"> <label for="password">密码:</label> <input type="password"> <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label> <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label> <button>登录</button> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css一些常用选择器。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style04.css"> <title>捉摸不定的外边距(margin)</title> </head> <body> <!-- 1.同级塌陷 2.嵌套传递 3.自动挤压 --> <div class="box1"></div> <div class="box2"></div> <hr> <div class="box3"> <div class="box4"></div> </div> <hr> <div class="box5"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
奇怪的外边距
通过这次作业，我学到了css选择器和奇怪的外边距
1.同级塌陷
2.嵌套传递
3.自动挤压
