欢迎光临
我的个人博客网站

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

使用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;             }         }     } }

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

 

 

表格标题与对齐处理:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</li>                 <li>cyy1</li>             </ul>         </section>         <section>             <ul>                 <li>2</li>                 <li>cyy2</li>             </ul>         </section>     </article>      <hr>      <table border="1">         <caption>表格标题</caption>         <thead>             <tr>                 <td>编号</td>                 <td>标题</td>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>         </tfoot>     </table> </body> </html>

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

 

 

表格颜色与背景定义:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</li>                 <li>cyy1</li>             </ul>         </section>         <section>             <ul>                 <li>2</li>                 <li>cyy2</li>             </ul>         </section>     </article>      <hr>      <table border="1">         <caption>表格标题</caption>         <thead>             <tr>                 <td>编号</td>                 <td>标题</td>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>         </tfoot>     </table> </body> </html>

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

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</li>                 <li>cyy1</li>             </ul>         </section>         <section>             <ul>                 <li>2</li>                 <li>cyy2</li>             </ul>         </section>     </article>      <hr>      <table border="1">         <caption>表格标题</caption>         <thead>             <tr>                 <td>编号</td>                 <td>标题</td>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>         </tfoot>     </table> </body> </html>

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

 

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

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

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

 

 

修改之后的效果:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</li>                 <li>cyy1</li>             </ul>         </section>         <section>             <ul>                 <li>2</li>                 <li>cyy2</li>             </ul>         </section>     </article>      <hr>      <table border="1">         <caption>表格标题</caption>         <thead>             <tr>                 <td>编号</td>                 <td>标题</td>             </tr>         </thead>         <tbody>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>             <tr>                 <td></td>                 <td></td>             </tr>         </tfoot>     </table> </body> </html>

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

 

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

 

细线无边框表格样式:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>         </tfoot>     </table> </body> </html>

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

 

 

数据表格设计:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>             <tr>                 <td>1</td>                 <td>cyy1</td>             </tr>         </tbody>         <tfoot>             <tr>                 <td>2</td>                 <td>cyy2</td>             </tr>         </tfoot>     </table> </body> </html>

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

 

 

多种方式定义列表符号:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>item</li>         <li>item</li>         <li>item</li>         <li>item</li>     </ul> </body> </html>

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

 

 

多图背景控制列表符号:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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>item</li>         <li>item</li>         <li>item</li>         <li>item</li>     </ul> </body> </html>

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

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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数据">我是h2</h2> </body> </html>

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

 

 

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

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 使用 CSS 3 操作数据内容样式 -cyy
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏