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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
//测试z-index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .img1 { position:absolute; left:0; top:0; z-index:-10; } .img2 { position:absolute; left:0; top:0; z-index:-3; //越大越往前排,离你越近 } .img3 { position:absolute; left:0; top:0; z-index:-5; } </style> </head> <body> <div class="img3"><img src="作业/1.jpg" alt=""></div> <div class="img2"><img src="作业/2.jpg" alt=""></div> <div class="img1"><img src="作业/3.jpg" alt=""></div> </body> </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已经为真了那么就不会去判断后面了
//实现图片切换的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin: 0; } .outer{ 790px; height: 340px; border: solid 1px red; margin: 0 auto; margin-top: 40px; position: relative; } ul{ list-style: none; position: absolute; top: 0; left:0; } .com{ position: absolute; display: none; /*visibility: hidden;*/ } .num{ position: absolute; top: 300px; left: 330px; } .num li{ display: inline-block; 20px; height: 20px; color: black; background-color: white; border-radius: 50%; //边框弧度 line-height: 20px; text-align: center; } .btn{ position: absolute; 40px; height: 60px; background-color: grey; opacity: 0.5; //透明度 color: black; font-weight: 900; //加粗 text-align: center; line-height: 60px; top:50%; margin-top: -30px; } .leftbtn{ left:0; } .rightbtn{ right:0; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="1.jpg" alt=""></a></li> <li class="com"><a href=""><img src="2.jpg" alt=""></a></li> <li class="com"><a href=""><img src="3.jpg" alt=""></a></li> <li class="com"><a href=""><img src="4.jpg" alt=""></a></li> <li class="com"><a href=""><img src="5.jpg" alt=""></a></li> <li class="com"><a href=""><img src="6.jpg" alt=""></a></li> </ul> <ul class="num"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <div class="leftbtn btn"> < </div> <div class="rightbtn btn"> > </div> </div> </body> </html>
//后台管理布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理布局</title> <style> *{ margin: 0; } a{ text-decoration: none; } .header{ 100%; height: 44px; background-color: #2459a2; } .title li{ 100px; height: 80px; list-style: none; text-align: center; line-height: 80px; margin-top: 20px; padding: 50px; background-color: blue; } .leftmenu .title a{ font-size: 18px; color: white; } .leftmenu{ 300px; background-color: grey; position: fixed; top: 44px; left:0; bottom: 0; } .con{ position: fixed; top: 44px; left: 300px; right:0; bottom: 0; background-color: darksalmon; overflow: scroll; } </style> </head> <body> <div class="header"></div> <div class="content"> <div class="leftmenu"> <ul class="title"> <li><a href="">菜单一</a></li> <li><a href="">菜单二</a></li> <li><a href="">菜单三</a></li> </ul> </div> <div class="con"> <h1>hellp</h1> <h1>hello</h1> <h1>hello</h1> </div> </div> </body> </html>
//遮盖层 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遮罩层</title> <style> .backgroup{ 100%; height: 2000px; } .zzc{ position: fixed; bottom: 0; top:0; left:0; right:0; background-color: grey; opacity: 0.4; } </style> </head> <body> <div class="backgroup"> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> <p>haiyan</p> </div> <div class="zzc"></div> </body> </html>