博客列表 >表格的使用和连接-2018年8月14日23时35分提交

表格的使用和连接-2018年8月14日23时35分提交

Bingsira的博客
Bingsira的博客原创
2018年08月17日 01:45:35640浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签</title>
    <style type="text/css">
        table{
            border-collapse: collapse;/*清除边框双线,折叠*/
            width:800px;
            margin:10px auto;
            text-align:  center;
        }
        table caption{
            font-size:30px;
            font-weight:bolder;
            color: #666;
            margin-bottom:10px;/*外补丁距离底部10px*/
        }
        table,th,td{
            border:1px solid #676662;
        }
        table tr:first-child{
            background-color:#00A8EF;
        }
        table tr:hover{
            background: #b5c1ab;
        }
        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;
        }
    table tr td img{
        width:100px;
        border-radius:10%;/*把脚弄圆*/
    }

    </style>
</head>
<body>
<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>5斤</td>
        <td><img src="images/apple.jpg"></td>
        <td><a href="http://www.baidu.com">点击**</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>牛奶</td>
        <td>伊利</td>
        <td>1箱</td>
        <td><img src="images/niunai.jpg"></td>
        <td><a href="http://www.baidu.com">点击**</a></td>>
    </tr>
    <tr>
        <td>3</td>
        <td>电风扇</td>
        <td>天下</td>
        <td>1台</td>
        <td><img src="images/dianfs.jpg"></td>
        <td><a href="http://www.baidu.com">点击**</a></td>>
    </tr>
</table>
<hr>
<p style=" text-align:center;">以下是无序列表:</p>
<ul style="list-style: none;text-align: center"><!--清除样式-->
    <li><b>无序列表样式</b></li>
    <li>第二行</li>
    <li>这是第三行</li>
    <li>这是第四行</li>
</ul>
</body>
</html>

运行实例 »

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

IMG_20180814_230532 - 副本 - 副本.jpgIMG_20180814_230532.jpg

问答题:

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

      因为html是网页的基础语言,不需要经过服务器解释就可以直接用任何游览器显示出来,也是最直接的表达方式,而PHP是动态数据经过服务器解释生成的HTML,学习PHP的前提就是要把基础打牢,HTML是必须掌握的基础技能。

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

      一个字快,易使用。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议