企业网站如何做架构图,怎么做交易网站,学生版 建设网站软件下载,西安企业排名a标签去除原颜色(改为白色)和下划线text-decoration: none;color: #ffffff;列表标签去除默认小点:list-style-type:none;设置元素透明度#xff1a;opacity:0.5;页面中文字无法被选中#xff1a;user-select: none;鼠标悬停#xff0c;样式变化的方法#xff1a;a:hover {o…a标签去除原颜色(改为白色)和下划线text-decoration: none;color: #ffffff;列表标签去除默认小点:list-style-type:none;设置元素透明度opacity:0.5;页面中文字无法被选中user-select: none;鼠标悬停样式变化的方法a:hover {opacity: 1;}设置字体行高(如果只有一行文字可以达到居中的效果)line-height: 45px;设置字体样式font-family: DFKai-SB;改变鼠标的样式cursor : pointer; (变成小手)cursor : default; (变成默认鼠标样式)设置元素边框border: 1px solid #ffffff;设置元素圆角border-radius: 5px;设置元素为圆形(元素本身为正方形即宽高一样)border-radius: 50%;更改精灵图定位background-position: -20px -20px;内容未显示完有滚动条显示剩下区域overflow: auto;改变盒模型元素宽度计算模型为 IE模型(宽度包括了边框和内边距的长度)box-sizing: border-box;inline-block元素、inline元素、文本、img图片垂直居中显示需要设置他们父元素的vertical-align属性(只要元素已设置高度即可让文字内容居中)vertical-align:middle;inline-block元素、inline元素、文本、img图片水平居中显示需要设置他们父元素的text-align属性(只要元素能设置宽度即可让文字内容居中)text-align: center;元素根据父元素宽度进行居中显示 block 元素(前提条件该block元素需要设置有宽度的值)margin: 0 auto;文字加粗font-weight: bold;消除input输入框点击后轮廓的光圈input:focus{outline: 0px;}盒模型整体向XYZ某个方向移动(相比使用外边距移动性能更优)transform: translate3d(200px, 0px, 0px)布局设置子元素左右距离父元素边框百分之5的边距有如下两种方法其中第二种方案不脱离文档流1、子绝父相父元素position: relative; 子元素position: absolute; left:5%; right:5%;2、 外边距子元素(不设置宽度): height: 100%; margin: 0 5%;设置绝对定位(设置后可以根据相对定位的父元素进行位置的定位)position: absolute;设置图层前后顺序(只有脱离文档流的属性可以使用值越大在的位置越前面)z-index: -1;设置背景图片(平铺)等比拉升覆盖整个元素background-size: cover ;背景图片上下左右(水平垂直)居中background-position: center center;设置分隔线可以使用加号选择器(表示当前class为a的元素前一个class也是a选中当前class为a的元素)保证css代码的一致性li .a .a{border-right: 1px solid #ffffff;}去除a标签的点击跳转的效果阴影设置box-shadow: 0px 4px 13px 0px rgba(0,0,0,0.2) ;清楚浮动最优套路给浮动元素的父元素添加如下CSS样式(::after是伪元素作用是在该元素的最前面增加一个元素但在html中并不存在该元素主要作用是布局页面):.a::after {content:;display:block;clear:both}使用自定义动画先定义动画效果keyframes submenuSlide {0%{opacity: 0;margin-right: 100%;}100%{opacity: 1;margin-right: 0%;}}再使用动画(执行动画submenuSlide整个过程1.5s执行完毕匀速执行重复执行).loading::after{content: ;top: 0;left: 0;bottom: 0;right: 0;margin: auto;animation:submenuSlide 1.5s linear infinite ;animation-delay: 0.75s; #延迟0.75s执行}过度动画(所有变更过度在0.2s内完成动画效果)transition: all 0.2s;行内元素常见套路(设置完行内后需要vat才能让行内元素正常显示)nav{display: inline-block;vertical-align: top;}居中套路1、行内元素居中2、块级元素居中直角三角形套路.userCard .welcome .triangle{/* 将span变成块级元素 */display: block;/* 将边框粗细设置为10px 颜色设置为透明*/border: 10px solid transparent;/* 如果不设置宽度有可能会随父元素自适应最好设置为0 */width:0px;/* 将左边边框单独设置颜色(会覆盖原来设置的透明色) */border-left-color: #E6686A;/* 将顶部边框的宽度设置为0(就是让顶部边框隐藏这样左右两边就是直角三角形了) */border-top-width: 0px;/* 子绝父相 */position: absolute;top: 100%;left: 4px;}CSS兼容性写法;CSS3动画效果生成器
