作业要求：
1. 将html常用标签全部写一遍(按视频中的推荐的)
2.练习css常用选择与优先级
3.将盒模型内容全部掌握,特别是padding与简写,border的设置
复习:背景,浮动与定位, 最逼格的布局(明晚再精彩哟)
1.将html常用标签全部写一遍
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>给内容贴上标签</title> </head> <body style="height:3000px"> <div> <h1>不靠谱的承诺</h1> <h2>不靠谱的承诺</h2> <h3>不靠谱的承诺</h3> <p>说好一起到白头, 你却偷偷焗了油</p> <p>说好一起当学渣,你却偷偷当学霸</p> </div> <hr> <div> <p>说好一起到<strong style="background:black;color:white">白头</strong> </p> <p>说好一起到<em style="color:red">学渣</em>,你却偷偷当学霸</p> </div> <hr> <div> <h3>购物清单</h3> <ul> <li>1. 暖手宝一个, 30元, 被窝太冷</li> <li>2. 笔记本电脑一台, 5000, 学php编程</li> <li>3. 充气娃娃一个(波波款), 2000, 孤枕难眠</li> </ul> <ol> <li>暖手宝一个, 30, 被窝太冷</li> <li>笔记本电脑一台, 5000, 学php编程</li> <li>充气娃娃一个(波波款), 2000, 孤枕难眠</li> </ol> <dl> <dt>猪哥</dt> <dd>小猪cms开发者,php中文网创始人</dd> <dt>朱老师</dt> <dd>php中文网讲师, 猥琐的大叔级码农</dd> </dl> </div> <hr> <table border="1" cellpadding="0" cellspacing="0" width="500" height="50"> <caption>购物车</caption> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">暖手宝一个</td> <td align="center">30</td> <td align="center">1</td> <td align="center">被窝太冷</td> </tr> <tr align="center"> <td>2</td> <td>笔记本电脑一台</td> <td>5000</td> <td>1</td> <td>学php编程</td> </tr> <tr align="center"> <td>3</td> <td>充气娃娃一个(波波款)</td> <td>2000</td> <td>1</td> <td>孤枕难眠</td> </tr> </table> <hr> <h2>用户注册</h2> <form action="" method="GET"> <div> <label for="username">用户名:</label> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <label> 密码:<input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码:<input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <input type="radio" name="gender" id="male" value="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> <div> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <label for="edu">学历:</label> <select name="" id="edu" value=""> <option value="1">幼儿园算吗?</option> <option value="2" selected>小学没毕业</option> <option value="3">不好意思,博士后</option> </select> </div> <div> <label for="common">留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <input type="submit" value="提交"> <input type="reset" value="重置"> <button type="button">注册</button> <div> <img src="static/images/zly.jpg" alt="颖***" width="200"> <hr> <video src="static/images/demo.mp4" controls="controls" width="400"></video> </div> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2.练习css常用选择与优先级
结论：三个常用选择器的优先级是: 标签 < 类class < id
style属性和js脚本不是选择器, 不参数排名
实例
<!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>常用选择器与优先级selector</title>
<style>
h3 {
background-color: lightgreen;
color:red;
}
.bg-blue {
background-color: skyblue;
}
#bg-yellow {
background-color:teal;
}
</style>
</head>
<body>
<h3 class="bg-blue">样式规则 = 选择器 + 样式声明</h3>
<h3 class="bg-blue" id="bg-yellow" style="background-color:pink">样式规则 = 选择器 + 样式声明</h3>
<script>
document.getElementById('bg-yellow').style.backgroundColor="lightgrey";
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.将盒模型内容全部掌握,特别是padding与简写,border的设置
实例
.box1 {
width: 200px;
height: 200px;
background-color: lightblue;
/* padding-top: 20px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 50px; */
/*简写*/
/* padding:20px 30px 40px 50px; */
/* padding:20px 30px 40px; */
padding:40px 30px;
/*出现在第二个位置上一定是左右*/
/*边框*/
/* border-top-width: 10px;
border-top-style: solid;
border-top-color: red;
border-right-width: 10px;
border-right-style: dashed;
border-right-color:green;
border-bottom-width: 10px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-left-width: 10px;
border-left-style: double;
border-left-color: black; */
/*简写*/
border-top:10px solid red;
border-right:10px dashed green;
border-bottom:10px dotted blue;
border-left:10px double black;
}
.box2 {
height: inherit;
background-color: wheat;
}运行实例 »
点击 "运行实例" 按钮查看在线实例