列表 块 div和table布局

野性酷女 2022-08-20 06:17 214阅读 0赞

列表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>列表</title>
  6. </head>
  7. <body>
  8.     <ul type="circle"><!无序列表   type默认是实心 circle是空心 square是方块>
  9.         <li>first</li>
  10.         <li>second</li>
  11.         <li>third</li>
  12.     </ul>
  13.     <ol start="1" type="1"><!有序列表   start是开始的标号  type是可以是阿拉伯数字 英文 罗马数字>
  14.         <li>first</li>
  15.         <li>second</li>
  16.         <li>third</li>
  17.     </ol>
  18. </body>
  19. </html>

块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>块</title>
  6.     <style type="text/css">
  7.         #id1{
  8.             color: blue;
  9.         }
  10.         /*只有ID=id2 中的a标签改变*/
  11.         #id2 a{
  12.             color: bisque;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <!块元素 每个元素都会换行： ul  h1  p>
  18.     <!内联元素 不会换行： b  a  img>
  19.     <div id="id1">
  20.         <h1>h1</h1>
  21.         <p>p1</p>
  22.     </div>
  23.     <div id="id2">
  24.         <b>b</b>
  25.         <a>a</a>
  26.     </div>
  27.     <span>与div相比是只能作为文字的容器</span>
  28. </body>
  29. </html>

div布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>div布局</title>
  6.     <style type="text/css">
  7.         body{
  8.             margin: 0px;
  9.         }
  10.         #container{
  11.             width: 100%;
  12.             height: 1000px;
  13.             background-color: darkgrey;
  14.         }
  15.         #head{
  16.             width: 100%;
  17.             height: 10%;
  18.             background-color: aquamarine;
  19.         }
  20.         #container_menu{
  21.             width: 30%;
  22.             height: 80%;
  23.             background-color: #d26965;
  24.             float: left;
  25.         }
  26.         #container_body{
  27.             width: 70%;
  28.             height: 80%;
  29.             background-color: cornflowerblue;
  30.             float: left;
  31.         }
  32.         #foot{
  33.             width: 100%;
  34.             height: 10%;
  35.             background-color: darkmagenta;
  36.             clear: left;
  37.         }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div id="container">
  42.         <div id="head">头</div>
  43.         <div id="container_menu">菜单</div>
  44.         <div id="container_body">内容</div>
  45.         <div id="foot">底部</div>
  46.     </div>
  47. </body>
  48. </html>

table布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>table布局</title>
  7. </head>
  8. <body marginheight="0px" marginwidth="0px">
  9.     <table width="100%" height="1000px" style="background-color: darkgray">
  10.         <tr>
  11.             <td colspan="2" width="100%" height="10%" style="background-color: darkmagenta">头部</td>
  12.         </tr>
  13.         <tr>
  14.             <td width="30%" height="80%" style="background-color: aqua">菜单</td>
  15.             <td width="70%" height="80%" style="background-color: coral">内容</td>
  16.         </tr>
  17.         <tr>
  18.             <td colspan="2" width="100%" height="10%" style="background-color: darkolivegreen">底部</td>
  19.         </tr>
  20.     </table>
  21. </body>
  22. </html>

发表评论

表情：
评论列表 （有 0 条评论，214人围观）

还没有评论，来说两句吧...

相关阅读