使用CSS设计的简洁个人信息表格

html表格

input

158 浏览量更新于2024-08-28 收藏 70KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

"这个示例展示了如何使用CSS来美化一个简单的HTML表格，用于个人信息登记。" 在这个示例中，我们首先看到HTML的基本结构，包括`<!DOCTYPE HTML>`声明、`<html>`、`<head>`和`<body>`标签。在`<head>`部分，设置了页面的字符编码为UTF-8，并定义了页面的标题。此外，还有一个`<style>`标签，里面包含了CSS样式，用于定制表格的外观。在CSS部分，首先定义了`caption`的选择器，它应用于表格的标题（在这个例子中是“个人信息登记”）。设置了标题的高度、字体大小和加粗。接着，定义了`table`的样式，包括边框、边框合并以及在页面中的居中对齐。`th`（表头单元格）设置了高度、宽度、边框和背景颜色。这里的`th`被赋予了灰色背景和边框，以区别于普通单元格。为了创建特殊的单元格样式，定义了`.topleft`类，它有特定的宽度和背景色。然后，`td`（表格数据单元格）被设置为具有相同的高度、宽度、边框和背景色，但文本居中对齐。`.t1`类用于改变某些单元格的背景色。接下来，为了实现一种特殊形状的边框效果，使用了伪元素`#out1`、`#out2`，以及绝对定位的`#in1`、`#in2`和`#in3`。这些元素通过调整边框的宽度和透明度，创建出类似三角形的形状，用于装饰表格的角落。最后，定义了`body`的背景色，使得整个页面有统一的视觉效果。这个示例中涉及的关键知识点包括： 1. **HTML表格结构**：`<table>`、`<caption>`、`<tr>`、`<th>`和`<td>`标签的使用。 2. **CSS基础选择器**：如`caption`、`table`、`th`、`td`等。 3. **CSS属性**：`border`、`border-collapse`、`margin`、`height`、`width`、`background-color`、`text-align`等，用于定义元素的样式。 4. **CSS伪元素**：`::before`和`::after`的使用，这里虽然没有显示，但可以理解其在创建特殊形状时的应用。 5. **CSS定位**：`position`属性（如`absolute`和`relative`）和`top`、`left`属性用于元素的精确定位。 6. **CSS边框技巧**：利用边框宽度和透明度创建特殊形状。 7. **CSS类和ID选择器**：如`.topleft`和`#in1`等，用于给特定元素添加样式。这个简单的表格示例不仅展示了基本的HTML表格构建，还涵盖了CSS中的一些进阶技巧，如定位和边框效果，对于初学者来说是一个很好的学习实例。

资源详情

资源推荐

CSS写的简单表格示例写的简单表格示例

复制代码代码如下:

<!DOCTYPE HTML>

<html>

<head>

content=”text/html”;charset=utf-8>

<title>个人信息登记</title>

<style>

caption{height:50px;font-size:30px;font-weight:bold;}

table{border:1px solid gray;

border-collapse:collapse;

margin:100px auto;}

th{height:60px;width:130px;

border:1px solid gray;

background-color:#D6D3D6;}

.topleft{width:120px; background-color:#C6C7C6;}

td{height:60px;width:130px;

border:1px solid gray;

background-color:#C6C7C6;

text-align:center;}

.t1{width:120px; background-color:#BDBABD;}

#out1{border-top:60px solid transparent;

border-left:60px solid #BDBABD;

height:0px;width:0px;

position:relative;

float:left;}

#out2{border-top:30px solid #D6D3D6;

border-left:120px solid transparent;

height:0px;width:0px;

}

#in1{position:absolute; width:50px; top:-60px; left:10px;}

#in2{position:absolute; width:50px; top:-30px; left:-10px;}

#in3{position:absolute; width:50px; top:-20px; left:-60px;}

body{background-color:#123456;}

</style>

</head>

<body>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38694800

粉丝: 4
资源: 1021

使用CSS设计的简洁个人信息表格

CSS3个人资料填写表单.zip

CSS表格样式1

纯CSS3漂亮表格（圆角、渐变、多背景色）.rar

用html+css写一个表格

html+css 写一个表格

css表格文字居中

css设置细线表格颜色多种

html css 收展型表格

css3 实现表格循环滚动

css表格均匀撑开

用html5和css3写一个表格

css 设置table表格中各个单元格宽度

html表格行列转换,jQuery+CSS实现的table表格行列转置功能示例

用JavaScript和CSS渲染一个表格

css怎么设置表格垂直居中和水平居中

用css加js写一个表格轮播

css让表格单元格之间没有空隙

css实现固定table表格

ionic css表格修饰

帮我写一个HTML+css的个人介绍的表格

最新资源