导航，头部，CSS基础

题目：

制作自己的导航条。
HTML头部元素：
1. <base> 定义了页面链接标签的默认链接地址
2. <style> 定义了HTML文档的样式
3. <link> 定义了一个文档和外部资源之间的关系
练习样式表：
1. 行内样式表
2. 内嵌样式表
3. 外部样式表
分别练习定义三类选择器：
1. HTML 选择器
2. CLASS 类选择器
3. ID 选择器

制作自己的导航条

　　代码如下：

 1 <nav>
 2     <div class="navbar-header">
 3         <img src="../static/logo.png" width="50px">
 4         <a class="" href="http://src.bookmarkye.com" target="_blank">主页</a>
 5     </div>
 6     <form class="navbar-form navbar-left" role="search">
 7         <div class="form-group">
 8             <input type="text" class="form-control" placeholder="Search">
 9         </div>
10         <button type="submit" class="btn btn-default">搜索</button>
11     </form>
12     <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
13         <button type="button" class="btn btn-danger">注册</button>
14         <button type="button" class="btn btn-success">登录</button>
15     </div>
16 </nav>

运行结果：

HTML头部元素：

<base> 定义了页面链接标签的默认链接地址
<style> 定义了HTML文档的样式
<link> 定义了一个文档和外部资源之间的关系

代码如下：

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>MIS问答平台</title>
 4     <base href="../static/" target="_blank">
 5     <!-- 引入 Bootstrap -->
 6     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 7     <style>
 8         p{
 9             color:blue;
10         }
11         .starone{
12             color:red;
13         }
14         #content{
15             color:green;
16         }
17     </style>
18 </head>

练习样式表：

行内样式表

　　代码如下：

1 <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
2         <button type="button" class="btn btn-danger">注册</button>
3         <button type="button" class="btn btn-success">登录</button>
4 </div>

　　2.内嵌样式表

　　代码如下：

 1 <style>
 2         p{
 3             color:blue;
 4         }
 5         .starone{
 6             color:red;
 7         }
 8         #content{
 9             color:green;
10         }
11 </style>
12 
13 
14 <div>
15     <p>今天全场3折</p>
16     <p>今天全场3折</p>
17     <p>今天全场3折</p>
18     <h1 class="starone">今天全场1折起</h1>
19     <span id="content">3999元起</span>
20 </div>

　　3.外部样式表

　　代码如下：

 1 <!-- 引入 Bootstrap -->
 2 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 3 <nav>
 4     <div class="navbar-header">
 5         <img src="../static/logo.png" width="50px">
 6         <a class="" href="http://src.bookmarkye.com" target="_blank">主页</a>
 7     </div>
 8     <form class="navbar-form navbar-left" role="search">
 9         <div class="form-group">
10             <input type="text" class="form-control" placeholder="Search">
11         </div>
12         <button type="submit" class="btn btn-default">搜索</button>
13     </form>
14     <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
15         <button type="button" class="btn btn-danger">注册</button>
16         <button type="button" class="btn btn-success">登录</button>
17     </div>
18 </nav>

分别练习定义三类选择器

　　代码如下：

 1 {#        1  .HTML 选择器#}
 2         p {
 3             color: blue;
 4         }
 5 {#        2  .CLASS 类选择器#}
 6         .starone {
 7             color: red;
 8         }
 9 {#        3  .ID 选择器#}
10         #content {
11             color: green;
12         }

全网站运行结果如下：