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

web前端【补充】CSS补充相关推荐

Web前端HTML+CSS全套（1~20）
Web前端HTML+CSS全套(1~20) 拨云见日 CSS基础切图流程 PC企业站布局 PC游戏站布局溯本求源 HTML扩展 CSS扩展 HTMLS新语法 CSS3新语法兼容与hack 风生水 ...
Web前端，CSS中的浮动、清除浮动
前言持续总结输出中,今天分享的是Web前端,CSS中的浮动.清除浮动.浮动和清除浮动是我们常用的css样式.今天我们就来了解他们. 1.浮动的作用早期的作用:图文环绕现在的作用:网页布局 • 场 ...
canvas clear 指定属性的元素_好程序员web前端分享CSS属性组成及作用
好程序员web前端分享CSS属性组成及作用学习目标 1.css属性和属性值的定义 2.css文本属性 3.css列表属性 4.css背景属性 5.css边框属性 6.css浮动属性一.css属性和 ...
小白学Java Web 3 Web前端之CSS基本知识2
这一篇接着上一篇的内容来分享,上一篇还有大量的样式属性没有列出,不过在继续分享之前,我想先来分享一下关于网页的布局相关的一些东西,因为下一篇我打算分享用仅仅前面三小篇的内容来制作一个简单的静态网页, ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...
Web前端，CSS常用之相对定位和绝对定位的区别，静态定位、子绝父相、固定定位、元素的层级关系的了解
前言持续学习总结输出中,今天分享的是Web前端,CSS常用之相对定位和绝对定位的区别,静态定位.子绝父相.固定定位.元素的层级关系的了解 1.定位的基本介绍我们的网页常见布局方式有:标准流.浮动. ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡背景图片大小 background-size:宽度高度; 设置背景图片的大小取值场景数字+px ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...

web前端【补充】CSS补充

web前端【补充】CSS补充相关推荐

最新文章

热门文章