06-作业练习盒子模型

最新推荐文章于 2022-08-03 17:28:12 发布

VIP文章 Sarrykiss

最新推荐文章于 2022-08-03 17:28:12 发布

阅读量1.4k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/weixin_38178755/article/details/78708724

版权

表格的练习！有关padding与border很重要 编写代码的时候先把结构划分好！
第一个金牌练习
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>金牌top5</title>
    <style>
    *{
        margin: 0px;
        padding: 0px;
    }

    table{
        margin:20px;
        width: 238px;
        /*这个没有想到*/
        border-collapse: collapse;
        /*border: 2px solid #ccc;*/
        font: normal normal 10px Arial;
        text-align:center;
    }
    table caption{
        color:white;
        font:normal bold 14px "楷体";
        background: url(img/captionBg.gif) no-repeat;
        width: 238px;
        height:30px;
        line-height: 30px;
        /*text-indent: -10em;*/
        /*用的是text-left和padding*/
        text-align: left;
        padding-left: 10px;
        border: #0cbaff solid 1px;

    }
    thead{
        background: #D2E9F6;
        border: #a1d3ff solid 1px;

    }
    th{
        height: 27px;
        font-weight: normal;
    }
    tbody{

        border: 1px solid #ccc;

    }
    td{
        border-bottom: #CCC dotted 1px;
        line-height: 25px;
    }
    td a{
        text-decoration: none;
        color: #06c;
    }
    </style>
</head>
<body>

最低0.47元/天解锁文章

Sarrykiss

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
06-作业练习盒子模型

表格的练习！有关padding与border很重要第一个金牌练习 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>金牌top5</title> <style> *{ margin: 0px; padding: 0px; } t
复制链接

扫一扫