css3
文章平均质量分 68
啊哈前端
web前端
展开
-
css将文字和图片水平垂直居中
html>html lang="en">head> meta charset="UTF-8"> title>css将内容水平垂直居中title>style type="text/css"> *{margin:0;padding:0;box-sizing:border-box;font: 16px/20px 'Microsoft yahei,微软雅黑'}/*box-si原创 2015-11-05 15:55:15 · 1783 阅读 · 0 评论 -
css3滤镜
css滤镜是IE9.0浏览器厂商为了增加浏览器功能和竞争力,而独自推出的一种网页特效。css滤镜滤镜名称效果Alpha设置透明度BlendTrans实现图像之间的淡入和淡出的效果Blur建立模糊效果Chroma设置对象中指定的颜色为透明色DropShadow建立阴影效果FlipH原创 2016-04-21 10:42:50 · 415 阅读 · 0 评论 -
css头尾固定中间高度自适应布局
头尾固定中间高度自适应布局 html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; line-height:100px;转载 2016-05-09 11:06:14 · 988 阅读 · 0 评论 -
css三列布局,最右侧div固定,其他两列自适应
*{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height原创 2016-05-02 16:01:39 · 870 阅读 · 0 评论 -
使用calc()计算元素宽度
1 2 3 4 1、容器宽度1200 前提: 每行4列 li的间距16px(最后一个li没有间距) li的宽度:calc(25% - 16*3/4) //25%是在没有间距的情况下平分,3个间距被4个li平原创 2016-12-09 17:29:30 · 2458 阅读 · 0 评论 -
css水平垂直居中
垂直居中 * { padding: 0; margin: 0; } body { background: red; } /* 第一种: 利用calc计算 .box {原创 2016-12-16 23:14:37 · 326 阅读 · 0 评论 -
css设置网页占满屏幕
css设置网页高100%宽100%占满屏幕 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; _height:1原创 2016-04-22 23:25:44 · 10293 阅读 · 0 评论 -
css3渐变之条纹背景
条纹背景 * { box-sizing: border-box; } html,body { width: 100%; height: 100%; _height: 100%; min-height: 100%; margin: 0; padding: 0; } .comm { widt原创 2017-01-06 16:47:00 · 1536 阅读 · 0 评论 -
css流式布局
1、html结构 流式布局 首页 导航一原创 2017-01-09 16:27:50 · 5657 阅读 · 0 评论 -
css计数器小记
主页 .reset { counter-reset: test 0; /* 初始化计数器 */ } .counter:before { content: counters(test,'');/* 计数器要配合伪类的content一起使用 */ coun原创 2017-02-06 00:29:17 · 396 阅读 · 0 评论 -
别人家的reset.less
@charset "gb2312";/* CSS Document */html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:转载 2017-01-15 09:39:02 · 1792 阅读 · 0 评论 -
css3 3D按钮
css3 3D按钮 body{font-family: ‘Open Sans’ , sans-serif;background-image: url(blurred-background-images-photos-0322125813.jpg);background-repeat: no-repeat;background-position: center center;bac转载 2017-02-07 16:39:20 · 384 阅读 · 0 评论 -
css一些小技巧收集(未完待续)
1、去除谷歌浏览器默认的自动完成的淡黄色背景input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset;}原创 2016-03-01 11:10:29 · 359 阅读 · 0 评论 -
css高度100%布局
css高度100%的布局 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;原创 2016-05-03 17:54:13 · 1367 阅读 · 0 评论 -
css三列布局,左边两个div固定,最右边宽度自适应
1-3-1一列固定,左边两侧固定,最右边宽度自适应 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; _heig原创 2016-05-02 16:23:25 · 2343 阅读 · 0 评论 -
css三列布局,两侧宽度固定,中间宽度自由伸缩
两侧宽度固定,中间宽度自由伸缩1-3-1一列固定,两侧固定,中间宽度自由伸缩 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height原创 2016-05-02 16:24:36 · 693 阅读 · 0 评论 -
css画正三角形
html>html lang="en">head> meta charset="UTF-8"> title>css画正三角形title> style type="text/css"> .container { width: 0; height: 0;转载 2015-11-05 16:24:07 · 2814 阅读 · 1 评论 -
css3三级下拉导航
css导航 *{margin: 0;padding: 0;} body { font: 12px/16px 'Microsoft yahei,微软雅黑'; color: #fff; box-sizing: border-box; } .container { width:原创 2015-10-29 17:30:53 · 777 阅读 · 0 评论 -
css3手风琴效果diy
css *{margin: 0;padding:0;box-sizing: border-box;-moz-box-sizing: border-box;} body { border: 0; } .clear:before,.clear:after{ /*清除浮动*/ content: ""; display: table; clear: both; hei原创 2015-11-10 14:07:22 · 397 阅读 · 0 评论 -
css使用背景图片制作搜索框
使用图片制作搜索框 .searchCon { width: 330px; height: 35px; background: url(images/search.jpg) no-repeat; position: relative; } .searchCon input.inputText{ width: 235px; height: 24px; lin原创 2015-11-30 14:49:25 · 3387 阅读 · 0 评论 -
css3弹性盒子
css3弹性盒子 .container { width: 1000px; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; /*设置盒子方向为水平方向*/ -moz-box-orient: horizontal; } .box { background: #35原创 2015-12-02 15:09:19 · 470 阅读 · 0 评论 -
商城网站物品五星好评的效果
购物商城评分效果原创 2015-12-15 23:32:04 · 824 阅读 · 0 评论 -
css浮动
一、元素浮动之后布局的变化1、对于块级元素,在默认情况下,宽度是100%,一旦设置浮动,它的宽度会根据内容自动调整。2、设置浮动后,元素不仅在y轴上浮动起来,在z轴上,也浮动起来。默认情况下,父元素的高度会根据子元素的内容自动进行调整,而如果我们将子元素设置为浮动,父元素的高度就会变为0.3、虽然浮动的元素脱离了文档流,但是里面的内容仍然占据空间,会根据相对位置进行布局。二、清转载 2015-08-09 23:27:15 · 611 阅读 · 0 评论 -
禁止选取网页中的文字
body { text-align: center; vertical-align:middle; height: 39px; overflow: hidden; moz-user-select: -moz-none; -moz-user-select:转载 2016-01-11 15:52:00 · 352 阅读 · 0 评论 -
css3新增的选择器
css3的属性选择器E[foo]选择匹配E的元素,且该元素定义了foo属性。注意,E选择器可以省略,表示选择定义了foo属性的任意类型元素E[foo="bar"]选择匹配E的元素,且该元素将foo属性值定义为了"bar"。注意,E选择器可以省略,用法与上一个选择器类似。E[foo~="bar"]选择匹配E的元素,且该元素定义了foo属性,foo属原创 2016-04-17 19:54:22 · 1117 阅读 · 0 评论 -
css两列布局,一列固定宽度,另一列自适应宽度
两列之一固定,另一列自适应1-2-1单列变宽布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box原创 2016-05-02 15:48:29 · 2767 阅读 · 0 评论 -
css整体缩放布局
1-2-1整体缩放布局 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%; _height:100%; he原创 2016-05-02 16:04:52 · 9022 阅读 · 2 评论 -
css三列布局,中间div固定,两侧div宽度自适应
中间固定,两侧宽度自适应1-3-1一列固定,中间div固定 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height: 100%;原创 2016-05-02 16:09:52 · 733 阅读 · 0 评论 -
css3弹性盒模型flexbox
一、设置给父元素的属性,控制子元素的显示方式display: flex/display: inline-flex设置给父元素盒子,将一个元素设置成弹性盒子;flex-direction决定显示的方向 (即项目的排列方向)1.row: 默认值,左对齐,顺序显示2.row-reverse: 右对齐 倒序显示3.column: 竖直顺序显示4.column-reverse:...原创 2019-05-03 17:05:48 · 256 阅读 · 0 评论