盒子模型，表格案例

最新推荐文章于 2022-12-07 23:07:38 发布
最新推荐文章于 2022-12-07 23:07:38 发布
阅读量335 收藏 1
点赞数
文章标签： 前端 javascript html
aaa
本文链接：https://blog.csdn.net/djydjy3333/article/details/125817439
版权

【玩转CSS】盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
    <style>
        table {
            width: 500px;
            height: 251px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid rebeccapurple;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>

<body>
<table align="center" cellspacing="0">
    <!-- 表格头部 -->
    <thead>
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    </thead>
    <!-- 表格主体 -->
    <tbody>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td>🟩</td>
        <td>37435</td>
        <td>1755523</td>
        <td><a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search"
               target="_blank">贴吧</a> <a
                href="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftu1.whhost.net%2Fuploads%2F20190322%2F13%2F1553234347-WEUxvwmusH.jpg&refer=http%3A%2F%2Ftu1.whhost.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659423152&t=213ca1853aeb315070cda482b002ba76"
                target="_blank">图片</a> <a
                href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                target="_blank">百科</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td>🟩</td>
        <td>86124</td>
        <td>675432</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>西游记</td>
        <td>🛑</td>
        <td>39212</td>
        <td>547654</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>东游记</td>
        <td>🛑</td>
        <td>27523</td>
        <td>756845</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td>🟩</td>
        <td>16321</td>
        <td>785676</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>6</td>
        <td>水浒传</td>
        <td>🛑</td>
        <td>57576</td>
        <td>1231421</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    <tr>
        <td>7</td>
        <td>三国演义</td>
        <td>🛑</td>
        <td>22334</td>
        <td>762586</td>
        <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
    </tr>
    </tbody>
</table>
</body>

</html>
zhangsan3333
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html盒子嵌套教程,深入讲解CSS中盒模型的用法
weixin_31777631的博客
06-05 3898
视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素，从而将(X)HTML转化成制作者设计的样子。例如：如何生成元素框；处理各元素之间的关系；根据框的尺寸、定位等CSS属性来确定元素的位置等；因此，要掌握使用CSS控制页面内元素的技巧，就需要深入了解框模型(Box Model)及视觉格式化模型的原理。文档树中的元素都产生矩形的框(Bo...
html怎么给表格添加盒子,div+css table布局实现代码
weixin_29164185的博客
06-16 1191
div+css table布局实现代码发布时间：2009-03-10 00:44:56 作者：佚名 我要评论下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧许多网页设计师都喜欢，将两个或者多个容器等高的并排放置，并在里面展示每个容器的内容，就象经典表格布局中的单元格控制几个栏目的位置，也喜欢容器的内容居下面是我翻译的内容，是根据我对...
css各种高级实例+源码
12-20
CSS核心基础 第0课《CSS设计彻底研究》简介 CSS与(X)HTML核心基础（上） CSS与(X)HTML核心基础（中） CSS与(X)HTML核心基础（下） CSS禅意花园介绍 深入CSS盒子模型 深入理解盒子模型（上） 深入理解盒子模型（下） 浮动与定位（上） 浮动与定位（下） 文字与图像（上） 文字与图像（下） CSS导航设计 链接与导航 竖直菜单（上） 竖直菜单（下） 水平菜单 下拉菜单 CSS高级样式设计 表格也精彩 高级网页元素样式 圆角设计 CSS整体布局详解 固定宽度布局 不固定宽度布局（上） 不固定宽度布局（下） 综合布局实践
HTML表格和div
Mamie778的博客
07-03 861
三、HTML表格与div应用**（由于<>显示不出来，我用《》代替了）** 1.创建表格：表格由 《table》 来定义，行用 《tr》 定义，列用 《td》 定义 ①创建一个简单的表格 表格缺个边框，添加一个border属性： ②完善表格： 《catpital》 定义表格标题 《th》 定义表头，表头通常用于列名 表格其他属性：（使用与border类似） 表格还可以设置宽度width和高度height以及背景颜色bgcolor 《cellspacing》 设置单元格与单元格之间的距离
HTML与CSS结合制作相应的盒子模型
qq_64314976的博客
08-19 1558
综合应用HTML基本技术、CSS表格技术和相应的盒子模型概念来设计实践内容，以更简洁、更丰富的效果呈现出来。利用盒子模型完成相应内容，除显示新闻、公告列表可以使用表格外，其他布局尽量使用div等元素。页面布局参考如下：Banner栏横向填充，width=“100%”；主体内容区固定宽度，width=“1000”，使用嵌套表格进行布局和排版；底边栏横向填充，width=“100”%。
html表格在盒子里居中,经典题-设置盒子在浏览器中垂直水平居中
weixin_42303627的博客
06-20 646
基础结构、样式 盒子 复制代码html,body {height: 100%;}复制代码一、基于定位的方法盒子宽高已知方法1：需要宽高进行计算body{position：relative;}.box {position: absolute;top: 50%;left: 50%;margin-top: - height/2 px;margin-left: - width/2 px;}复制代码方法2：...
web基础---html
weixin_47181329的博客
12-07 275
无
CSS(三)_表格，盒子模型，边框
feicongcong的博客
12-01 940
CSS 盒子模型(Box Model) Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。 元素的宽度和高度 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道
css设计彻底研究 源代码
04-18
第3章　深入理解盒子模型 　3.1　盒子的内部结构　3.2　边框（border）　3.2.1　实验1——border-style 3.2.2　属性值的简写形式　3.2.3　实验2——属性的缩写形式　3.2.4　实验3——边框与背景　3.3　内边距...
精通CSS.DIV.网页样式与布局 源码
09-10
　10.2　盒子模型 　10.3　元素的定位　 　10.4　定位实例一：轻轻松松给图片签名　 　10.5　定位实例二：文字阴影效果　 　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的...
设置盒子（图片，表格等）在整个页面居中
qq_45568705的博客
03-16 1931
1、HTML方式采用table实现 如下列设计一个简单地登录框（宽300，长200）使其在页面正中间 实现方式：采用表格嵌套的方式。 外表格占满整个页面，内表格在外表格的第一行第一列，且在中间，从而实现内表格在整个页面的中间。 <body > <table width="100%" height="100%" border="0" cellspacing="0" cell...
html常用元素之表格元素
yin_991的博客
10-25 7929
html常用元素之表格元素及其属性
html最清楚检查之盒子模型案例一（表格自适应）
风行者
05-22 528
<!doctype html> <html lang="en"> <!-- position:absolute; 值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bo...
HTML——表格、表格嵌套、表格布局
热门推荐
ShyuDai的博客
10-14 5万+
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&am
WEB前端之表格设计和盒子模式
sxb956347789的博客
11-16 1893
表格设计： 表格 #e{text-align:center;} table,th,td {border:1px solid red;}/*加边框,表格有双边框。因为表和th/ td元素有独立的边界。显示表的单边框，用 border-collapse属性。*/ th,td{text-align:center;}/*th,
盒子模型和表单
mxz_l的博客
06-16 312
盒子模型，定位，表单
day7表格属性+盒模型
weixin_58459702的博客
07-23 142
day7表格属性+盒模型
盒子与表格样式
weixin_42977865的博客
09-24 252
盒子模型 默认的盒子模型 width:content 内容宽度100% 100px 10em height：content 内容高度0 由子元素填充 100px 10em 100% 100%相对于父元素 border 边框 border:1px solid red; 粗细 样式 颜色 padding：填充 padding:10px; 上右下左 padding:10px 20px; 上下 左右 padding:10px 20px 30px 40px; 上右下左 padding-top:10px; padd
html5盒子模型案例
最新发布
09-15
下面是一个简单的HTML5盒子模型的案例： ```html <!DOCTYPE html> .box { width: 200px; height: 200px; border: 1px solid black; padding: 20px; margin: 20px; } <p>This is some content inside ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值