简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 322作业：利用css表格设置制作一个海岛游排行榜(20180328_14:00)
Blogger Information
Blog 7
fans 0
comment 0
visits 4289
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
322作业：利用css表格设置制作一个海岛游排行榜(20180328_14:00)
漫云的博客
Original
700 people have browsed it

利用CSS对表格的控制，比以前只用html更简练，比如，利用border-collapse把表格边框折叠；利用text-

align:center使表格文本居中；利用margin: 50px auto，使整个表格全部居中；利用box-shadow: 3px 3px 3px，使

表格向右下方产生投影，具有立体效果。

利用border radius使表格中图片变成圆形，利用box-shadow使表格有投影效果。

利用background-color:rgba(155, 155, 0, 0.3)，使表头具有草绿色并且透明的效果。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.CSS表格设置</title>
    <style>

        /*第一步:给整个表格以及内部的所有单元格加上边框*/
        table,th,td {
            border: 1px solid #333;
        }

        /*第二步:将整个表格以及内部单元格的边框全部折叠,就是线条二合一*/
        table {
            /*折叠表格线*/
            border-collapse: collapse;
            text-align: center;
            width: 90%;
            /*表格居中*/
            margin: 50px auto;
            box-shadow: 3px 3px 3px #888;
            background-image: url(../images/gs/bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;

        }

        table caption {
            font-size: 1.6em;
            font-weight: bolder;
            margin-bottom: 30px;
        }


        th,td {
            padding: 10px;
        }
        td img {
            border-radius: 50%;
            box-shadow: 2px 2px 2px #888;
        }
        th {
            background-color: rgba(155,155,0,0.3);
            color: brown;
        }
        .blue {
            color: blue;
            font-weight: bolder;
            font-size: 1em;
        }
    </style>
</head>
<body>
<table>
    <caption>§ 海岛游排行榜 §</caption>
    <tr>
        <th>名次</th>
        <th>海岛</th>
        <th>别称</th>
        <th>经典照片</th>
        <th>签证信息</th>
        <th>交通</th>
        <th>特色旅行</th>
    </tr>
    <tr>
        <td>1</td>
        <td>大溪地</td>
        <td>南太平洋超级度假天堂</td>
        <td><img src="../images/gs/11.jpg" alt="" width="70"></td>
        <td>法国大使馆</td>
        <td>从国内可以经东京、奥克兰转机前往大溪地教</td>
        <td class="blue">帆船环岛游，看传说中的面包树；海底喂食鲨鱼</td>
    </tr>
    <tr>
        <td>2</td>
        <td>塞舌尔</td>
        <td>最纯净的奢华海岛</td>
        <td><img src="../images/gs/22.jpg" alt="" width="70"></td>
        <td>免签</td>
        <td>从香港乘坐塞舌尔航空</td>
        <td class="blue">和乌龟嬉戏，看国宝海椰子、沙滩友</td>
    </tr>
    <tr>
        <td>3</td>
        <td>圣托里尼</td>
        <td>最浪漫纯净的蓝白世界</td>
        <td><img src="../images/gs/33.jpg" alt="" width="70"></td>
        <td>申根签</td>
        <td>从雅典乘船6-8个小时可以到达</td>
        <td class="blue">无敌海景和美丽的夕阳，克里特岛的迷宫</td>
    </tr>
    <tr>
        <td>4</td>
        <td>毛里求斯</td>
        <td>天堂的故乡</td>
        <td><img src="../images/gs/44.jpg" alt="" width="70"></td>
        <td>免签</td>
        <td>上海直飞或香港中转</td>
        <td class="blue">潜水，看奇幻的七色大地和落差超高的瀑</td>
    </tr>
</table>
</body>
</html>

运行实例 »

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

手写代码：css中表格的设置: 加边框，表格线折叠为实绩，表格宽度，对齐，外边距，阴影等322_1.jpg322_2.jpg

总结：

本次课程，我学习了CSS表格的设置。具体来说；

  1. 表格线折叠，实现了表格变为实线的方法；

  2. 表格宽度的设置，我自己制作的表格，我写成了70%;

  3. 表格中插入图片，并且利用box-shadow来实现阴影效果；

  4. 利用border-radius 50%实现图片形状为圆形；

  5. 还有比较基本的内边距padding和外边距margin的设置。

    疑问：如果我表格中文字比较多，字体变小，是不是可以利用class来设置？
    1)我每次做作业，插入的图片都显示不了，我把我本地实际效果图片上传。
    2)图片的文件夹images是不是跟0322的文件夹同级？引入图片的img src="../images/gs/2.jpg"是不是只能两个dot?

    附实际效果图：

    实际效果图.png

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！