web前端【补充】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 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

//测试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{width: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;width: 20px;height: 20px;color: black;background-color: white;border-radius: 50%; //边框弧度line-height: 20px;text-align: center;}.btn{position: absolute;width: 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{width: 100%;height: 44px;background-color: #2459a2;}.title li{width: 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{width: 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{width: 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>

转载于:https://www.cnblogs.com/xiaohema/p/8455449.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/267584.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！