css常用样式大全集锦
常用的css样式集锦
在前端开发过程中,css层叠样式表的规范特别重要,有经验的前端开发人员会自己记录一些常用的css代码,比如通用的css reset代码,常见的布局,表单,搜索框,按钮等css代码。
当然现在这些我们都有现成的ui框架,比如bootstrap,sui,mui等ui框架,但是假如现在然你自己开发呢,你会怎么办呢?
下面是一些常见的css样式大全,初学者可以学习下,老手略过。
一、css reset代码
*{word-wrap:break-word}
html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd,ul,ol,li,pre,form,button,input,textarea,th,td,fieldset{margin:0;padding:0}
ul,ol,dl{list-style-type:none}
html,body{*position:static}
html{font-family: sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button{overflow: visible;vertical-align:middle;outline:none}
body,th,td,button,input,select,textarea{font-family:“Microsoft Yahei”,“Hiragino Sans GB”,“Helvetica Neue”,Helvetica,tahoma,arial,Verdana,sans-serif,“WenQuanYi Micro Hei”,"\5B8B\4F53";font-size:12px;color: #333;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing:grayscale}
body{line-height:1.6}
h1,h2,h3,h4,h5,h6{font-size:100%}
a,area{outline:none;blr:expression(this.onFocus=this.blur())}
a{text-decoration:none;cursor: pointer}
a:hover{text-decoration:underline;outline:none}
a.ie6:hover{zoom:1}
a:focus{outline:none}
a:hover,a:active{outline:none}:focus{outline:none}
sub,sup{vertical-align:baseline}
button,input[type=“button”], input[type=“submit”] {line-height:normal !important}
/img/
img{border:0;vertical-align:middle}
a img,img{-ms-interpolation-mode:bicubic}
.img-responsive{max-width: 100%;height: auto}
/*IE下a:hover 背景闪烁*/
*html{overflow:-moz-scrollbars-vertical;zoom:expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))}/*HTML5 reset*/
header,footer,section,aside,details,menu,article,section,nav,address,hgroup,figure,figcaption,legend{display:block;margin:0;padding:0}time{display:inline}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none}
legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:0;border-bottom:1px solid #e5e5e5}
legend small{font-size:15px;color:#999}
svg:not(:root) {overflow: hidden}
fieldset {border-width:0;padding: 0.35em 0.625em 0.75em;margin: 0 2px;border: 1px solid #c0c0c0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {height: auto}
input[type="search"] {-webkit-appearance: textfield; /* 1 */-moz-box-sizing: content-box;-webkit-box-sizing: content-box; /* 2 */box-sizing: content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
/*
Name: style_clearfix
Example: class="clearfix|cl"
Explain: Clearfix(简写cl)避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after,.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.cl,.clearfix{zoom:1}
二、美化复选框
记住账号密码
.hidden {
display: none;
}
.checkbox:checked ~.icon-checkbox {
background: url(…/images/yes_15.png) no-repeat;
background-size: 0.3rem 0.25rem;
}
.icon-checkbox {
width: 0.3rem;
height: 0.3rem;
margin-right: 0.1rem;
border: 0.02rem solid #d7d7d7;
border-radius: 0.06rem;
}
.icon {
display: inline-block;
vertical-align: middle;
}
三、中间文字,两边横线居中
效果
/*中间文字两边横线效果*/ .title-center { position:relative; width:100%; text-align: center; height: 100px; line-height: 100px; font-size: 28px; color: #4d72e2; } .title-center div{ display: inline-block; padding:0 20px; } .title-center:before ,.title-center:after{ display: inline-block; position: relative; content:""; height:2px; width:48px; top:-6px; background-color:#4d72e2; } 当设置rem为单位时,1px,会显示偏大,将.title-center:before ,.title-center:after修改为如下: .title-center:before, .title-center:after { display: inline-block; position: relative; content: ""; height: 1px; width: 1.88rem; top: -.1rem; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; } 终极版,rem单位,横线自适应长度!!!!
.border-center{ /*display:inline-block; 使用flexchild布局的时候,不能给元素设置这个属性,不然, -webkit-box-flex: 1;会失效*/ height: 1px; background-color: #fd734f; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; }
四、怎么实现图标水平垂直居中(rem单位)
利用background-size来设置背景图的本身大小尺寸,然后利用background-position:center center;来设置背景图相对元素的水平垂直居中,其中元素的宽是背景图的宽,高就是原来的高
首页 css: a{display:inline-block;} .foot-nav1{ width: .66rem; height: .66rem; display: block; margin: 0 auto; background:url(); } span { display: block; line-height: .24rem; text-align: center; font-size: .24rem; height: .24rem; margin-bottom: .8rem; color: #666; }
五、常用表单布局
- 收货地址:
.section2 li { list-style: none; position: relative; width: 500px; margin: 0 auto; border: 1px solid #ffd6b9; box-sizing: border-box; padding: 17px 30px; background-color: #fff; margin-top: 20px; border-radius: 40px; } .section2 li input { background-color: transparent; border: 0 none; color: #333; outline: none; position: relative; font-size: 26px; width: 435px; z-index: 102; }
六、答题进度条
就是用来展示答题进度的进度条,效果如下
其中img是形状底色(小圆圈是透明的)。而recommend-jd-bg是进度条背景色,recommend-jd-ks是控制进度的颜色!!,其中img的z-index>recommend-jd-bg>recommend-jd-ks
.recommend-jd { width: 6.43rem; position: absolute; top: 1.59rem; left: .54rem; } .recommend-jd-bg { width: 100%; height: .31rem; background: #fff; position: absolute; top: 0; z-index: 97; } .recommend-jd-ks { width: 12.5%; //这个是js控制,根据题数的进度来控制! height: .31rem; background: #4a90ff; position: absolute; top: 0; z-index: 98; } .recommend-jd img { width: 100%; display: block; position: absolute; top: 0; z-index: 99; height: .31rem; } 进度条2 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200418130550770.png)
.progressBar { margin: .3rem auto .1rem; width: 6.3rem; height: .1rem; background-color: rgb(72, 11, 29); } .progressPer { position: relative; top: 0; left: 0; display: inline-block; width: 0; height: .1rem; background-color: #efc283; } .moneyBox { position: absolute; right: -.53rem; top: .3rem; display: inline-block; width: 1.06rem; height: .4rem; background: url(../images/moneyBox.png)no-repeat; background-size: 100% 100%; } .moneyBox .moneyText { position: absolute; bottom: 0; left: 0; width: 1.04rem; height: .34rem; line-height: .34rem; text-align: center; color: #efc283; font-size: .26rem; }
七、修改input的placeholder样式
.detail-page input::-webkit-input-placeholder { /* WebKit, Blink, Edge /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-moz-placeholder { / Mozilla Firefox 4 to 18 /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input::-moz-placeholder { / Mozilla Firefox 19+ /
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
.detail-page input:-ms-input-placeholder { / Internet Explorer 10-11 */
font-size: .26rem;
color:#b2b2b2;
opacity: 1;
}
八、input中增加disabled会自带灰色,修改颜色如下
input:disabled{
border:1px solid #DDD;
background-color:#F5F5F5;
color:#ACA899;
}
九、多行文字左右对齐:
p {
text-align: justify;
text-justify: inter-ideograph;
}
十、实现单行文字两端对齐,例如要实现下列单行文字对齐
方法一,使用伪类:
: 林小
: 111111111111
: 141000000
.line{ width:100%; height:15px; margin:5px; } .public{ width:80px; height:100%; display:inline-block; text-align: justify; vertical-align:top; } .public::after{ content:""; display: inline-block; width:100%; overflow:hidden; height:0; } 方法二使用letter-spacing来解决:
热门搜索
css:
.hotsearch dd{
float: left;
line-height: 24px;
margin-right: 30px;
overflow: hidden;
text-align: center;
width: 4em; /这个值是看最长能显示几个文字,如x,则为x em/
}
.hotsearch dd a{
display:block;
}
.w2{
letter-spacing:2em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-2)/(2-1)=2em */
margin-right:-2em; /同上/
}
.w3{
letter-spacing:0.5em; /*如果需要y个字两端对齐,则为(x-y)/(y-1),这里是(4-3)/(3-1)=0.5em */
margin-right:-0.5em; /同上/
}
效果:
十一、实现图片加载过程高度自适应
应用情景:在页面布局过程中,遇到轮播图或者大张图片,当图片下面还有其它块内容,在图片加载过程中,由于高度是0,下面的元素会往上跑,图片加载完。元素会往下跑,给用户感觉抖动。
解决方法:在图片最外层设置一个div,给这个div设置如下样式
.img-box {
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 52%;
/方法二/
width:100%;
/高度相对父级宽度比例/
height: 52%vw;
background:#eee;
}
十二、实现文字超出省略…
(需要设置宽度,当父级元素使用flex布局时,需要在display:flex;这边设置min-width:0;不然ellipsis会失效!!)
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ellipsis-2l {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //第几行
}
十三、竖向时间轴
效果,每次点都要与时间对齐,可以把小圆点放在跟日期同一个div上,然后横线做成整个记录的背景图
html:
css:
.list {
padding-top: .1rem;
padding-bottom: .1rem;
font-size: .3rem;
color: #333;
background-color: #fff;
}
.list-item {
width: 100%;
margin-left: .32rem;
margin-top: -.15rem;
padding-bottom: .4rem;
background: url("…/images/border.png") no-repeat .1rem .21rem;
background-size: 1px 100%;
}
.progres2-item {
display: inline-block;
margin-right: .25rem;
width: .21rem;
height: .21rem;
background-color: #4d72e2;
border-radius: 50%;
}
/最后一个没有直线也就是没有背景,只有一个的时候也没有/
.list-item:last-of-type{
background:transparent;
}
.list-item-award,.list-item-text {
margin-left: .5rem;
}
.list-item-award{
padding-left: .53rem;
margin-bottom: .12rem;
margin-top: .22rem;
}
.list-item-text {
width: 100%;
padding-left: .46rem;
padding-bottom: .16rem;
background: url("…/images/sign-icon.png") no-repeat left .05rem;
background-size: .32rem .25rem;
font-size: .26rem;
color: #808080;
box-sizing: border-box;
border-bottom: 1px solid #f4f4f4;
}
.list-item:last-of-type .list-item-text {
border-bottom: 0 none;
}
.list-item .list-btn {
padding-left: .1rem;
text-decoration: underline;
font-size: .28rem;
color: #316cec;
}
十四、文字底部横线背景
.login-title { position: relative; height: .39rem; margin-top: .4rem; font-size: .34rem; color: #fff; text-align: center; } .login-title:after { content: ""; position: absolute; width: 5.05rem; height: .21rem; background-color: #fe923f; z-index: -1; left: 0; right: 0; margin: 0 auto; bottom: 0; }
另外我们常用的css属性有下面这些
一 CSS文字属性:
color : #999999; /文字颜色/
font-family : 宋体,sans-serif; /文字字体/
font-size : 9pt; /文字大小/
font-style:itelic; /文字斜体/
font-variant:small-caps; /小字体/
letter-spacing : 1pt; /字间距离/
line-height : 200%; /设置行高/
font-weight:bold; /文字粗体/
vertical-align:sub; /下标字/
vertical-align:super; /上标字/
text-decoration:line-through; /加删除线/
text-decoration: overline; /加顶线/
text-decoration:underline; /加下划线/
text-decoration:none; /删除链接下划线/
text-transform : capitalize; /首字大写/
text-transform : uppercase; /英文大写/
text-transform : lowercase; /英文小写/
text-align:right; /文字右对齐/
text-align:left; /文字左对齐/
text-align:center; /文字居中对齐/
text-align:justify; /文字分散对齐/
vertical-align属性
vertical-align:top; /垂直向上对齐/
vertical-align:bottom; /垂直向下对齐/
vertical-align:middle; /垂直居中对齐/
vertical-align:text-top; /文字垂直向上对齐/
vertical-align:text-bottom; /文字垂直向下对齐/
二、CSS边框空白
padding-top:10px; /上边框留空白/
padding-right:10px; /右边框留空白/
padding-bottom:10px; /下边框留空白/
padding-left:10px; /*左边框留空白
三、CSS符号属性
list-style-type:none; /不编号/
list-style-type:decimal; /阿拉伯数字/
list-style-type:lower-roman; /小写罗马数字/
list-style-type:upper-roman; /大写罗马数字/
list-style-type:lower-alpha; /小写英文字母/
list-style-type:upper-alpha; /大写英文字母/
list-style-type:disc; /实心圆形符号/
list-style-type:circle; /空心圆形符号/
list-style-type:square; /实心方形符号/
list-style-image:url(/dot.gif); /图片式符号/
list-style-position: outside; /凸排/
list-style-position:inside; /缩进/
四、CSS背景样式
background-color:#F5E2EC; /背景颜色/
background:transparent; /透视背景/
background-image : url(/image/bg.gif); /背景图片/
background-attachment : fixed; /浮水印固定背景/
background-repeat : repeat; /重复排列-网页默认/
background-repeat : no-repeat; /不重复排列/
background-repeat : repeat-x; /在x轴重复排列/
background-repeat : repeat-y; /在y轴重复排列/
指定背景位置
background-position : 90% 90%; /背景图片x与y轴的位置/
background-position : top; /向上对齐/
background-position : buttom; /向下对齐/
background-position : left; /向左对齐/
background-position : right; /向右对齐/
background-position : center; /居中对齐/
五、CSS连接属性
a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/
鼠标光标样式:
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url(“光标文件名.cur”),text;}
六、CSS框线一览表
border-top : 1px solid #6699cc; /上框线/
border-bottom : 1px solid #6699cc; /下框线/
border-left : 1px solid #6699cc; /左框线/
border-right : 1px solid #6699cc; /右框线/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /设置上框线top颜色/
border-top-width :1px /设置上框线top宽度/
border-top-style : solid/设置上框线top样式/
其他框线样式
solid /实线框/
dotted /虚线框/
double /双线框/
groove /立体内凸框/
ridge /立体浮雕框/
inset /凹框/
outset /凸框/
七、CSS表单运用
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
八、CSS边界样式
margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/
九、CSS滤镜属性
Filter:在样式中加上滤镜特效。由于此属性内容比较多,我们将到下一章单独对滤镜介绍。
1.Alpha:设置透明度
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。Style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。StartX和StartY:代表渐变透明效果的开始X和Y坐标。 FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
2.BlendTrans:图像之间的淡入和淡出的效果
BlendTrans(Duration=?) Duration:淡入或淡出的时间。注意:这个滤镜必须配合JS建立图片序列,才能做出图片间效果。
3.Blru:建立模糊效果
Blur(Add=?, Direction=?, Strength=?) Add:是否单方向模糊,此参数是一个布尔值,true(非0)或false(0)。 Direction:设置模糊的方向,其中0度代表垂直向上,然后每45度为一个单位。 Strength:代表模糊的象素值。
4.Chroma:把指定的颜色设置为透明
Chroma(Color=?) Color:是指要设置为透明的颜色。
5.DropShadow:建立阴影效果
DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color:指定阴影的颜色。OffX:指定阴影相对于元素在水平方向偏移量,整数。 OffY:指定阴影相对于元素在垂直方向偏移量,整数。 Positive:是一个布尔值,值为true(非0)时,表示为建立外阴影;为false(0),表示为建立内阴影。
6.FlipH:将元素水平反转
7.FlipV:将元素垂直反转
8.Glow:建立外发光效效果
Glow(Color=?, Strength=?)
Color:是指定发光的颜色。
Strength:光的强度,可以是1到255之间的任何整数,数字越大,发光的范围就越大。
9.Gray:去掉图像的色彩,显示为黑白图象
10. Invert:反转图象的颜色,产生类似底片的效果
11. Light:放置光源的效果,可以用来模拟光源在物体上的投影效果 注意:此效果需要用JS设置光的位置和强度。
12. Mask:建立透明遮罩
Mask(Color=?) Color:设置底色,让对象遮住底色的部分透明。
13. RevealTrans:建立切换效果
RevealTrans(Duration=?, Transition=?)
Duration:是切换时间,以秒为单位。
Transtition:是切换方式,可设置为从0到23。
注意:如果做页面间的切换效果,可以在区加上一行代码:<Meta http-equiv=Page-enter content=revealTrans(Transition=?,Duration=?) >。如果用在页面里的元素必须配合JS使用。
14. Shadow:建立另一种阴影效果 Shadow(Color=?, Direction=?) Color:是指阴影的颜色。
Direction:是设置投影的方向,0度代表垂直向上,然后每45度为一个单位。
15. Wave:波纹效果
Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add:表示是否显示原对象,0表示不显示,非0表示要显示原对象。 Freq:设置波动的个数。LightStrength:设置波浪效果的光照强度,从0到100。0表示最弱,100表示最强。 Phase:波浪的起始相角。从0到100的百分数值。(例如:25相当于90度,而50相当于180度。) Strength:设置波浪摇摆的幅度。
16. Xray:显现图片的轮廓,X光片效果
注意:在使用CSS滤镜时,必须使用在有区域的元素,比如表格,图片等。而文本,段落这样没有区域的元素不能使用CSS滤镜,对这样的元素我们可以设置元素的Height和Width样式或坐标来实现。"
css常用样式大全集锦相关推荐
- css常用代码大全,html+css代码
css常用代码大全,html+css代码 html+css可以很方便的进行网页的排版布局,还能减少很多不必要的代码. 一.文本设置 1.font-size: 字号参数 2.font-style: 字 ...
- css文字向右对齐_web前端入门到实战:css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式 ...
- html双箭头菜单,CSS常用样式之绘制双箭头的示例代码
一.多次调用单箭头 实现了单箭头–就很容易实现双箭头了,上文已经介绍2种实现单箭头的原理: 边框旋转方式.双三角覆盖方式.这次以边框旋转为例多次调用实现双箭头. 1.边框旋转单箭头实现 .arrow- ...
- css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称 可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...
- 1-2 CSS常用样式笔记
文章目录 CSS常用样式 字体属性 文本属性 盒模型属性 宽度width 高度height 内边距padding 边框border 外边距margin 盒模型拓展应用 清除默认样式 高度height应 ...
- dw中css目标规则命名,css 常用样式命名规则
大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap --用于最外层 头部:header --用于头部 主要内容:mai ...
- css常用样式(文字样式、边框样式、背景样式)
CSS常用样式 CSS常用文字样式 color: brown; /*文字颜色*/ /*color: #333333;这样的也可以,这种颜色的表示方法是RGB的方式,没两位数表示一种颜色的度数, 一般情 ...
- Day-1 HTML基本标签和CSS常用样式
实训打卡第一天,学的不错,淦-----哈哈哈 HTML基本标签 基本标签:前端页面超链接的使用:字体的颜色和字体的大小.形式:还有就是页面图片.音频和视频的导入. <!DOCTYPE html& ...
- CSS常用样式属性有哪些?代码怎么写?
CSS常用样式属性有哪些?CSS样式属性有两种分别是局常用样式属性和文本常用样式属性,CSS的作用是美化HTML网页和控制页面布局,我们需要掌握这两种常用的样式属性来美化页面.一套教程,带你轻松掌握H ...
最新文章
- How to put S4 extension field to CRM WebUI search view in the design time
- Google Chrome保存插件方法
- XGBClassifier()特征选择
- ModelArts的雪中送炭,让我拿下CCF BDCI华为Severless工作负载预测亚军
- 自己编译vim,解决Ubuntu 12.04 terminal里执行gvim会挂起的问题
- python菜鸟教程网-Python JSON
- NYOJ96 - n-1位数
- Ubuntu 16.04 配置vsftpd使用 ssl 传输
- PostgreSQL | 学习笔记语句汇总
- overcommit_memory 内核参数
- NOIP2013提高组华容道题解
- UCOIII时间片轮转调度
- 【思科、华为、华三这三大认证,选哪个考最好?】
- Mac 输入法原文件的安装位置
- STM32F407 SPI线的选择
- 滴滴Booster移动APP质量优化框架 学习之旅
- C语言中常见的转义字符总结
- android如何app主题更换,通过EventBus更换android app主题
- GateWay坑——context-path
- 怎样修改git用户名、密码和邮箱?