1、制作自己的导航条。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简书</title> <link rel="stylesheet" href="1018.css"> </head> <body> <nav> <img src="https://p1.ssl.qhmsg.com/dr/270_500_/t01745b3fd4078d5a9e.jpg?size=512x512" height="50" width="50"> <a href="http://www.jianshu.com/"></a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="https://www.jianshu.com/sign_in">登陆</a> <a href="https://www.jianshu.com/sign_up">注册</a> </nav>
2、HTML头部元素：
<base> 定义了页面链接标签的默认链接地址
<base href="" target="_blank">
<style> 定义了HTML文档的样式
<style type="text/css"> p{ color: red; } </style>
<link> 定义了一个文档和外部资源之间的关系
<head> <meta charset="UTF-8"> <title>简书</title> <link rel="stylesheet" href="1018.css"> </head>
3 练习样式表：
行内样式表
内嵌样式表
外部样式表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简书</title> <link rel="stylesheet" type="text/css" href="1018.css"> <style type="text/css"> p{ color: red; } .zidingyi{ color: blue; } #commentcount{ background-color: aquamarine; } </style> </head> <body> <nav> <img src="https://p1.ssl.qhmsg.com/dr/270_500_/t01745b3fd4078d5a9e.jpg?size=512x512" height="50" width="50"> <a href="http://www.jianshu.com/"></a> <input type="text" name="search"> <button type="submit">搜索</button> <a href="https://www.jianshu.com/sign_in">登陆</a> <a href="https://www.jianshu.com/sign_up">注册</a> </nav> <p>十九大 <span style="background: black;font-size: 30px;font-family: 微软雅黑">召开</span></p> <p>十九大召开</p> <p>十九大召开</p> <p>十九大召开</p> <h1 class="zidingyi">评论</h1> <h2><span id="commentcount" >1000</span>点赞</h2> </body> </html>
4、分别练习定义三类选择器：
- HTML 选择器
- CLASS 类选择器
- ID 选择器
{# 1 .HTML 选择器#}
p {
color: blue;
}
{# 2 .CLASS 类选择器#}
.bk{
color: lavenderblush;
}
{# 3 .ID 选择器#}
#ok {
color: lightseagreen;
}