1. <html>
    2.     <head>
    3.         <meta charset="UTF-8">
    4.         <!--内部样式表-->
    5.         <style type="text/css">
    6.             /*被style标签包围的范围是CSS环境，可以写CSS代码*/
    8.             /*标签样式表*/
    9.             p{
    10.                 color:red
    11.             }
    12.             /*类样式*/
    13.             .f20{
    14.                 font.size:20px;
    15.             }
    16.             /*ID样式*/
    17.             #p4{
    18.                 background-color:pink;
    19.                 font-size:24px;
    20.                 font-weight:bolder;
    21.                 font-style:italic;
    22.                 font-family:"华文彩云";
    23.             }
    24.             /*组合样式*/
    25.             div p{
    26.                 color:blue;
    27.             }
    29.             div .f32{
    30.                 font-size:32px;
    31.                 font-family:"黑体";
    32.             }
    33.         </style>
    34.         <!--外部样式表-->
    35.         <link rel="stylesheet" href="CSS格式文件的地址">
    36.     </head>
    37.     <body>
    38.         <!--
    39.         <p><font color="red">这里是段落一<font></p>
    40.         <p><font color="red">这里是段落二<font></p>
    41.         -->
    42.         <p>这里是段落一</p>
    43.         <p>这里是段落二</p>
    44.         <p class="f20">这里是段落三</p>
    45.         <p id="p4">这里是段落四</p><!--id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错）-->
    47.         <div>
    48.                     <!--嵌入式样式表-->
    49.             <p><span style="font-size:60px;font-weigth:bolder;color:yellow;">HELLO</span></p>
    50.             <span class="f32">WORLD</span>
    51.             <p class="f32">!!!</p>
    52.         </div>
    53.     </body>
    54. </html>
    55. <!--
    56. 1、为什么需要CSS
    57. 2、CSS的分类：标签样式表、类样式表、ID样式表、组合样式表
    58. 3、CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表
    59. -->
    1. <html>
    2.     <head>
    3.         <meta charset="UTF-8">
    4.         <!--内部样式表-->
    5.         <style type="text/css">
    6.             #div1{
    7.                 width:400px;
    8.                 height:400px;
    9.                 background-color:greenyellow;
    10.                 /*border边框样式*/
    11.                 border-width:1px;            /*边框粗细*/
    12.                 border-style:solid;        /*边框样式：solid（实线），dotted（点状线）*/
    13.                 border-color:blue;            /*边框颜色*/
    15.                 /*border:4px double blue;*/
    17.                 /*border-top:4px dotted blue;*/
    18.             }
    20.             #div2{
    21.                 width:150px;
    22.                 height:150px;
    23.                 background-color:darkorange;
    25.                 margin-top:100px;
    26.                 margin-left:100px;
    29.                 /*margin:100px 100px 50px 150px;*/ /*一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左*/
    31.                 /*padding:填充*/
    32.                 padding-top:50px;
    33.                 padding-left:50px;
    34.             }
    36.             #div3{
    37.                 width:100px;
    38.                 height:100px;
    39.                 background-color:aquamarine;
    40.                 /*
    41.                 margin-top:50px;
    42.                 margin-left:50px;
    43.                 */
    44.             }
    46.             #div4{
    47.                 width:200px;
    48.                 height:200px;
    49.                 margin-left:100px;
    50.                 background-color:greenyellow;
    51.             }
    52.             body{
    53.                 margin:0;
    54.                 padding:0;'p
    55.             }
    56.         </style>
    58.     </head>
    59.     <body>
    60.         <div id="div1">
    61.             <div id="div2">
    62.                 <div id="div3">&nbsp;</div>
    63.             </div>
    64.         </div>
    66.         <div id="div4">&nbsp;</div>
    67.     </body>
    68. </html>
    69. <!--
    70. IE浏览器：实际尺寸=width
    71. Chrome浏览器：实际尺寸=width+左右border的width+padding的值
    73. 盒子模型：
    74. 1、border 边框
    75. 2、margin 间距
    76. 3、padding 填充
    77. -->
    1. <html>
    2.     <head>
    3.         <meta charset="utf-8">
    4.         <style type="text/css">
    5.             body{
    6.                 margin:0;
    7.                 padding:0;
    8.             }
    9.             #div1{
    11.                 width:200px;
    12.                 height:50px;
    13.                 background-color:greenyellow;
    15.                 /* 绝对定位 */
    16.                 position:absolute;
    17.                 left:100px;
    18.                 top:100px;
    21.             }
    23.             #div2{
    24.                 width:200px;
    25.                 height:50px;
    26.                 background-color:pink;
    28.                 position:relative;
    29.                 float:left;
    30.                 margin-left:20px;
    31.             }
    33.             #div3{
    34.                 height:50px;
    35.                 background-color:darkorange;
    36.             }
    38.             #div4{
    39.                 width:200px;
    40.                 height:50px;
    41.                 background-color:aqua;
    43.                 float:left;
    44.             }
    45.             #div5{
    46.                 width:200px;
    47.                 height:50px;
    48.                 background-color:olivedrab;
    50.                 float:left;
    51.             }
    52.             div{
    53.                 position:relative;
    54.             }
    55.         </style>
    56.     </head>
    57.     <body>
    58.         <!--
    59.         <div id="div1">&nbsp;</div>
    60.         <div id="div2">&nbsp;</div>
    61.         -->
    62.         <div id="div3">
    63.             <div id="div4">&nbsp;</div>
    64.             <div id="div5">&nbsp;</div>
    65.         </div>
    66.     </body>
    67. </html>
    69. <!--
    70. position: absolute -- 绝对定位 , 需要配合使用 left , top
    71.           relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
    73. float 
    74. -->
    1. <html>
    2.     <head>
    3.         <meta charset="utf-8">
    4.         <style type="text/css">
    5.             body{
    6.                 margin:0;
    7.                 padding:0;
    8.                 background-color:#808080;
    9.             }
    10.             div{
    11.                 position:relative;
    12.             }
    13.             #div_top{
    14.                 background-color: orange;
    15.                 height:20%;
    16.             }
    17.             #div_left{
    18.                 background-color: greenyellow;
    19.                 height:80%;
    20.                 width:15%;
    21.                 float:left;
    22.             }
    23.             #div_main{
    24.                 background-color: whitesmoke;
    25.                 height:70%;
    26.                 float:left;
    27.                 width:85%;
    28.             }
    29.             #div_bottom{
    30.                 background-color: sandybrown;
    31.                 height:10%;
    32.                 width:85%;
    33.                 float:left;
    34.             }
    35.             #div_container{
    36.                 width:80%;
    37.                 height:100%;
    38.                 border:0px solid blue;
    39.                 margin-left:10%;
    40.                 float:left;
    41.             }
    42.         </style>
    43.     </head>
    44.     <body>
    45.         <div id="div_container">
    46.             <div id="div_top">div_top</div>
    47.             <div id="div_left">div_left</div>
    48.             <div id="div_main">div_main</div>
    49.             <div id="div_bottom">div_bottom</div>
    50.         </div>
    51.     </body>
    52. </html>
    1. <html>
    2.     <head>
    3.         <meta charset="utf-8">
    4.         <link rel="stylesheet" href="css/demo05.css">
    5.     </head>
    6.     <body>
    7.         <div id="div_container">
    8.             <div id="div_fruit_list">
    9.                 <table id="tbl_fruit">
    10.                     <tr>
    11.                         <th class="w20">名称</th>
    12.                         <th class="w20">单价</th>
    13.                         <th class="w20">数量</th>
    14.                         <th class="w20">小计</th>
    15.                         <th>操作</th>
    16.                     </tr>
    17.                     <tr>
    18.                         <td>苹果</td>
    19.                         <td>5</td>
    20.                         <td>20</td>
    21.                         <td>100</td>
    22.                         <td><img src="imgs/del.jpg" class="delImg"/></td>
    23.                     </tr>
    24.                     <tr>
    25.                         <td>西瓜</td>
    26.                         <td>3</td>
    27.                         <td>20</td>
    28.                         <td>60</td>
    29.                         <td><img src="imgs/del.jpg" class="delImg"/></td>
    30.                     </tr>
    31.                     <tr>
    32.                         <td>菠萝</td>
    33.                         <td>4</td>
    34.                         <td>25</td>
    35.                         <td>100</td>
    36.                         <td><img src="imgs/del.jpg" class="delImg"/></td>
    37.                     </tr>
    38.                     <tr>
    39.                         <td>榴莲</td>
    40.                         <td>3</td>
    41.                         <td>30</td>
    42.                         <td>90</td>
    43.                         <td><img src="imgs/del.jpg" class="delImg"/></td>
    44.                     </tr>
    45.                     <tr>
    46.                         <td>总计</td>
    47.                         <td colspan="4">999</td>
    48.                     </tr>
    49.                 </table>
    50.             </div>
    51.         </div>
    52.     </body>
    53. </html>
    56. *{
    57.     color: threeddarkshadow;
    58. }
    59. body{
    60.     margin:0;
    61.     padding:0;
    62.     background-color:#808080;
    63. }
    64. div{
    65.     position:relative;
    66.     float:left;
    67. }
    69. #div_container{
    70.     width:80%;
    71.     height:100%;
    72.     border:0px solid blue;
    73.     margin-left:10%;
    74.     float:left;
    75.     background-color: honeydew;
    76.     border-radius:8px;
    77. }
    78. #div_fruit_list{
    79.     width:100%;
    80.     border:0px solid red;
    81. }
    82. #tbl_fruit{
    83.     width:60%;
    84.     line-height:28px;
    85.     margin-top:120px;
    86.     margin-left:20%;
    87. }
    88. #tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
    89.     border:1px solid gray;
    90.     border-collapse:collapse;
    91.     text-align:center;
    92.     font-size:16px;
    93.     font-family:"黑体";
    94.     font-weight:lighter;
    96. }
    97. .w20{
    98.     width:20%;
    99. }
    100. .delImg{
    101.     width:24px;
    102.     height:24px;
    103. }
    104. .btn{
    105.     border:1px solid lightgray;
    106.     width:80px;
    107.     height:24px;
    108. }