css常用的一些属性：

1.去掉下划线 ：text-decoration:none ;
2.加上下划线： text-decoration: underline;

3.调整文本和图片的位置（也就是设置元素的垂直对齐方式）：vertical-align:-20px;

没设置之前：

设置之后：

3.外边距：margin
4.内边距：padding
5.居中；margin 0 auto;(只是针对盒子居中)

6内联标签是不可以设置长宽的，有时候就得把内联标签变成块级标签或者块级内联标签，这就用到了display标签。。
　　1.将内联标签转换成块级标签：display:block;
　　2.将块级标签转换成内联标签：display:inline;
　　3.块级内联标签：display；inline-block;
　　　块级内联标签可以像块级一样可设长宽，也可像内联一样在一行显示
6.隐藏的两个方法：display:none; #隐藏了会顶上去
　　　　　　　　　visibility :hidden; #隐藏了不会顶上去
7.隐藏溢出的两个方法：overflow :auto;
　　　　　　　　　　　overflow :scoll;  #带滚动条
8.文本水平居中：text-align:center;
   文本垂直居中：line-height;
9.伪类；
　　1.没访问之前： a:link{color:red;} 
　　2.鼠标悬浮时： a:hover{color:green;}
　　3.访问过后： a:visited{color:yellow;}
　　4.鼠标点击时 a:active{color:blue;}
　　5.在p标签属性为c2的后面加上内容
　　p.c2:after{
　　　　content:'hello';
　　　　color:red;
　　}
6.在p标签属性为c2的前面加上内容
　　p.c2:before{
　　　　content:'啦啦啦';
　　　　color:red;
　　}
10.position的四种属性
　　1.static：默认位置
　　2.fixed：完全脱离文档流，固定定位(以可视窗口为参照物)
　　3.relative:相对定位(参照的是自己本身的位置)，没有脱离文档流，没有顶上去，会保持自己的位置不动。可以使用top left进行定位
　　4.absolute:绝对定位：脱离了文档流（参照的是按已定位的父级标签定位，如果找不到会按body的去找）
注意！！：将定位标签设置为absolute，将他的父级标签设置为定位标签 （relative）

11.float和position的区别
　　float：半脱离文档流
　　position：全脱离文档流
12.z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .img1 {
  8.               position:absolute;
  9.               left:0;
  10.               top:0;
  11.               z-index:-10;
  12.               }
  13.         .img2 {
  14.               position:absolute;
  15.               left:0;
  16.               top:0;
  17.               z-index:-3; //越大越往前排，离你越近
  18.               }
  19.         .img3 {
  20.               position:absolute;
  21.               left:0;
  22.               top:0;
  23.               z-index:-5;
  24.               }
  25.     </style>
  26. </head>
  27. <body>
  28. <div class="img3"><img src="作业/1.jpg" alt=""></div>
  29. <div class="img2"><img src="作业/2.jpg" alt=""></div>
  30. <div class="img1"><img src="作业/3.jpg" alt=""></div>
  31. </body>
  32. </html>

测试z-index

13.透明度：opacity:0.4;
14.边框弧度：border-radius: 50%;
15.去除列表前面的标志：list-style:none;
16.对齐上面和左边最顶部：padding:0; margin:0;
17.字体加粗样式： font-weight: 900; 
18.需要注意的几个逻辑表达式的问题，下面的这个和js的&&，||用法是一样的
　　print(3 and 5) #两个为真才为真
　　print(0 and 3) #0是假就不判断后面了，直接成假了
　　print(0 or 3) #有一个为真就为真
　　print(2 or 3) #2已经为真了那么就不会去判断后面了

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             padding:0;
  9.             margin: 0;
  10.         }
  11.         .outer{
  12.             width:790px;
  13.             height: 340px;
  14.             border: solid 1px red;
  15.             margin: 0 auto;
  16.             margin-top: 40px;
  17.             position: relative;
  18.         }
  19.         ul{
  20.             list-style: none;
  21.             position: absolute;
  22.             top: 0;
  23.             left:0;
  24.         }
  25.         .com{
  26.             position: absolute;
  27.             display: none;
  28.             /*visibility: hidden;*/
  29.         }
  30.         .num{
  31.             position: absolute;
  32.             top: 300px;
  33.             left: 330px;
  34.         }
  35.         .num li{
  36.             display: inline-block;
  37.             width: 20px;
  38.             height: 20px;
  39.             color: black;
  40.             background-color: white;
  41.             border-radius: 50%; //边框弧度
  42.             line-height: 20px;
  43.             text-align: center;
  44.         }
  45.         .btn{
  46.             position: absolute;
  47.             width: 40px;
  48.             height: 60px;
  49.             background-color: grey;
  50.             opacity: 0.5; //透明度
  51.             color: black;
  52.             font-weight: 900;  //加粗
  53.             text-align: center;
  54.             line-height: 60px;
  55.             top:50%;
  56.             margin-top: -30px;
  57.         }
  58.         .leftbtn{
  59.             left:0;
  60.         }
  61.          .rightbtn{
  62.              right:0;
  63.  
  64.         }
  65.     </style>
  66. </head>
  67. <body>
  68. <div class="outer">
  69.     <ul class="img">
  70.         <li><a href=""><img src="1.jpg" alt=""></a></li>
  71.         <li class="com"><a href=""><img src="2.jpg" alt=""></a></li>
  72.         <li class="com"><a href=""><img src="3.jpg" alt=""></a></li>
  73.         <li class="com"><a href=""><img src="4.jpg" alt=""></a></li>
  74.         <li class="com"><a href=""><img src="5.jpg" alt=""></a></li>
  75.         <li class="com"><a href=""><img src="6.jpg" alt=""></a></li>
  76.     </ul>
  77.     <ul class="num">
  78.         <li></li>
  79.         <li></li>
  80.         <li></li>
  81.         <li></li>
  82.         <li></li>
  83.     </ul>
  84.     <div class="leftbtn btn"> < </div>
  85.     <div class="rightbtn btn"> > </div>
  86.  
  87. </div>
  88.  
  89. </body>
  90. </html>

实现图片切换的效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>后台管理布局</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.         }
  10.         a{
  11.             text-decoration: none;
  12.         }
  13.         .header{
  14.             width: 100%;
  15.             height: 44px;
  16.             background-color: #2459a2;
  17.         }
  18.         .title li{
  19.             width: 100px;
  20.             height: 80px;
  21.             list-style: none;
  22.             text-align: center;
  23.             line-height: 80px;
  24.             margin-top: 20px;
  25.             padding: 50px;
  26.             background-color: blue;
  27.         }
  28.         .leftmenu .title a{
  29.             font-size: 18px;
  30.             color: white;
  31.         }
  32.         .leftmenu{
  33.             width: 300px;
  34.             background-color: grey;
  35.             position: fixed;
  36.             top: 44px;
  37.             left:0;
  38.             bottom: 0;
  39.         }
  40.         .con{
  41.             position: fixed;
  42.             top: 44px;
  43.             left: 300px;
  44.             right:0;
  45.             bottom: 0;
  46.             background-color: darksalmon;
  47.             overflow: scroll;
  48.         }
  49.  
  50.     </style>
  51. </head>
  52. <body>
  53. <div class="header"></div>
  54. <div class="content">
  55.     <div class="leftmenu">
  56.         <ul class="title">
  57.             <li><a href="">菜单一</a></li>
  58.             <li><a href="">菜单二</a></li>
  59.             <li><a href="">菜单三</a></li>
  60.         </ul>
  61.     </div>
  62.     <div class="con">
  63.         <h1>海燕啊</h1>
  64.         <h1>海燕啊</h1>
  65.         <h1>海燕啊</h1>
  66.         <h1>海燕啊</h1>
  67.         <h1>海燕啊</h1>
  68.         <h1>海燕啊</h1>
  69.         <h1>海燕啊</h1>
  70.         <h1>海燕啊</h1>
  71.         <h1>海燕啊</h1>
  72.         <h1>海燕啊</h1>
  73.         <h1>海燕啊</h1>
  74.         <h1>海燕啊</h1>
  75.         <h1>海燕啊</h1>
  76.         <h1>海燕啊</h1>
  77.         <h1>海燕啊</h1>
  78.         <h1>海燕啊</h1>
  79.         <h1>海燕啊</h1>
  80.         <h1>海燕啊</h1>
  81.         <h1>海燕啊</h1>
  82.         <h1>海燕啊</h1>
  83.         <h1>海燕啊</h1>
  84.         <h1>海燕啊</h1>
  85.         <h1>海燕啊</h1>
  86.         <h1>海燕啊</h1>
  87.         <h1>海燕啊</h1>
  88.         <h1>海燕啊</h1>
  89.         <h1>海燕啊</h1>
  90.         <h1>海燕啊</h1>
  91.         <h1>海燕啊</h1>
  92.         <h1>海燕啊</h1>
  93.         <h1>海燕啊</h1>
  94.         <h1>海燕啊</h1>
  95.         <h1>海燕啊</h1>
  96.         <h1>海燕啊</h1>
  97.         <h1>海燕啊</h1>
  98.         <h1>海燕啊</h1>
  99.         <h1>海燕啊</h1>
  100.         <h1>海燕啊</h1>
  101.         <h1>海燕啊</h1>
  102.         <h1>海燕啊</h1>
  103.         <h1>海燕啊</h1>
  104.         <h1>海燕啊</h1>
  105.         <h1>海燕啊</h1>
  106.         <h1>海燕啊</h1>
  107.         <h1>海燕啊</h1>
  108.         <h1>海燕啊</h1>
  109.         <h1>海燕啊</h1>
  110.         <h1>海燕啊</h1>
  111.         <h1>海燕啊</h1>
  112.         <h1>海燕啊</h1>
  113.         <h1>海燕啊</h1>
  114.         <h1>海燕啊</h1>
  115.         <h1>海燕啊</h1>
  116.         <h1>海燕啊</h1>
  117.         <h1>海燕啊</h1>
  118.     </div>
  119. </div>
  120. </body>
  121. </html>

后台管理布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>遮罩层</title>
  6.     <style>
  7.         .backgroup{
  8.             width: 100%;
  9.             height: 2000px;
  10.         }
  11.         .zzc{
  12.             position: fixed;
  13.             bottom: 0;
  14.             top:0;
  15.             left:0;
  16.             right:0;
  17.             background-color: grey;
  18.             opacity: 0.4;
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23. <div class="backgroup">
  24.     <p>haiyan</p>
  25.     <p>haiyan</p>
  26.     <p>haiyan</p>
  27.     <p>haiyan</p>
  28.     <p>haiyan</p>
  29.     <p>haiyan</p>
  30.     <p>haiyan</p>
  31.     <p>haiyan</p>
  32.     <p>haiyan</p>
  33.     <p>haiyan</p>
  34.     <p>haiyan</p>
  35.     <p>haiyan</p>
  36.     <p>haiyan</p>
  37. </div>
  38. <div class="zzc"></div>
  39. </body>
  40. </html>

遮盖层

web前端----css补充的更多相关文章

  1. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  2. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  3. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  4. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  5. Bootstrap 简介(Web前端CSS框架)

    目录1.简介2.特点3.组件4.Javascript插件5.定制自己的框架代码6.Bootstrap Less 1.简介Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Tw ...

  6. Bootstrap（Web前端CSS框架）

    官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...

  7. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  8. web前端css定位position和浮动float

    最近做了几个项目:配资公司,ecmal商城等,客户对前台要求都很高.所以,今天来谈谈css的基础,以及核心,定位问题. div.h1或p元素常常被称为块级元素.这意味着这些元素显示为一块内容,即“块框 ...

  9. web前端——CSS详解

    简介 CSS(Casading Style Sheet)是一组HTML元素外观的设置规则,用于控制web页面的表现形式,一般被翻译为"级联样式表"或"层叠样式表" ...

随机推荐

  1. java虚拟机的符号引用和直接引用

    在java中,一个java类将会编译成一个class文件.在编译时,java类并不知道引用类的实际内存地址,因此只能使用符号引用来代替.比如org.simple.People类引用org.simple ...

  2. Thread和Runable的区别、Synchronized锁关键字

    一.Thread和Runable的区别 Thread是基类,子类必继承他实现其run方法.其也是实现了Runable接口.Thread是普通的类,并非抽象类或者密封类等. Runnable是接口,子类 ...

  3. 查询ip

    ifconfig | grep "inet " | grep -v 127.0.0.1

  4. Python实现简单HTTP服务器(二)

    实现简单web框架 一.框架(MyWeb.py) # coding:utf-8 import time # 设置静态文件根目录 HTML_ROOT_DIR = "./html" c ...

  5. Python 字典 dict() 函数

    描述 Python 字典 dict() 函数用于创建一个新的字典,用法与 Pyhon 字典 update() 方法相似. 语法 dict() 函数函数语法: dict(key/value) 参数说明: ...

  6. CH0201 费解的开关 枚举

    正解:枚举 解题报告: 入门傻逼题,思维难度不高代码量极小,非常适合上手 然后傻逼的我第二次看这道题的时候依然没想到解法:D 没有办法,就想着写个笔记好歹记录一下以后多复习几次就记着了趴qwq 就是, ...

  7. Django单元测试简单示例

    对一个功能的验证往往是需要很多多测试用例,可以把测试用例集合在一起执行,这就产生了测试套件TestSuite 的概念,它是用来组装单个测试用例,规定用例的执行的顺序,而且TestSuite也可以嵌套T ...

  8. Mint linux中调整屏幕亮度的方法

    /*********************************************************************  * Author  : Samson  * Date   ...

  9. [dt]世纪历史长河年代表

    年代口诀 夏商与西周, 东周分两段, 春秋和战国, 一统秦两汉, 三分魏蜀吴, 二晋前后延, 南北朝并列, 隋唐五代传, 宋元明清后, 皇朝至此完. 中国历史长河年代表 参考: 中国历史朝代顺序表.年 ...

  10. PAT A+B for Polynomials[简单]

    1002 A+B for Polynomials (25)(25 分) This time, you are supposed to find A+B where A and B are two po ...