博主信息
博文 5
粉丝 0
评论 0
访问量 4798
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
第三课学习表格设置以及调整细节表格更易懂
小孔的博客
原创
996人浏览过

实例

<!doctype>
<html>
<meta charset="utf-8">
<head>
    <style type="text/css">
        table {
            border-collapse: collapse; /*折叠表格线*/
            width: 700px;
           text-align: center;     /*属性规定元素中的文本的水平对齐方式*/
           margin: 20px auto;     /*auto浏览器计算外边距*/
        }
        table caption {
            font-size: 2rem;      /*定义字体大小 1rem=16PX*/
            font-weight: bolder;  /*定义更粗的字符*/
            color: #666;        /* 给字体添加颜色*/
            margin-bottom: 20px;  /*下外边距距离*/
        }
        table, th, td {
           border: 5px solid #777;     /*给边框的大小和颜色样式*/

        }


        table tr:first-child {
           background-color: lightgreen;   /* 给表头的加一个颜色*/
        }

        table tr:hover {
            background-color: #efefef;  /* 加一个伪类鼠标经过给一个颜色*/
            color: coral;
        }

        table tr td img {
            padding: 5px;
            border-radius: 10px;    /*设置图片的大小*/
        }

        table tr td a {
            text-decoration: none;
            width:140px;
            height:40px;
            padding:5px;
            border:1px solid black;
            background: white;
            color:black;
            border-radius: 8px;
        }

        table tr td a:hover {  /*给够买按钮添加鼠标经过特效*/
            background: black;
            color:white;
        }
      h2{ font-weight:bold; /* 给字体加粗*/
          text-align: center; /* 给字体居中*/
       }
      ul{font-weight: bold;
          text-align: center;
      }
      li{background-color: #ef3d53;

      }
    </style>
</head>
<body>
<h2>第<font color="red" >三</font>天学习PHP</h2>
<ul>
    <li>增品包装</li>
    <li>京东够买</li>
    <li>天猫够买</li>
    <li>专享折扣</li>
</ul>
<table>
    <caption>购物清单</caption>
    <tr>
        <th>编号</th>
        <th>名称</th>
        <th>拼牌</th>
        <th>数量</th>
        <th>样图</th>
        <th>够买</th>
    </tr>
    <tr>
        <td>1</td>
        <td>内裤</td>
        <td>恒源祥</td>
        <td>2条</td>
        <td><img src="images/内裤系列.png" width="100"></td>
        <td><a href="#">点击够买</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>袜子</td>
        <td>恒源祥</td>
        <td>6双</td>
        <td><img src="images/袜子系列.png" width="100"></td>
        <td><a href="#">点击够买</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>秋衣秋裤</td>
        <td>恒源祥</td>
        <td>1套</td>
        <td><img src="images/秋衣秋裤.png" width="100"></td>
        <td><a href="#">点击够买</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>保暖内衣</td>
        <td>恒源祥</td>
        <td>5套</td>
        <td><img src="images/保暖内衣.png" width="100"></td>
        <td><a href="#">点击够买</a></td>
    </tr>
    <tr>
        <td>5</td>
        <td>鸿运内裤袜子</td>
        <td>恒源祥</td>
        <td>1套</td>
        <td><img src="images/鸿运系列.png" width="100"></td>
        <td><a href="#">点击够买</a></td>
    </tr>
</table>
</body>>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20180816184922.png

  • 1.学习PHP为什么必须要掌握HTML?

php就是用来态生成html代码的,所有我们需学习掌握html各种基础知识,为了方便我们能够完成网站交换的整个过程,

又分为【前端】和【后端】,主要分为三块,HTML(肉身),CSS(皮相),JavaScript(灵魂),一个网站没有JavaScript只有html+css=植物人,没有JavaScript和css就是一个毁容的植物人。所有我们一定需要去了解基础的html,css,JavaScript。

  • 2.为什么选择PHP开发动态网站?

快,上手快,开发快,更新快,迭代快。底层框架快捷

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学