2025年6月7日 星期六 乙巳(蛇)年 三月十一 设为首页 加入收藏
rss
掌上城东
  • 进入网站首页面

    掌上城东书院
    定制您的专属资源库
  • m.cdsy.xyz

    掌上城东书院
    随时随地，想看就看
关注我们
内容服务
旗下网站

高级搜索
帮助
加入我们

首页

您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

CSS定位、装饰与选择器拓展

时间：07-14来源：作者：点击数：30

1 定位

1.1 定位的基本介绍

在这里插入图片描述
在这里插入图片描述

1.2 定位的基本使用

在这里插入图片描述
在这里插入图片描述

1.3 静态定位

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */

  •         .box {

  •             /* 静态定位是默认值用的是标准流，left，top不起作用 */

  •             position: static;

  •             left: 100px;

  •             top: 200px;

  • 

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <div class="box">box</div>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  • </body>

  • </html>

  •

1.4 相对定位

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* 如果left和right都有, 以left为准; top和bottom都有以top 为准 */

  •         /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */

  •         .box {

  •             position: relative;

  •             right: 200px;

  •             bottom: 400px;

  •             left: 100px;

  •             top: 200px;

  • 

  •             

  • 

  •             /* 

  •                 1. 占有原来的位置

  •                 2. 仍然具体标签原有的显示模式特点

  •                 3. 改变位置参照自己原来的位置

  •             */

  • 

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <div class="box">box</div>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  • </body>

  • </html>

  •

1.5 绝对定位

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */

  •         .box {

  •             /* 绝对定位: 

  •                 先找已经定位的父级, 如果有这样的父级就以这个父级为参照物进行定位;

  •                 有父级, 但父级没有定位, 以浏览器窗口为参照为进行定位

  •             */

  • 

  •             position: absolute;

  •             /* left: 50px; */

  •             left: 0;

  •             top: 0;

  •             

  • 

  •             /* 

  •             1. 脱标, 不占位

  •             2. 改变标签的显示模式特点: 具体行内块特点(在一行共存, 宽高生效)

  •             */

  • 

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <div class="box">box</div>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  • </body>

  • </html>

  •

➢ 绝对定位相对于谁移动？

  1. 祖先元素中没有定位 → 默认相对于浏览器进行移动
  2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
  • <!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>Document</title>

  •     <style>

  •         .father {

  •             position: relative;

  • 

  •             width: 400px;

  •             height: 400px;

  •             background-color: pink;

  •         }

  •         

  •         .son {

  •             /* 父级相对定位; 子级绝对定位*/

  •             /* position: relative; */

  •             /* position: absolute; */

  •             /* right: 100px; */

  • 

  •             width: 300px;

  •             height: 300px;

  •             background-color: skyblue;

  •         }

  • 

  •         .sun {

  •             position: absolute;

  •             /* left: 20px;

  •             top: 30px; */

  •             right: 20px;

  •             bottom: 50px;

  • 

  •             width: 200px;

  •             height: 200px;

  •             background-color: green;

  •         }

  • 

  •         /* 绝对定位查找父级的方式: 就近找定位的父级, 如果逐层查找不到这样的父级, 就以浏览器窗口为参照进行定位 */

  •     </style>

  • </head>

  • <body>

  •     <div class="father">

  •         <div class="son">

  •             <div class="sun"></div>

  •         </div>

  •     </div>

  • </body>

  • </html>

  •

1.6 子元素相对于父元素进行自由移动(子绝父相)

在这里插入图片描述

1.7 案例：卡片模块的hot图标定位案例

在这里插入图片描述
  • /* 课程模块 hot 定位小图 */

  • /*父相对位置*/

  • .box .content li {

  •     position: relative;

  • }

  • 

  • /*子绝对位置*/

  • .box .content li .hot {

  •     position: absolute;

  •     right: -4px;

  •     top: 4px;

  • }

  • 

  • 

  • <ul>

  •                 <li>

  •                     <a href="#">

  •                         <img src="./images/course07.png" alt="">

  •                         <h3>Think PHP 5.0 博客系统实战项目演练</h3>

  •                         <p><span>高级</span>  •  1125人在学习</p>

  •                         <!-- 定位的hot小图 -->

  •                         <img src="./images/hot.png" alt="" class="hot">

  •                     </a>

  •                 </li>

  • </ul>

  •

1.8 案例：使用绝对路径水平居中案例

  • <!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>Document</title>

  •     <style>

  •         .box {

  •             /* 1. 绝对定位的盒子不能使用左右margin auto居中 */

  •             position: absolute;

  •             /* margin: 0 auto; */

  •             /* left: 50%, 整个盒子移动到浏览器中间偏右的位置 */

  •             left: 50%;

  •             /* 把盒子向左侧移动: 自己宽度的一半 */

  •             /* margin-left: -150px; */

  • 

  •             top: 50%;

  •             /* margin-top: -150px; */

  • 

  •             /* 位移: 自己宽度高度的一半 */

  •             transform: translate(-50%, -50%);

  • 

  •             width: 300px;

  •             height: 300px;

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     

  •     <div class="box"></div>

  • </body>

  • </html>

  •

1.9 案例：导航二维码居中在相应的导航栏案例

  • <!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>Document</title>

  •   <style>

  •     * {

  •       margin: 0;

  •       padding: 0;

  •     }

  • 

  •     /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */

  •     .nav {

  •       height: 40px;

  •       border-bottom: 1px solid #ccc;

  •     }

  • 

  •     /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */

  •     ul {

  •       list-style: none;

  •       width: 1200px;

  •       margin: 0 auto;

  •     }

  • 

  •     ul li {

  •       float: left;

  •       width: 20%;

  •       height: 40px;

  •       border-right: 1px solid #ccc;

  •       /* 自动内减 */

  •       box-sizing: border-box;

  •       text-align: center;

  •       line-height: 40px;

  •     }

  • 

  •     ul .last {

  •      border-right: none;

  •     }

  • 

  •     ul li a {

  •       /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */

  •       /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */

  •       display: block;

  •       /* 宽度不设置块元素会默认占满一行 */

  •       height: 40px;

  •       text-decoration: none;

  •       color: #000;

  •     }

  • 

  •     ul li .app {

  •       position: relative;

  •     }

  • 

  •     .code {

  •       position: absolute;

  •       left: 50%;

  •       top: 41px;

  •       transform: translate(-50%);

  •     }

  •   </style>

  • </head>

  • <body>

  •   <!-- 导航 -->

  •   <div class="nav">

  •     <ul>

  •       <li><a href="#">我要投资</a></li>

  •       <li><a href="#">平台介绍</a></li>

  •       <li><a href="#">新手专区</a></li>

  •       <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->

  •       <li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>

  •       <li class="last"><a href="#">个人中心</a></li>

  •     </ul>

  •   </div>

  • 

  • </body>

  • </html>

  •

1.10 案例：底部半透明遮罩效果

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         .banner {

  •             position: relative;

  •             margin: 0 auto;

  •             width: 1226px;

  •             height: 600px;

  •         }

  • 

  •         .mask {

  •             position: absolute;

  •             left: 0;

  •             bottom: 0;

  •             /* 绝对定位的盒子显示模式具备行内块特点: 加宽度高度生效, 如果没有宽度也没有内容, 盒子的宽度尺寸就是0 */

  •             /* width: 1226px; */

  •             /* 如果子级和父级的宽度相同  */

  •             width: 100%;

  •             height: 150px;

  •             background-color: rgba(0,0,0, .5);

  •         }

  •     </style>

  • </head>

  • <body>

  • <div class="banner">

  •         <img src="./images/bg.jpg" alt="">

  •         <!-- 遮罩 -->

  •         <div class="mask">111</div>

  •     </div>

  • </body>

  • </html>

  •

1.11 固定定位

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */

  •         .box {

  •             position: fixed;

  •             left: 0;

  •             top: 0;

  • 

  •             /* 

  •                 1. 脱标-不占位置

  •                 2. 改变位置参考浏览器窗口

  •                 3. 具备行内块特点

  •             */

  • 

  • 

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <div class="box">box</div>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  •     <p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>

  • </body>

  • </html>

  •
在这里插入图片描述

1.12 元素的层级关系

在这里插入图片描述
在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         div {

  •             

  •             width: 200px;

  •             height: 200px;

  •         }

  • 

  •         .one {

  •             position: absolute;

  •             left: 20px;

  •             top: 50px;

  • 

  •             z-index: 1;

  • 

  •             background-color: pink;

  •         }

  • 

  •         .two {

  •             position: absolute;

  •             left: 50px;

  •             top: 100px;

  •             

  •             background-color: skyblue;

  •         }

  • 

  •         /* 

  •             默认情况下, 定位的盒子  后来者居上 ,

  •             z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0

  •             注意: z-index必须配合定位才生效

  •         */

  •     </style>

  • </head>

  • <body>

  •     <div class="one">one</div>

  •     <div class="two">two</div>

  • </body>

  • </html>

  •

2 装饰

2.1 垂直对齐方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  • vertical-align问题1
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     input {

  •       height: 50px;

  • 

  • 

  •     }

  • 

  •   </style>

  • </head>

  • <body>

  •   <input type="text"><input type="button" value="搜索">

  • </body>

  • </html>

  •
  • vertical-align问题解决1
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     /* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */

  •     input {

  •       height: 50px;

  •         

  •       box-sizing: border-box;

  •       vertical-align: middle;

  •     }

  • 

  •   </style>

  • </head>

  • <body>

  •   <input type="text"><input type="button" value="搜索">

  • </body>

  • </html>

  •
  • vertical-align问题2
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •    

  •   </style>

  • </head>

  • <body>

  •   <img src="../images/1.jpg" alt=""><input type="text">

  • </body>

  • </html>

  •
  • vertical-align问题解决2
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •    img {

  •      vertical-align: middle;

  •    }

  •   </style>

  • </head>

  • <body>

  •   <img src="../images/1.jpg" alt=""><input type="text">

  • </body>

  • </html>

  •
  • vertical-align问题3
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     .father {

  •       width: 400px;

  •       height: 400px;

  •       background-color: pink;

  •     }

  • 

  •     

  • 

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <input type="text">

  •   </div>

  • </body>

  • </html>

  •
  • vertical-align问题解决3
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     .father {

  •       width: 400px;

  •       height: 400px;

  •       background-color: pink;

  •     }

  • 

  •     input {

  •       /* vertical-align: middle; */

  •       vertical-align: top;

  •     }

  • 

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <input type="text">

  •   </div>

  • </body>

  • </html>

  •
  • vertical-align问题4
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     .father {

  •       width: 400px;

  •       background-color: pink;

  •     }

  • 

  • 

  • 

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <img src="../images/1.jpg" alt="">

  •   </div>

  • </body>

  • </html>

  •
  • vertical-align问题解决4
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <meta name="viewport" content="width=device-width, initial-scale=1.0">

  •   <title>Document</title>

  •   <style>

  •     .father {

  •       width: 400px;

  •       background-color: pink;

  •     }

  • 

  •     img {

  •       /* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */

  •       /* vertical-align: middle; */

  •       display: block;

  •     }

  • 

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <img src="../images/1.jpg" alt="">

  •   </div>

  • </body>

  • </html>

  •
  • vertical-align问题5
  • <!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>Document</title>

  •   <style>

  •     .father {

  •       width: 600px;

  •       height: 600px;

  •       background-color: pink;

  •       line-height: 600px;

  •     }

  • 

  •    

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <img src="../images/1.jpg" alt="">

  •   </div>

  • </body>

  • </html>

  •
  • vertical-align问题解决5
  • <!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>Document</title>

  •   <style>

  •     .father {

  •       width: 600px;

  •       height: 600px;

  •       background-color: pink;

  •       line-height: 600px;

  •       text-align: center;

  •     }

  • 

  •     img {

  •       vertical-align: middle;

  •     }

  •   </style>

  • </head>

  • <body>

  •   <div class="father">

  •     <img src="../images/1.jpg" alt="">

  •   </div>

  • </body>

  • </html>

  •

2.2 光标类型

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         div {

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  • 

  •             /* 手型 */

  •             /* cursor: pointer; */

  • 

  •             /* 工字型, 表示可以复制 */

  •             /* cursor: text; */

  • 

  •             /* 十字型, 表示可以移动 */

  •             cursor: move;

  • 

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>div</div>

  • </body>

  • </html>

  •

2.3 边框圆角

在这里插入图片描述
在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         .box {

  •             margin: 50px auto;

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  • 

  •             /*从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！*/

  •             

  •             

  •             /* 一个值: 表示4个角是相同的 */

  •             border-radius: 10px;

  • 

  •             /* 4值: 左上  右上   右下   左下 -- 从左上顺时针转一圈 */

  •             /* border-radius: 10px 20px 40px 80px; */

  • 

  •             /* border-radius: 10px 40px 80px; */

  • 

  •             /* border-radius: 10px 80px; */

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div class="box"></div>

  • </body>

  • </html>

  •
在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         .one {

  •             width: 200px;

  •             height: 200px;

  •             background-color: pink;

  • 

  •             /* border-radius: 100px; */

  •             /* 50% : 取盒子尺寸的一半 */

  •             border-radius: 50%;

  •         }

  • 

  •         /* 胶囊状: 长方形, border-radius取值是高度的一半 */

  •         .two {

  •             width: 400px;

  •             height: 200px;

  •             background-color: skyblue;

  • 

  •             border-radius: 100px;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div class="one"></div>

  • 

  •     <div class="two"></div>

  • </body>

  • </html>

  •

2.4 overflow溢出部分显示效果

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         .box {

  •             width: 300px;

  •             height: 300px;

  •             background-color: pink;

  • 

  •             /* 溢出隐藏 */

  •             overflow: hidden;

  • 

  •             /* 滚动: 无论内容是否超出都显示滚动条的位置 */

  •             /* overflow: scroll; */

  • 

  •             /* auto: 根据内容是否超出, 判断是否显示滚动条 */

  •             /* overflow: auto; */

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div class="box">

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •         我是div,测试溢出显示效果我是div

  •     </div>

  • </body>

  • </html>

  •

2.5 元素本身隐藏

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         div {

  •             width: 200px;

  •             height: 200px;

  •         }

  • 

  •         .one {

  •             /* 占位隐藏 */

  •             /* visibility: hidden; */

  • 

  •             /* **** 不占位隐藏 */

  •             display: none;

  • 

  •             background-color: pink;

  •         }

  • 

  •         .two {

  •             background-color: green;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div class="one">one</div>

  •     <div class="two">two</div>

  • </body>

  • </html>

  •
  • 导航二维码居中定位案例-显示隐藏效果.html
  • <!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>Document</title>

  •   <style>

  •     * {

  •       margin: 0;

  •       padding: 0;

  •     }

  • 

  •     /* 因为有通栏：占满一行的边框，所以需要有一个通栏：占满一行的盒子 */

  •     .nav {

  •       height: 40px;

  •       border-bottom: 1px solid #ccc;

  •     }

  • 

  •     /* 因为ul中所有的内容都是在网页的宽度固定并且水平居中的盒子内部，所以设置ul为宽度固定并且水平居中的效果（后面项目中所用到的版心） */

  •     ul {

  •       list-style: none;

  •       width: 1200px;

  •       margin: 0 auto;

  •     }

  • 

  •     ul li {

  •       float: left;

  •       width: 20%;

  •       height: 40px;

  •       border-right: 1px solid #ccc;

  •       /* 自动内减 */

  •       box-sizing: border-box;

  •       text-align: center;

  •       line-height: 40px;

  •     }

  • 

  •     ul .last {

  •      border-right: none;

  •     }

  • 

  •     ul li a {

  •       /* a标签默认是行内元素，宽高由内容撑开，并且无法设置宽高，此时默认情况用户只能点击文字区域才能调整 */

  •       /* 如果把a标签转换成块级元素，此时可以设置宽高，会让a标签范围更大，用户可以点击调整的区域也越大 */

  •       display: block;

  •       /* 宽度不设置块元素会默认占满一行 */

  •       height: 40px;

  •       text-decoration: none;

  •       color: #000;

  •     }

  • 

  •     ul li .app {

  •       position: relative;

  •     }

  • 

  •     .code {

  •       position: absolute;

  •       left: 50%;

  •       top: 41px;

  • 

  •       display: none;

  • 

  •       transform: translate(-50%);

  •     }

  • 

  •     /* 鼠标悬停a 显示二维码图片 */

  •     .nav li a:hover img {

  •         display: block;

  •     }

  •   </style>

  • </head>

  • <body>

  •   <!-- 导航 -->

  •   <div class="nav">

  •     <ul>

  •       <li><a href="#">我要投资</a></li>

  •       <li><a href="#">平台介绍</a></li>

  •       <li><a href="#">新手专区</a></li>

  •       <!-- 因为用户鼠标放在二维码图片上也能跳转，所以证明img也是在a的范围内，因此把img写在a标签的内部 -->

  •       <li><a href="#" class="app">手机微金所 <img src="./images/code.jpg" alt="" class="code"> </a></li>

  •       <li class="last"><a href="#">个人中心</a></li>

  •     </ul>

  •   </div>

  • 

  • </body>

  • </html>

  •

2.6 元素整体透明度

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         div {

  •             width: 400px;

  •             height: 400px;

  •             background-color: green;

  • 

  •             opacity: 0.3;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <div>

  •         <img src="./images/product.png" alt="">

  •         这个字透明吗

  •     </div>

  • </body>

  • </html>

  •

2.7 边框合并

在这里插入图片描述
  • <!DOCTYPE html>

  • <html lang="en">

  • <head>

  •   <meta charset="UTF-8">

  •   <title>Document</title>

  •   <style>

  •     table {

  •       border: 1px solid #000;

  • 

  •       /* 注意: 一定要加给table标签 : 做细线表格 */

  •       border-collapse: collapse;

  •     }

  • 

  •     th,

  •     td {

  •       border: 1px solid #000;

  •     }

  • 

  • 

  •   </style>

  • </head>

  • <body>

  •   <!--  border="1"cellspacing="0" -->

  •   <table>

  •     <caption><h3>前端与移动开发学员学习情况</h3></caption>

  •     <thead>

  •       <tr>

  •         <th>编号</th>

  •         <th>姓名</th>

  •         <th>性别</th>

  •         <th>成绩</th>

  •       </tr>

  •     </thead>

  •     <tbody>

  •       <tr>

  •         <td>1</td>

  •         <td>小姐姐</td>

  •         <td>女</td>

  •         <td>100</td>

  •       </tr>

  •       <tr>

  •         <td>2</td>

  •         <td>小哥哥</td>

  •         <td>男</td>

  •         <td>100</td>

  •       </tr>

  •       <tr>

  •         <td>3</td>

  •         <td>大姐姐</td>

  •         <td>女</td>

  •         <td>100</td>

  •       </tr>

  •     </tbody>

  •     <tfoot>

  •       <tr>

  •         <td colspan="2">总成绩</td>

  •         <td colspan="2">300</td>

  •       </tr>

  •     </tfoot>

  •   </table>

  • </body>

  • </html>

  •

2.8 用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>Document</title>

  •     <style>

  •         div {

  •             /* width: 100px;

  •             height: 100px; */

  •             width: 0;

  •             height: 0;

  •             /* background-color: pink; */

  •             /* transparent: 透明 */

  •             border-top: 10px solid transparent;

  •             border-right: 10px solid transparent;

  •             border-bottom: 10px solid transparent;

  •             border-left: 10px solid orange;

  •         }

  • 

  •         /* 

  •             1. 书写一个盒子

  •             2. 盒子添加四个方向的border, 颜色设置不同

  •             3. 保留其中一个方向的border, 其他方向颜色是transparent

  •         */

  •     </style>

  • </head>

  • <body>

  •     <div></div>

  • </body>

  • </html>

  •

3 选择器拓展

3.1 链接伪类选择器

在这里插入图片描述

3.2 焦点伪类选择器

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* 获得焦点的状态 */

  •         /* 获得焦点: 把光标点到input里面; 失去焦点: 把光标从input里面拿出来 */

  •         input{

  •             vertical-align: bottom;

  •         }

  • 

  •         input:focus {

  •             background-color: pink;

  •         }

  •     </style>

  • </head>

  • <body>

  •     <input type="text">

  •     <input type="password">

  •     <input type="button">

  • </body>

  • </html>

  •

3.3 属性选择器

在这里插入图片描述
  • <!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>Document</title>

  •     <style>

  •         /* text:背景色是粉色; password背景色是skyblue */

  •         input[type='text']  {

  •             background-color: pink;

  •         }

  • 

  •         input[type="password"] {

  •             background-color: skyblue;

  •         }

  • 

  •         /* input:nth-child(1) {} */

  •     </style>

  • </head>

  • <body>

  •     <input type="text">

  •     <input type="password">

  • </body>

  • </html>

  •
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
1
来顶一下
返回首页
返回首页
上一篇:CSS伪类选择器与浮动 下一篇:CSS精灵图、背景图片、文字阴影、盒子阴影、过渡、版心与CSS书写顺序
推荐内容
高考生入学注意：这些大学不收复读生
高考生入学注意：这些大		【健康】纯净水、天然水、矿泉水、白开水有什么区别？日常喝水怎么选？
【健康】纯净水、天然
14种竞赛生升学路径盘点，原来高考只是你的第15个选择！
14种竞赛生升学路径盘		excel后缀xls和xlsx有什么区别？转换格式难不难？
excel后缀xls和xlsx有
相关内容
栏目更新
栏目热门
关于我们 | 联系我们 | 用户协议 | 广告服务 | 申请链接 | 网站地图 | 版权声明 | 用户留言 | 招聘信息 | 帮助中心 | 社区讨论 | 下载服务
中国文明网传播文明
Copyright ©2019-2024 CDSY Corporation, All Rights Reserved
城东书院® CDSY.XYZ 版权所有 湘ICP备19021508号-1 公安网备案湘公网安备 43102202000103号
※学习、工作、生活信息平台※
蜗牛角上争何事，石火光中寄此生。随贫随富且随喜，不开口笑是痴人。
本网大部分资源来源于会员上传，除本网组织的资源外，版权归原作者所有，如有侵犯版权，请立刻和本网联系并提供证据，本网将在三个工作日内改正。
美工素材
免费外链
一起解密
城东书院
美工之家