博客列表 >3月22作业

3月22作业

KongLi的博客
KongLi的博客原创
2018年03月22日 23:44:27757浏览

3月22日 CSS 盒子 / CSS 控制表格样式

运行效果:

运行效果.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>会员管理系统</title>
    <style type="text/css" media="screen">
        /* 先对表格设置一个边框 */
        table,th,td{
            border:1px solid lightgray;
        }
        table{
            width:60%;
            margin:20px auto;
            text-align: center;
            border-collapse:collapse; /* 边框重叠 */
        }
        td img{
            width:40px;
            border-radius:50%;
            box-shadow:3px 3px 3px #888; /* 设置边框阴影 */
        }
        table caption{
            margin-bottom:20px;
            font-size:30px;
            font-weight:bold; /* 加粗 */
        }
        table th{
            color:#669;
            margin-top:20px;
            background: lightgrey;
            font-size:18px;
        }
        .green{
            color:red;
        }

        /*鼠标划动变色*/

        /* 开始默认颜色 */
        a:visited{
            color:blue;
        }
        /* 鼠标移动改变颜色 */
        a:hover{
            color:red;
        }

        img:hover{
            width:50px;
        }
    </style>
</head>
<body>
    <table>
        <caption>会员管理系统</caption>
        <tr>
            <th>编号</th>
            <th>会员名称</th>
            <th>头像</th>
            <th>邮件地址</th>
            <th>注册时间</th>
            <th colspan="2">操作</th>
        </tr>
        <tr>
            <td>01</td>
            <td>小红</td>
            <td><img src="http://img2.woyaogexing.com/2018/03/22/5107f28c9aaee69b!400x400_big.jpg"></td>
            <td>xiaohong@qq.com</td>
            <td class="green">2017-03-06</td>
            <td><a href="">编辑</a></td>
            <td><a href="">删除</a></td>
        </tr>
        <tr>
            <td>02</td>
            <td>小丽</td>
            <td><img src="http://img2.woyaogexing.com/2018/03/22/3927ba3585d50e55!400x400_big.jpg"></td>
            <td>xiaoli@qq.com</td>
            <td class="green">2017-06-08</td>
            <td><a href="">编辑</a></td>
            <td><a href="">删除</a></td>
        </tr>
        <tr>
            <td>03</td>
            <td>小青</td>
            <td><img src="http://img2.woyaogexing.com/2018/03/22/bcf884fde1baba59!400x400_big.jpg"></td>
            <td>xiaoqing@qq.com</td>
            <td class="green">2016-05-03</td>
            <td><a href="">编辑</a></td>
            <td><a href="">删除</a></td>
        </tr>
        <tr>
            <td>04</td>
            <td>小花</td>
            <td><img src="http://img2.woyaogexing.com/2018/03/22/18d742466c3a7c66!400x400_big.jpg"></td>
            <td>xiaohua@qq.com</td>
            <td class="green">2018-05-07</td>
            <td><a href="">编辑</a></td>
            <td><a href="">删除</a></td>
        </tr>
        <tr>
            <td>05</td>
            <td>小白</td>
            <td><img src="http://img2.woyaogexing.com/2018/03/22/82154113fd62776e!400x400_big.jpg"></td>
            <td>xiaobai@qq.com</td>
            <td class="green">2018-04-09</td>
            <td><a href="">编辑</a></td>
            <td><a href="">删除</a></td>
        </tr>
    </table>
</body>
</html>

运行实例 »

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


手写样式
稍微偷懒了。~

css 基本选择器.jpg

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