css样式之补充

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>

测试

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>
91
92 实现图片切换的效果

实现图片轮播效果

  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>

遮盖层

原文地址:https://www.cnblogs.com/Ebola-/p/8569695.html

时间: 2024-10-29 05:53:22

css样式之补充的相关文章

css样式之补充。。。

css常用的一些属性: 1.去掉下划线 :text-decoration:none ;2.加上下划线: text-decoration: underline; 3.调整文本和图片的位置(也就是设置元素的垂直对齐方式):vertical-align:-20px; 没设置之前: 设置之后: 3.外边距:margin4.内边距:padding5.居中:margin 0 auto;(只是针对盒子居中) 6内联标签是不可以设置长宽的,有时候就得把内联标签变成块级标签或者块级内联标签,这就用到了displa

HTML+CSS样式设置——CSS一学就会

HTML+CSS样式设置 CSS:(Cascading Style Sheets)层叠样式设置表. 网页的展示效果跟其排版有很大的关系.排版则主要依靠CSS来设置.调节. 下面说CSS与HTML的联合使用的过程: (1)新建CSS文件(一般放在与HTML文件同一路径下的css文件夹中) (2)在HTML的<head>标签中,用<link />对CSS进行引用 <link rel="stylesheet" type="text/css" 

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important

css样式表1 2017-03-11

样式表 DIV + CSS 一.        样式表的分类 以下均以div标签为例,可以换成其他标签 1.  内联样式表 格式: style="属性1:属性值1:属性2:属性值2:属性3:属性3.1 属性3.2 属性3.3" -------注意哪个用冒号哪个用分号  什么时候用空格 <div style="width: 500px; height: 100px; border:1px  solid  black"> </div> 注:优先级

css样式(火狐的兼容性问题)

1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 wid

【3-24】css样式表分类、选择器、样式属性、格式布局

一.css样式表分类: (一)内联样式表:代码写在标签内的样式表  控制精确 代码重用性差  优先级最高 格式:<p style="样式属性">内容</p> <div style="text-decoration:line-through;">第四格第三元</div> (二)内嵌样式表:将代码写在标签<style type="text/css"></style>之间,此标签一

如何让不同浏览器调用不同的CSS样式

由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Internet Explorer和Mozilla Firefox为例,前者对标准的支持明显不如后者,网页设计人员不得不花费大量的时间和精力来调整代码以保持网页在二者中呈现的一致性——这是件非常痛 苦的事情,顾此失彼的情况时有发生.但放弃任何一方的用户都是不明智的,以北极冰仔部落格来说,使用IE的访问者占所有访问者的49.57%,使用 Firefox

深入解析CSS样式层叠权重值(转)

前言:折腾了半天圆角,发觉border-radius是css3的新特性,简单粗暴的解决了button的圆角显示,中间由于css权重问题,导致即使我设置了圆角也一直没有生效.以下是找到的相当不错的一篇css样式权重讲解的,清晰明了,看完就懂是啥了. 永记在心: important > 内联 > ID > 类|属性|伪类 > 标签|伪元素  > 通配符 > 继承  (相对于原文的调整  属性选择和为对象均与类并列~) 简单记住这几个就够用了: important >

(转)Css样式兼容IE6,IE7,FIREFOX的写法

根据FF和IE对一些符号识别的差异,我们可以单独对FF以及IE定义样式,例子: 区别IE6与FF:          background:orange;*background:blue;   区别IE6与IE7:          background:green !important;background:blue;   区别IE7与FF:          background:orange; *background:green;   区别FF,IE7,IE6:          back