CSS – 阿西河

Chrome 谷歌浏览器 css 字体小于 12px 的解决办法

0001年1月1日 1 分钟阅读

chrome 默认浏览器，会把小于 12px 的字体，改为 12px 可以用 transform: scale() 这个来写；通过 transform-origin 来控制缩放的基点 HTML 结构 1 2 3 4 <span class="wui-txt-muted wui-txt-xxs"> <span class="wui-txt-

CSS

CSS display inline-block 导致有间距的解决办法

0001年1月1日 1 分钟阅读

display: inline-block; 会导致元素有 4px 空白间距如图；解决办法： 1、去掉标签之间的空格；或者用注释也可以 2、用 font-size 来解决父级添加 font-size:0；然后本身再把

CSS

CSS iPhone 和 Android 的浏览器模式自动调整字体大小

0001年1月1日 1 分钟阅读

-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; iPhone 和 Android 的浏览器纵向 (Portrate mode) 和橫向 (Landscape mode) 模式皆有自动调整字体大小的功能。控制它的就是 CSS 中的 -webkit-text-size-adjust。

CSS

CSS reset.css

0001年1月1日 1 分钟阅读

初始化文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 /*reset*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;} table{border-collapse:collapse;border-spacing:0} fieldset,img{border:0}

CSS

CSS 上中下三栏自适应高度

0001年1月1日 1 分钟阅读

原理是 header 和 footer 用position:absoluteL 做绝对定位；然后中间的 midel 的width和height实现 100%； HTML 代码如下： 1 2 3 4 5 6 7

CSS

CSS 中栏固定宽度，左右两栏宽度自适应

0001年1月1日 2 分钟阅读

最简单的是 div 中间居中；可以用 margin 来实现； 1 2 3 4 5 6 7 .div1{ width: 500px; height:100px; background:orange; margin: 0 auto; /*margin必须的*/ } 中间栏固定，左右自适应；代码如下，有点像双飞

CSS

css 修改浏览器默认滚动条样式

0001年1月1日 1 分钟阅读

页面中默认的样式比较丑；可以美化下；美化后的滚动条如下 CSS 代码如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 .cnc-index .team-wrap .team-item{ width: 430px; height: 170px; overflow-x:

CSS

CSS 实现文字垂直排列并居中

0001年1月1日 1 分钟阅读

方法 1、是自己挤出来的，用 2 个 DIV 实现，以前一直这么搞的，CSS 没人交流，所以一直按照最笨的来；今天学到一个新的方法；瞬间高大上；方法 2：加入

CSS

CSS 根据浏览器宽度自动把布局从三栏切换成两栏加底栏

0001年1月1日 3 分钟阅读

思路是开始布局一个界面；然后做浮动；右侧三个 DIV 宽度相加等于左侧大的 DIV 宽度；高度相加等于左侧大的 DIV 高度！不在不同的宽度下有不同的表现；如下图 HTML

CSS

CSS 清晰风动态渐变背景

0001年1月1日 1 分钟阅读

小清新风格的动态渐变背景；用在顶部 Tips，做全站提示； DEMO 如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

CSS

CSS 背景透明文字不透明，兼容到 ie8 的，最简单粗暴的写法

0001年1月1日 1 分钟阅读

今天工作中遇到一个需求，是要实现“背景透明文字不透明”, 兼容到 IE；我开始是用伪元素来做；后来试了试 rgba，然后网上搜兼容 IE 方法；看到网上

CSS

CSS 英文自动换行的写法

0001年1月1日 1 分钟阅读

用下面这种的即可； 1 2 3 4 5 6 .pages-wrap-list .cnc-extra-data{ max-width: 850px; table-layout:fixed; word-break: break-all; overflow:hidden; }

CSS

CSS 让文本输出 textarea 的格式

0001年1月1日 1 分钟阅读

在 textarea 中是有换行等之列的简单格式；在重现的时候，一般用 p 标签来展示，这个时候如果想要展示可以使用 1 2 3 .like-textarea{ white-space: pre-line; } 这个属性可以合并空白符序列，但是

CSS

CSS+js 有序排行

0001年1月1日 2 分钟阅读

HTML 代码如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>无序列表CSS3<

CSS

CSS3 渐变文字写法

0001年1月1日 1 分钟阅读

一个渐变文字，色彩还行，作为标题使用的； DEMO 如下： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .title{ font-size: 68px; font-weight: normal; color: rgb(65, 133, 225); text-transform: uppercase; line-height: 1.2;

CSS

CSS3 箭头上升，模拟缓慢增长的写法

0001年1月1日 2 分钟阅读

做了类似引导分享的一个箭头；提醒用户去分享；如下： 1 2 3 4 5 6 7 8 9 10 11 .share-prompt-wrap .share-prompt-arrow{ width: 0.573rem; -webkit-animation-duration:3s; animation-duration:3s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-name:share-prompt-animation; animation-name:share-prompt-animation; -webkit-animation-timing-function:ease-in-out; animation-timing-function:ease-in-out; } 动画部分如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

CSS

HTML5+CSS3 菜单列表

0001年1月1日 8 分钟阅读

这个里面最常用的是一个属性就是： -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all ease; -ms-transition: 0.3s all ease; HTML5 和 CSS3 配合的； DOM1 的代码如下： HTML 部分； 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

CSS

reset.css

0001年1月1日 1 分钟阅读

PC端 1 2 3 4 5 6 7 8 9 10 11 12 13 @charset "utf-8"; /* Broszhu - taobao.fm */ body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;} body{font-size:12px;} img{border:none;} ul,ol{list-style:none;} input,select,textarea{outline:none; border:none; background:#FFF;} textarea{resize:none;} a{text-decoration:none;} /*清浮动*/ .clearfix:after{content:"";display:block;clear:both;} .clearfix{zoom:1;} 移动端 /* html5doctor.com Reset Stylesheet v1.4.1 2010-03-01 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,

CSS

一个 css z-index 的题目

0001年1月1日 1 分钟阅读

搜了下东西；看到有这么一句话；当子层和父层都定义了z-index的属性的时候，z-index值以父层的z-index为准，这个是web前端应

CSS

纯 css 实现箭头的代码

0001年1月1日 1 分钟阅读

实现向上，向下，向左、向右的； HTML 代码如下 1 2 3 4 <div id="triangle-facing-top"></div> <div id="triangle-facing-right"></div> <div id="triangle-facing-bootom"></div> <div id="triangle-facing-left"></div> CSS 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 #triangle-facing-top { display: inline-block;

CSS