Super丶小波

Super丶小波

关注
发信
关注(28)粉丝(399)

php之表格的应用


点击(此处)折叠或打开

  1. 表格的使用上（1）本程序与下面的.CSS相连
  2. <!DOCTYPE html>

  4. <html>

  6. <head>
  7.     <meta charset="UTF-8">
  8.     <tilte>css的基本使用及其各种属性</tilte>
  9.     <!-- 引入外部样式的文件 -->
  10.     <link rel="stylesheet" href="css/out.css"/>
  11.     <!-- 前者是引用一些表格的风格样式，后者是你保存的表格样式属性的文件位置 -->
  12. </head>
  13. <body>
  14.     <p>

  16.             你好，这里是北京天气预警中心，根据小六子的可靠情报，最近几天内可能下大到暴雨。
  17.     </p>

  19.     <p>

  21.         hello,大家好，我又来了。
  22.     </p>
  23.     <table cellspacing="0">
  24.     <!-- 表格线的重叠 -->
  25.     <tr>

  27.         <th>A</th>
  28.         <th>B</th>
  29.         <th>C</th>
  30.         <th>D</th>

  32.     </tr>

  34.     <tr>
  35.         <td>aa</td>
  36.         <td>bb</td>
  37.         <td>cc</td>
  38.         <td>dd</td>

  40.     </tr>

  42.     <tr>
  43.         <td>aa</td>
  44.         <td>bb</td>
  45.         <td>cc</td>
  46.         <td>dd</td>

  48.     </tr>
  49.     <tr>
  50.         <td>aa</td>
  51.         <td>bb</td>
  52.         <td>cc</td>
  53.         <td>dd</td>

  55.     </tr>
  56.     <tr>
  57.         <td>aa</td>
  58.         <td>bb</td>
  59.         <td>cc</td>
  60.         <td>dd</td>

  62.     </tr>
  63.     
  64.     </table>
  65.         <br />
  66.         <br />
  67.         <br />
  68.         <br />
  69.         <br />

  71.     <table class="mytable">
  72.     <tr>
  73.             <td>aa</td>
  74.             <td>bb</td>
  75.             <td>cc</td>
  76.             <td>dd</td>
  77.         </tr>
  78.         <tr>
  79.             <td>aa</td>
  80.             <td>bb</td>
  81.             <td>cc</td>
  82.             <td>dd</td>
  83.         </tr>
  84.         <tr>
  85.             <td>aa</td>
  86.             <td>bb</td>
  87.             <td>cc</td>
  88.             <td>dd</td>
  89.         </tr>
  90.         <tr>
  91.             <td>aa</td>
  92.             <td>bb</td>
  93.             <td>cc</td>
  94.             <td>dd</td>
  95.         </tr>
  96.         <tr>
  97.             <td>aa</td>
  98.             <td>bb</td>
  99.             <td>cc</td>
  100.             <td>dd</td>
  101.         </tr>
  102.         <tr>
  103.             <td>aa</td>
  104.             <td>bb</td>
  105.             <td>cc</td>
  106.             <td>dd</td>
  107.         </tr>
  108.     <table>
  109.     <div class="mydiv">
  110.             在天愿做比翼鸟，在地愿为连理枝。

  112.     </div>    

  114.     <p id="myid1">
  115.             我是小娜，你好！
  116.     </p>

  118.     <p id="myid2">
  119.             开开心心度过每一天。
  120.     </p>

  122.     <div>

  124.         <p id="abc">
  125.                 <span>
  126.                     div下的span标签
  127.                 </span>
  128.         </p>
  129.     </div>

  131.     <div id="ab" class="cd">

  133.             呵呵哒
  134.     </div>

  136. </body>
  137. </html>
        
       
 /*下面的是.CSS文件*/

点击(此处)折叠或打开

  1. /*1.选择器：标签选择器*/
  2. table{
  3. border:solid 1px red;
  4. /*表格的边框像素为1px的红色线条装饰*/
  5. width:500px;
  6. /*表格的宽度为500像素*/
  7. border-collapse: collapse;
  8. /*边框塌陷，就是让相邻的两个边框变为重叠的一个边框。*/


  11. }


  14.  p{
  15.      color:#FF0000;
  16.      /*字体颜色为红色*/
  17.      font-size: 120px;
  18.      /*字体大小为120像素*/
  19.      background-color:#00FF00;
  20.      /*字体的背景是绿色*/
  21.      font-family: '楷体';
  22.      width:1000px;
  23.      /*宽度为1000像素*/
  24.      background-image:url('images/汽车，jpg');
  25.      /*背景图片*/
  26.      background-repeat:no-repeat;
  27.      /*上面的是不重复的，横向重复是background-repeat:repeat -x*/
  28.      /*纵向重复是background-repeat:repeat -y*/
  29.      border:solid 10px red;
  30.      /*四周边框为10像素的红色边框*/
  31.      border-bottom:dashed 10px red;
  32.      /*下边框是像素为10像素的红色虚线边框*/
  33.  }
  34.   /*2.类选择器，分类来使用指定的选择器，要以.开头,名称自定义*/
  35. .mytable{
  36.   border:dsahed 1px green;
  37.   /*下边框是像素为10像素的绿色虚线边框*/
  38.   }
  39.   /*3.id选择器，#开头，后面跟自定义的名字
  40.   ，页面唯一的id（虽说重复，但是不要这麽做）*/
  41. .mydiv{
  42. border:dotted 5px green;
  43. /*边框为5像素的虚线式边框*/
  44. background:#ff9900;
  45. /*背景颜色为红色*/
  46. width:500px;
  47. /*表格的宽度为500像素*/
  48. height:300px;
  49. /*表格的高度为300像素*/
  50. height:600px;
  51. /*下面的高度会覆盖上面的高度*/
  52. }
  53. /*4.派生选择器（上下文选择器）用已有选择器进行组合
  54. 然后得到新的选择器，中间可用空格隔开*/
  55. div span{
  56. display:block;
  57. /*模块的展示*/
  58. background:ff0000;
  59. /*背景颜色为红色*/
  60. border:solid 10px black;
  61. /*表格外边框是像素为10 的黑色边框*/
  62. width:500px;
  63. /*表格的宽度像素为500*/
  64. height:100px;
  65. /*表格的高度像素为100*/
  66. }
  67. /*5.组合选择器，用逗号隔开的两个或多个选择器
  68. ，然后这些个选择器都能使用规定的规则。*/
  69. td,th{
  70. border:solid 1px red;
  71. /*表格外边框的线为像素唯一的红色直线*/


  74. }
  75. p.abc{


  78. }
  79. /*首先要满足id="ab",然后class=“cd”才能使用*/
  80. #ab.cd{
  81. font-family:'楷体';
  82. /*字体为楷体*/
  83. font-size:1000px;
  84. /*表格字体的大小为1000像素*/
  85. }


10-05 21:50
Powered by LMLPHP ©2024 Super丶小波 0.071381