热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用CSS3操作数据内容样式cyy

使用css定制表格:.table{display:table;*相当于table*section{&:nth-of-type(1){display:table-header-gro

使用css定制表格:


.table{
display:table; /*相当于table*/
section{
&:nth-of-type(1){
display:table-header-group; /*相当于thead*/
background:#555;
color:#fff;
}
&:nth-of-type(2){
display:table-row-group; /*相当于tbody*/
}
&:nth-of-type(3){
display: table-footer-group; /*相当于tfoot*/
background:#f3f3f3;
}
ul{
display:table-row; /*相当于tr*/
li{
display:table-cell; /*相当于td*/
border:1px solid #ddd;
padding:3px;
}
}
}
}

技术图片

 

 

表格标题与对齐处理:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table caption
{
background
:pink;
/* 表格标题的位置,默认在上面 */
caption-side
:bottom;
caption-side
:top;
}
table
{
width
:50%;
}
table tr td
{
text-align
:center;
vertical-align
: middle;
}
style>
head>
<body>
<article class="table">
<nav>表格标题nav>
<section>
<ul>
<li>编号li>
<li>标题li>
ul>
section>
<section>
<ul>
<li>1li>
<li>cyy1li>
ul>
section>
<section>
<ul>
<li>2li>
<li>cyy2li>
ul>
section>
article>
<hr>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
tfoot>
table>
body>
html>

技术图片

 

 

表格颜色与背景定义:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table
{
background
:pink;
width
:300px;
}
/* table tbody tr{
background:pink;
}
table tr td{
background:lightblue;
}
*/
/* 隔行变色效果: */
table tbody tr:nth-child(odd)
{
background
:lightblue;
}
/* 表格设置背景图片 */
table
{
background-image
:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604764182871&di=81abc90dfe28552a8ed02579c4ec45ce&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg);
background-size
:cover;
}
style>
head>
<body>
<article class="table">
<nav>表格标题nav>
<section>
<ul>
<li>编号li>
<li>标题li>
ul>
section>
<section>
<ul>
<li>1li>
<li>cyy1li>
ul>
section>
<section>
<ul>
<li>2li>
<li>cyy2li>
ul>
section>
article>
<hr>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
tfoot>
table>
body>
html>

技术图片

 

 

细线表格与间距与空白单元格处理:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table
{
background
:pink;
width
:300px;
/* 细线表格 */
/* border-spacing:5px; */
border-collapse
:collapse;
/* 空单元格的处理 */
empty-cells
:hide;
}
table,td
{
border
:1px solid #ddd;
}
table tr td
{
padding
:10px;
}
style>
head>
<body>
<article class="table">
<nav>表格标题nav>
<section>
<ul>
<li>编号li>
<li>标题li>
ul>
section>
<section>
<ul>
<li>1li>
<li>cyy1li>
ul>
section>
<section>
<ul>
<li>2li>
<li>cyy2li>
ul>
section>
article>
<hr>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
tfoot>
table>
body>
html>

技术图片

 

可以看到尽管使用了empty-cells,但是空单元格依旧存在;

这是因为只有是 border-collapse:separate; 边框样式才能设置隐藏;

技术图片

 

 

修改之后的效果:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table
{
background
:pink;
width
:300px;
/* 细线表格 */
/* border-spacing:5px; */
border-collapse
:separate;
/* 空单元格的处理 */
empty-cells
:hide;
}
table,td
{
border
:1px solid #ddd;
}
table tr td
{
padding
:10px;
}
style>
head>
<body>
<article class="table">
<nav>表格标题nav>
<section>
<ul>
<li>编号li>
<li>标题li>
ul>
section>
<section>
<ul>
<li>1li>
<li>cyy1li>
ul>
section>
<section>
<ul>
<li>2li>
<li>cyy2li>
ul>
section>
article>
<hr>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
<tr>
<td>td>
<td>td>
tr>
<tr>
<td>td>
<td>td>
tr>
tfoot>
table>
body>
html>

技术图片

 

 可以看到空白单元格的边框没有了,但是位置仍旧存在;

 

细线无边框表格样式:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table
{
width
:300px;
border
:none;
border-collapse
:collapse;
}
td
{
border
:none;
border-right
:1px solid #ddd;
border-top
:1px solid #ddd;
padding
:10px;
}
table td:last-child
{
border-right
:none;
}
table tr:last-child td
{
border-bottom
:1px solid #ddd;
}
table thead
{
background
:#f3f3f3;
}
style>
head>
<body>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
tfoot>
table>
body>
html>

技术图片

 

 

数据表格设计:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:10px;
}
table
{
width
:300px;
border
:none;
border-collapse
:collapse;
}
table td
{
border
:none;
border-top
:1px solid #ccc;
padding
:10px;
}
table tr:last-child td
{
border-bottom
:1px solid #ccc;
}
table tr:hover
{
cursor
:pointer;
background
:#f3f3f3;
}
style>
head>
<body>
<table border="1">
<caption>表格标题caption>
<thead>
<tr>
<td>编号td>
<td>标题td>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
<tr>
<td>1td>
<td>cyy1td>
tr>
tbody>
<tfoot>
<tr>
<td>2td>
<td>cyy2td>
tr>
tfoot>
table>
body>
html>

技术图片

 

 

多种方式定义列表符号:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:200px;
}
ul
{
/* list-style-type:decimal;
list-style-type:lower-roman;
list-style-type:lower-alpha;
*/
list-style-type
:none;
list-style-image
:url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1020845411,2129931148&fm=26&gp=0.jpg);
list-style-image
:linear-gradient(red,pink,orange,lightblue);
list-style-image
:radial-gradient(red,pink,orange,lightblue);
}
style>
head>
<body>
<ul>
<li>itemli>
<li>itemli>
<li>itemli>
<li>itemli>
ul>
body>
html>

技术图片

 

 

多图背景控制列表符号:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:200px;
}
ul
{
list-style-type
:none;
}
ul li
{
background-image
:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604766922678&di=51bf231496e65f0aeaf6ae5fef91155e&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F01%2F20180401162305_W3ia4.jpeg);
background-size
:15px 15px;
background-repeat
:no-repeat;
background-position
:0px 2px;
text-indent
:20px;
border-bottom
:1px solid #ddd;
margin-bottom
:10px;
padding-bottom
:5px;
}
style>
head>
<body>
<ul>
<li>itemli>
<li>itemli>
<li>itemli>
<li>itemli>
ul>
body>
html>

技术图片

 

 

after与before追加元素样式使用:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:200px;
}

h2
{
cursor
:pointer;
}
h2:hover::after
{
content
:attr(data-content);
color
:red;
background
:pink;
border
:1px solid #ddd;
}
style>
head>
<body>
<h2 data-content="这是data数据">我是h2h2>
body>
html>

技术图片

 

 

使用after与before制作绚丽的表单:


DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=">
<meta name="keywords" content="关键词1,关键词2,关键词3">
<meta name="description" content="网站描述bla bla">
<title>网站标题title>
<link rel="stylesheet" href="style.css">
<style>
*
{
margin
:0;
padding
:0;
}
body
{
padding
:200px;
}

.field
{
position
: relative;
}
.field::after
{
content
:‘‘;
display
:block;
background-image
:linear-gradient(to right,white,red,green,blue,white);
height
:1px;
}
input
{
width
:100%;
border
:none;
outline
:none;
text-align
:center;
}
.field::before
{
content
:attr(data-help);
display
:block;
color
:#555;
font-size
:12px;
position
:absolute;
top
:-10px;
width
:100%;
text-align
:center;

}
style>
head>
<body>
<div class="field" data-help="请输入用户名">
<input type="text">
div>
body>
html>

技术图片

 

使用 CSS 3 操作数据内容样式 -cyy



推荐阅读
  • 本文介绍了lua语言中闭包的特性及其在模式匹配、日期处理、编译和模块化等方面的应用。lua中的闭包是严格遵循词法定界的第一类值,函数可以作为变量自由传递,也可以作为参数传递给其他函数。这些特性使得lua语言具有极大的灵活性,为程序开发带来了便利。 ... [详细]
  • 本文介绍了使用Java实现大数乘法的分治算法,包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
  • 本文介绍了指针的概念以及在函数调用时使用指针作为参数的情况。指针存放的是变量的地址,通过指针可以修改指针所指的变量的值。然而,如果想要修改指针的指向,就需要使用指针的引用。文章还通过一个简单的示例代码解释了指针的引用的使用方法,并思考了在修改指针的指向后,取指针的输出结果。 ... [详细]
  • 导出功能protectedvoidbtnExport(objectsender,EventArgse){用来打开下载窗口stringfileName中 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • HDU 2372 El Dorado(DP)的最长上升子序列长度求解方法
    本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法,通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
  • 猜字母游戏
    猜字母游戏猜字母游戏——设计数据结构猜字母游戏——设计程序结构猜字母游戏——实现字母生成方法猜字母游戏——实现字母检测方法猜字母游戏——实现主方法1猜字母游戏——设计数据结构1.1 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • CentOS 7部署KVM虚拟化环境之一架构介绍
    本文介绍了CentOS 7部署KVM虚拟化环境的架构,详细解释了虚拟化技术的概念和原理,包括全虚拟化和半虚拟化。同时介绍了虚拟机的概念和虚拟化软件的作用。 ... [详细]
  • 本文介绍了一种解析GRE报文长度的方法,通过分析GRE报文头中的标志位来计算报文长度。具体实现步骤包括获取GRE报文头指针、提取标志位、计算报文长度等。该方法可以帮助用户准确地获取GRE报文的长度信息。 ... [详细]
  • PDF内容编辑的两种小方法,你知道怎么操作吗?
    本文介绍了两种PDF内容编辑的方法:迅捷PDF编辑器和Adobe Acrobat DC。使用迅捷PDF编辑器,用户可以通过选择需要更改的文字内容并设置字体形式、大小和颜色来编辑PDF文件。而使用Adobe Acrobat DC,则可以通过在软件中点击编辑来编辑PDF文件。PDF文件的编辑可以帮助办公人员进行文件内容的修改和定制。 ... [详细]
  • CentOS 6.5安装VMware Tools及共享文件夹显示问题解决方法
    本文介绍了在CentOS 6.5上安装VMware Tools及解决共享文件夹显示问题的方法。包括清空CD/DVD使用的ISO镜像文件、创建挂载目录、改变光驱设备的读写权限等步骤。最后给出了拷贝解压VMware Tools的操作。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • asp中如何嵌入python的简单介绍
    本文目录一览:1、如何在IIS中执行Python脚本 ... [详细]
author-avatar
魔方16674
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有