导航，头部，CSS基础

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

代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>064黄庚华</title>
 6     <!-- 引入 Bootstrap -->
 7     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 8     <style>
 9         {#        1  .HTML 选择器#}
10         p {
11             color: blue;
12         }
13 
14         {#        2  .CLASS 类选择器#}
15         .starone {
16             color: red;
17         }
18 
19         {#        3  .ID 选择器#}
20         #content {
21             color: green;
22         }
23     </style>
24 </head>
25 <body>
26 <nav>
27     <div class="navbar-header">
28         <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"
29              width="50px">
30         <a class="" href="http://www.baidu.com" target="_blank">主页</a>
31     </div>
32     <form class="navbar-form navbar-left" role="search">
33         <div class="form-group">
34             <input type="text" class="form-control" placeholder="Search">
35         </div>
36         <button type="submit" class="btn btn-default">搜索</button>
37     </form>
38     <div class="navbar-right" style="padding-top:5px;padding-right:30px;">
39         <button type="button" class="btn btn-danger">注册</button>
40         <button type="button" class="btn btn-success">登录</button>
41     </div>
42 </nav>
43 <h1 align="center">黄庚华</h1>
44 <h1>064黄庚华</h1>
45 <div id="container" style="width: 400px">
46     <div id="header" style="background-color: darkgreen"><h2>登陆</h2></div>
47     <div id="content"></div>
48     <from>
49         用户名：<input type="text" name="usename" aria-placeholder="请输入用户名"><br>
50         密码： <input type="password">
51         <br>
52         <input type="radio" name="role" value="stu">student
53         <input type="radio" name="role" value="tea">teacher
54         <input type="checkbox" name="vehicle" value="Bike">I have a bike
55         <input type="button" value="Hello world!">
56 
57     </from>
58     <div id="footer" style="background-color: darkgreen"><h2>版权</h2></div>
59 </div>
60 <div>
61     <p>今天全场3折</p>
62     <p>今天全场3折</p>
63     <p>今天全场3折</p>
64     <h1 class="starone">今天全场1折起</h1>
65     <span id="content">3999元起</span>
66 </div>
67 
68 <ul>
69     <li>
70         <ol>
71             <li>
72                 <select name="shoucang">
73                     <option value="a">收藏</option>
74                     <option value="b">点赞</option>
75                 </select>
76             </li>
77         </ol>
78     </li>
79 </ul>
80 <p>扎实推进“活力广商”建设——我校举行2017年阳光体育长跑活动启动仪式</p>
81 <a href="http://news.gzcc.cn/html/2017/xiaoyuanxinwen_1011/8308.html">扎实推进“活力广商”<br><br><img
82         src="http://oa.gzcc.cn/uploadfile/2017/1011/20171011045904773.jpg"></a>
83 <hr>
84 <a href="#">友情链接</a>
85 </body>
86 </html></html>

 

 

 

运行结果：

　　

 

posted @ 2017-10-18 20:38  064黄庚华  阅读(332)  评论(0)    收藏  举报