导航，头部，CSS基础

  1. 制作自己的导航条。
  2. HTML头部元素：
    1. <base>  定义了页面链接标签的默认链接地址
    2. <style>  定义了HTML文档的样式
    3. <link>  定义了一个文档和外部资源之间的关系
  3. 练习样式表：
    1. 行内样式表
    2. 内嵌样式表
    3. 外部样式表
  4. 分别练习定义三类选择器：
    1. HTML 选择器
    2. CLASS 类选择器
    3. ID 选择器 
      <!DOCTYPE html>                                                                                                                                                                                                         
<html lang="en">                                                                                                                                                                                                        
<head>                                                                                                                                                                                                                  
    <meta charset="UTF-8">                                                                                                                                                                                              
    <title>GZCC</title>                                                                                                                                                                                                 
    <base href="" target="_blank">                                                                                                                                                                                      
    <link rel="stylesheet" href="99.css">                                                                                                                                                                               
</head>                                                                                                                                                                                                                 
<body>                                                                                                                                                                                                                  
                                                                                                                                                                                                                        
<nav>                                                                                                                                                                                                                   
    <img src="http://img.mp.itc.cn/upload/20170720/25678b6966bf4a79ae9d7b85df4f3531_th.jpg" width="50" height="50"                                                                                                      
         alt="img.mp.itc.cn">                                                                                                                                                                                           
    <a herf="www.gzcc.cn" class="jun">首页</a>                                                                                                                                                                            
    <input type="text">                                                                                                                                                                                                 
    <button type="submit">搜索</button>                                                                                                                                                                                   
    <a href="">登陆</a>                                                                                                                                                                                                   
    <a href="">注册</a>                                                                                                                                                                                                   
    <h3 id="commentcount">233333<span style="background-color: blueviolet;font-size: 50px;font-family:'Operator Mono','Source Sans Pro',Melo,Monaco,Consolas">评论</span></h3>                                            
</nav>                                                                                                                                                                                                                  
                                                                                                                                                                                                                        
<h1 class="jun">MIS问答平台</h1>                                                                                                                                                                                            
<h2 id="2015" style="color: blueviolet">2015</h2>                                                                                                                                                                       
<div id="container" style="width:400px ">                                                                                                                                                                               
    <div id="header" style="background-color: cornflowerblue"><h2 align="center">登陆</h2></div>                                                                                                                          
    <div id="content">                                                                                                                                                                                                  
        <form>                                                                                                                                                                                                          
            用户名：<input type="text" name="username" placeholder="请输入用户名"><br>                                                                                                                                            
            密码：<input type="password" name="passwork"><br>                                                                                                                                                              
            <input type="radio" name="role" value="stu">student                                                                                                                                                         
            <input type="radio" name="role" value="tea">teacher                                                                                                                                                         
            <br>                                                                                                                                                                                                        
            <input type="checkbox" value="true"><span>记住我</span> <a href="">登陆遇到问题</a><br>                                                                                                                              
            <input type="button" value="login" onclick="alert('登陆验证')">                                                                                                                                                 
                                                                                                                                                                                                                        
        </form>                                                                                                                                                                                                         
    </div>                                                                                                                                                                                                              
    <div id="footer" style="background-color: cornflowerblue;clear: both;text-align: center"><i>版权@mis</i></div>                                                                                                        
</div>                                                                                                                                                                                                                  
<div>                                                                                                                                                                                                                   
    <select>                                                                                                                                                                                                            
        <option>收藏</option>                                                                                                                                                                                             
        <option>点赞</option>                                                                                                                                                                                             
        <option>评论</option>                                                                                                                                                                                             
    </select>                                                                                                                                                                                                           
    <ul>                                                                                                                                                                                                                
        <li>python</li>                                                                                                                                                                                                 
        <li>html</li>                                                                                                                                                                                                   
    </ul>                                                                                                                                                                                                               
    <ol>                                                                                                                                                                                                                
        <li>python</li>                                                                                                                                                                                                 
        <li>html</li>                                                                                                                                                                                                   
    </ol>                                                                                                                                                                                                               
    <h3 id="学校概况">学校概况</h3>                                                                                                                                                                                             
    <d1>                                                                                                                                                                                                                
        <dt>1学校简介</dt>                                                                                                                                                                                                  
        <dd><a href="http://www.gzcc.cn/html/xygk/xueyuanjianjie/">1学校简介</a></dd>                                                                                                                                       
        <dt>2校徽校训</dt>                                                                                                                                                                                                  
        <dd><a href="http://www.gzcc.cn/html/xygk/xhxx/">2校徽校训</a></dd>                                                                                                                                                 
    </d1>                                                                                                                                                                                                               
</div>                                                                                                                                                                                                                  
<a href="#2">2</a>                                                                                                                                                                                                      
<hr>                                                                                                                                                                                                                    
<br>                                                                                                                                                                                                                    
<hr>                                                                                                                                                                                                                    
<p style="color:darkgreen;fent-size:x-small;margin-left: 20px;">友情链接</p>                                                                                                                                                
<a href="http://www.gzcc.cn/">                                                                                                                                                                                          
    <img src="http://www.gzcc.cn/2016/images/banner.png" width="258" height="39" alt="gzcc.cn"/>                                                                                                                        
    <br>广州商学院</a>                                                                                                                                                                                                       
<a id='2'></a>                                                                                                                                                                                                          
</body>                                                                                                                                                                                                                 
</html>                                                                                                                                                                                                                 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: red;
        }
        .jun{
            color: green;
        }
        #commentcount{
            color:yellow;
        }
    </style>
</head>
<body>
</body>
</html>
      p {
    color: red;
}

.jun {
    color: blue;
}

#commentcount {
    color: yellow;
}
body {
    background-color:#b0c4de;
}

       

posted @ 2017-10-18 21:33  041覃楚君  阅读(181)  评论(0)    收藏  举报