css笔记

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
     <style type="text/css">
        #gg{
    background-color:skyblue;
    width: 100%;
    color:red;
    text-align:center;
    padding:5px;
}
         #hh {
    
    background-color:sandybrown;
    height:200px;
    width:30%;
    float:left;
    color: yellow;
    float: left;
    font-size: 25px;          
}
         #tt {
     background-color: yellow;      
    float:right;        
    width:70%;
    height: 200px;
         #ght {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
        }
 </style>
    </head>
    
    <div id="gg">
<h1>中国发达城市</h1>
</div>

<div id="hh">

<ul>
    <li><a href="https://baike.sogou.com/v4412.htm?fromTitle=%E5%8C%97%E4%BA%AC">北京</a></li>
    <li><a href="https://baike.sogou.com/v6792.htm?fromTitle=%E4%B8%8A%E6%B5%B7">上海</a></li>
    <li><a href="https://baike.sogou.com/v19203.htm?fromTitle=%E5%B9%BF%E5%B7%9E">广州</a></li>
    <li><a href="https://baike.sogou.com/v6810.htm?fromTitle=%E6%B7%B1%E5%9C%B3">深圳</a></li>
</ul>
</div>

<div id="tt">
    
<h2 style="padding-left: 50px;"><a href="https://baike.sogou.com/v144078314.htm?fromTitle=%E5%B4%86%E5%B3%92">崆峒山</a></h2>
<p style="padding-left: 50px;">
<a href="https://baike.baidu.com/item/%E5%B4%86%E5%B3%92%E6%B4%BE/10731293">武术流派</a>
</p>
<p>

</p>
</div>

<div id="ght">
踊跃参加报名。
</div>
    <body>
    </body>
</html>

关于css。可以用块文本格式颜色大小等等都可以

* 可以看做一个母版用的时候可以用<link ######rel="stylesheet" type="test/css" ######href="https://css/bootstrap.min.css" >

rel 属性 type 属性类型 href 路径

* 先创建一个html的文档。选择需要的css的内容的话直接复制或者剪贴创建一个新的长css 文件，然后粘贴进去保存，使用时在<head> </head>中间插入

例如；

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <table  class="table table-striped  table-bordered table-hover">   
        <tr>
        <th> 姓名 </th>   
        <th> 身高 </th>
        <th> 能力 </th>
        </tr>
        <tr>
        <td> 路飞</td>    
        <td>172 </td>
        <td>橡胶能力 </td>
        </tr>
        <tr>
            <td>索隆 </td>
            <td>173 </td>
            <td>刀客 </td>
        </tr>
        <tr>
        <td>香吉士 </td>   
        <td>175 </td>
        <td>厨师 </td>
        </tr>
        <td>娜美 </td>    
        <td>170 </td>
        <td>航海士 </td>
        </tr>
        <td>罗宾 </td>    
        <td>172 </td>
        <td>史记者 </td>
        </tr>
        </table>
    </body>
</html>

图片