创建一个表格，使用类选择器来美化表格样式？

最新推荐文章于 2021-08-29 23:13:43 发布
最新推荐文章于 2021-08-29 23:13:43 发布
阅读量398 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_36886116/article/details/83025289
本文介绍了一种使用CSS类选择器美化HTML表格的方法，通过定义特定的样式类，可以实现对表格背景、边框、字体等元素的个性化定制。示例中包括了输入字段、单选按钮、复选框、下拉菜单等多种表单元素，展示了如何将这些元素整合到一个美观且功能完整的注册表单中。

创建一个表格，使用类选择器来美化表格样式：

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>创建一个表格，使用类选择器美化</title>
    </head>
    <style>
        /*border-style 设置边框的线是实线
         border-color 设置边框颜色*/
        a:link{text-decoration: none;font-size: 20px;}
        .table{background: cyan; border-style: solid;border=1;border-color:pink;font-family: "楷体";font-size: medium;}
        .fieldset{width:500px; height: 80; text-align: center; font-size:25px;font-family: "微软雅黑";}
    </style>
    <body>
        <a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
        <fieldset class="fieldset"> <legend>新用户注册:</legend>
            <table   align="center" class="table" border= "1">
                <thead align="center">填写个人信息</thead>
                <tbody align="center">
                <tr>
                    <th>姓名</th>
                    <th><input type="text" name="user"/></th>
                </tr>
                <tr>
                    <th>密码</th>
                    <th><input type="password" name="ps"/></th>
                </tr>
                <tr>
                    <th>性别</th>
                    <th><input type="radio" name="sex" value="男" checked="checked"/>男
                    <input type="radio" name="sex"value="女"/>女
                    </th>
                </tr>
                <tr>
                    <th>头像</th>
                    <th><input type="file" value="上传头像"/>
                    </th>
                </tr>
                <tr>
                    <th>爱好</th>
                    <th><input type="checkbox" name="hobby" value="篮球" />篮球
                    <input type="checkbox" name="hobby" value="跑步"/>跑步
                    <input type="checkbox" name="hobby" value="游泳"/>游泳
                    <input type="checkbox" name="hobby" value="煲剧"/>煲剧
                    <input type="checkbox" name="hobby" value="其他" checked="checked"/>其他
                    </th>
                </tr>
                    <tr>
                    <th>城市</th>
                    <th><select>
                        <option value="1" selected="selected">请选择城市？</option>
                        <option value="2">北京</option>
                        <option value="2">上海</option>
                        <option value="2">南京</option>
                        <option value="2">天津</option>
                        <option value="2">四川</option>
                    </select>
                    </th>
                </tr>
                    <tr>
                    <th>自我介绍</th>
                    <th><textarea>请填写自我介绍，不超过20个字！
                    </textarea>
                    </th>
                </tr>
                </tr>
                    <tr>
                    <th colspan="2">
                        <input type="submit" value="提交" />
                        <input type="reset" value="重置" />
                    </th>
                    
                    </th>
                </tr></tbody>
            </table>
        </fieldset>
    </body>
</html>

Y-Handsome
关注
伪类选择器在表格中的应用
ssh6666的博客
03-18 401
伪类选择器在表格中的应用 <body> <table> <tr> <td>1</td> <td>11</td> <td>12</td> </tr> <tr> <t...
css三大选择器，及样式，看完秒懂
weixin_63215199的博客
04-06 1951
java前端基础css选择器，及其样式，一看就会，适合刚接触java或前端的同学，加油哇
使用伪类选择器实现表格
weixin_30878501的博客
06-05 358
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
表格的美化
小贾爱编程的博客
03-20 544
表格相关属性：border（边框厚度）、cellspacing（单元格间距）、cellpadding（单元格填充）。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"&g...
CSS表格及表单美化
Super_Robot的博客
06-09 8745
CSS表格及表单美化 有效的传递页面信息 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 具有良好的用户体验 <span> 标签的作用 能让某几个文字或者某个词语凸显出来 <span>字体</span> <p>凸显<span class="show">“字体”&l...
如何利用HTML和Dreamweaver创建一个包含表格和表单的网页，并使用CSS样式使其更加美观？
最新发布
11-11
要使用HTML和Dreamweaver创建这样的页面，首先需要了解基本的HTML标签和属性，然后学习如何使用CSS选择器来美化页面。以下是详细的步骤和解释： 参考资源链接：[HTML与Dreamweaver网页设计入门教程]...
纯CSS3表格美化特效特效代码
03-20
例如，我们可以使用`:nth-child()`选择器来针对表格的行(`tr`)或单元格(`td`)设置不同的样式，实现交替行的颜色效果，增加阅读的舒适度。`:first-child`和`:last-child`选择器则可以用来为第一行或最后一行添加特别...
表格边框以虚线显示的css样式
12-08
在实际的HTML代码中，可以看到一个使用这些CSS样式的表格实例。`<table>`元素具有`class="table5"`，这使得它应用了之前定义的`.table5`样式。表格包含多行`<tr>`和单元格`<td>`，其中`<tr class="last">`表示最后一...
CSS表格样式：圆角，隔行，变色的具体实现
09-25
在CSS中，`table` 是一个非常重要的选择器，它用于选中所有的表格元素。以下是一些基本的表格样式设置： ```css table { max-width: 100%; /* 确保表格宽度不超过其容器 */ background-color: transparent; /* ...
WEB2.0风格的CSS表格样式设计与美化技巧
以下将详细介绍如何使用CSS来控制和美化表格。 ### 1. 表格基础CSS样式 在开始之前，我们需要了解表格的基础结构。一个标准的HTML表格包含`<table>`, `<tr>`, `<th>`, `<td>`等标签。通过CSS可以为这些标签设置样式...
第49天学习打卡（CSS 层次选择器 结构伪类选择器 属性选择器 美化网页元素 盒子模型）
doudoutj的博客
02-26 243
推荐书籍：码出高效: Java 开发手册 2.2 层次选择器 idea里代码规范是按：ctrl +alt+L快捷键 注释快捷键：ctrl+/ 1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你 <style> /*p{*/ /* background: #02ff00;*/ /*}*/ /* 后代选择器 */ body p{ background: red;
HTML+CSS知识点总结
weixin_30439131的博客
02-13 910
HTML一、概述 1、什么是 HTML：超文本标记语言，使用一对尖括号括起来，实现特殊的效果定义，用于编写网页（后缀为.html、.htm的文件） 2、编辑：文本编辑工具，都可以编写 HTML页面 记事本、editplus、ultraedit、DW、webstorm、apanta... 运行：浏览器 IE、firefox、chrome、opera、safari 3、HTML是一种解释...
CSS的类选择器
歪脖先生的博客
12-01 1938
类选择器 类选择器是以独立于文档元素的方式来指定样式，如果应用样式，而不考虑具体涉及的元素时，最常用的就是类选择器。 类选择器，是在类名前面加一个点（.）定义的选择器。为了提高选择器的灵活性，类选择器的名称，可以由用户自定义。如，以下代码定义了名称为 red 的类选择器： .red { color: red } 要为一个元素应用类选择器定义的样式，还需要在HTML代码中，为元素
CSS中的十二种结构伪类选择器
一碗周
08-29 5509
Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端????????‍????，如果我写的文章有幸可以得到你的青睐，万分有幸~ 这是【从头学前端】系列文章的第二十七篇-《CSS中的十二种结构伪类选择器》 编写不易转载请获得允许 写在前面 本篇文章我们将来学习CSS中的结构伪类选择器，该类选择器包含的内容如下表所示： 伪类选择器 作用 selector:first-child 用来定位一组兄弟元素中的第一个元素 selector:last-child 用来
使用CSS样式对表格进行美化并对伪类的使用进行解析
starjuly的专栏
07-09 1130
通过使用html的表格展示新用户注册的页面，并使用CSS样式来改变其外观，使其更好看；伪类的使用：link是定义初始时的颜色，visited是定义点击后的颜色， hover是定义选中时的状态并出现下划线，text-decoration：定义下划线是否存在。
类名选择器设置对应的元素样式
蔡定努
06-02 3590
html表格伪类选择器,css3常用伪类选择改变表单样式
weixin_39710249的博客
06-03 272
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器，那么这里就和大家分享一下css3常用伪类选择改变表单样式的使用方法改变input输入框中placeholder的字体样式：:-moz-placeholder{/*MozillaFirefox4to18*/color:#f00;}::-moz-pla...
HTML5选择器，类样式
anv4932的博客
07-29 240
选择器：css的选择器怎么用，这里就怎么用 document.querySelector("选择器")；//只能获取一个，默认第一个 var op=document.querySelector("div p"); op.style.backgroundColor="yellow"; document.querySelectorAll("选择器");//获取的是多个 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值