tofacebook.com -专业IT技术社区(贪吃蛇学院) css样式之补充 Web程序 - 贪吃蛇学院-专业IT技术平台
141°

css样式之补充 Web程序

标签:绝对定位   href   active   测试   lis   pac   文本   relative   区别   

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>
遮盖层

 

css样式之补充

标签:绝对定位   href   active   测试   lis   pac   文本   relative   区别   

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


本文由百家号/熊掌号作者上传并发布,百家号仅提供信息发布平台。文章仅代表作者个人观点,不代表百度立场。

已有 0 条评论

    我有话说: