css
关注
分享
扫一扫
文章平均质量分 85
spfLinux
这个作者很懒，什么都没留下…
展开
-
ios适配
1、input text有圆角在相应界面或css中添加样式：input[type="text"],input[type="number"]{ -webkit-appearance: none; border-radius: 0;}转载自：点击打开链接转载 2018-06-28 12:35:14 · 294 阅读 · 0 评论 -
hover onclick冲突
今天遇到一个问题：要求是一个div，hover是一种样式，onclick后是另一种样式，结果两者冲突，当点击后，还是hover的样式，只有离开div才是onclick，所以就用了!important。后来自己又尝试了一个测试程序，发现onclick后hover无法生效，还是用了!important。主要原因是两者本身就有冲突，再加上操作的样式中有重复的。测试程序：原创 2018-01-22 13:53:28 · 1457 阅读 · 0 评论 -
画叉号的简单方法
原本在网上查的用span和::before以及::after去做，后来竟然发现搜狗输入法竟然有叉号，就用了下，贼好用。对号也有。原创 2017-12-19 08:16:52 · 2431 阅读 · 0 评论 -
pt px
pt也成为逻辑分辨率pt的大小和屏幕尺寸有关系，px指物理分辨率，和屏幕尺寸没有关系1个pt可以由1个px构成，也可以2个或者多个iphone6 1pt=2px转载 2018-01-01 19:55:02 · 343 阅读 · 0 评论 -
JS——图片轮播（淡入淡出）
Document #slider { /* position: absolute; top: 100px; left: 30%; */ width: 200px; height: 150px; border: 1px solid blue; } #slider>img { position: absolute; top: 100px; left: 3转载 2017-11-30 19:46:28 · 1160 阅读 · 0 评论 -
图片轮播，淡入淡出(js,css)
Document #d1>img { position: absolute; opacity: 0; transition: all .5s linear; } #d1>img.show { /* 这里必须用#d1>img，不然优先级不够 */ z-index: 10; /* 必须用z-index:10;不然后面的图片覆盖前面的 */ opacity:原创 2017-12-08 10:02:46 · 576 阅读 · 0 评论 -
编写自适应网页——media
Document div{ border: 1px solid blue; } 根据屏幕尺寸不同，显示不同布局样式 左侧附加导航 新闻列表 图片列表 明星列表 中部主题内容 Lorem ipsum dolor sit amet, c转载 2017-12-25 20:06:14 · 387 阅读 · 0 评论 -
media媒体查询
1、根据不同的浏览设备加载不同的css Document hello world 根据不同的浏览设备加载不同的css Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem omnis in autem, et non explicabo nisi necessitatibus iu转载 2017-12-25 19:03:58 · 467 阅读 · 0 评论 -
box-sizing
Document div{ width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box{ box-sizing: content-box; } .border-box{ box-sizing:转载 2017-12-25 09:50:39 · 249 阅读 · 0 评论 -
max(min)-device-width和max(min)-width的区别
Document tinyScreen,css:body{ background: red;}smallScreen.css:body{ background: green;}当使用min-width和max-width时，css有效果。----------------------------------------------------------转载 2017-12-25 09:23:30 · 1279 阅读 · 0 评论 -
幸运大转盘
界面参考：点击打开链接index.html 转盘 8元红包 88元红包 谢谢惠顾 优酷会员 一张电影票 一张优惠券 笔记本电脑 平板 点击开始 3次 × 恭原创 2018-01-04 10:08:05 · 870 阅读 · 0 评论 -
幸运大转盘2
解决不能从上次的位置开始转的bug。index.html: 转盘 8元红包 88元红包 谢谢惠顾 优酷会员 一张电影票 一张优惠券 笔记本电脑 平板 点击开始 3次 ×原创 2018-01-05 09:20:02 · 612 阅读 · 1 评论 -
解决登录成功更换header内容使下面部分出现白边的问题
某个块级元素的margin没有设置为0。例如：ul等。原创 2018-01-24 17:48:09 · 465 阅读 · 0 评论 -
ul li横排显示，100%，中间有border-right的做法
做成的效果如下：代码如下：html:<ul class="list2"> <li>问卷</li> <li>结果</li> </ul>css:.index .list2{ width: 100%; display: flex; flex-direction: row;}.index .list2&原创 2018-06-24 20:01:06 · 1588 阅读 · 0 评论 -
css 椭圆形输入框
主要将padding的值和border-radius的值设置成为相等的即可。转载 2018-03-26 23:39:20 · 6414 阅读 · 0 评论 -
css 背景颜色占满一屏 高度自适应
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" charset="utf-8"&原创 2018-02-28 16:35:44 · 6961 阅读 · 0 评论 -
解决弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕的问题
opacity: 0.3; filter: alpha(opacity=30); background-color: gray; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; 参考链接：点击打开链接...转载 2018-02-28 11:41:55 · 1042 阅读 · 0 评论 -
前端图标库
bootstrap:点击打开链接几款图标库推荐：点击打开链接阿里图标库(一个很好的平台)：点击打开链接iconfont点击打开链接原创 2017-12-25 13:19:59 · 1648 阅读 · 2 评论 -
模块图片平铺、拉伸
参考效果网址：点击打开链接index.html function getId(id){ return document.getElementById(id); } img1.onmouseover=function(){ getId("img2").style.left="40%"; getId原创 2018-01-28 18:13:52 · 536 阅读 · 0 评论 -
解决相邻图片之间的空隙问题
一种方案： .imgs>img{ float: left;}原创 2018-01-27 10:11:41 · 1007 阅读 · 0 评论 -
css兼容
1、透明度一般在ie中用的是filter:alpha(opacity=0)在firefox中，一般就是直接使用opacity:02、IE的怪异盒子在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)在怪异模式下，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）当设置为原创 2018-01-18 10:36:02 · 228 阅读 · 0 评论 -
translate 位移
1、 Document .d1{ width: 200px; height: 200px; border: 2px dotted red; } .d1 div{ width: 200px; height: 200px; line-height: 200px; text-align: center; background:转载 2017-12-25 09:15:44 · 469 阅读 · 0 评论 -
下拉菜单(css、jq)
... .dropdown{width:64px; height:20px;} .dropdown a{ text-decoration:none; color:#000; display:inline-block; } .dropdown>a{ border:1px solid #000; padding:6px 12px; } .dr转载 2017-12-06 17:38:39 · 256 阅读 · 0 评论 -
CSS——img的baseline问题
部分代码如下： 青莲剑仙-李白 效果：可以看到图片和下面之间有一道缝，这是因为img的默认对齐方式为(vertical-align:baseline)。修改成vertical-align:bottom即可：img { vertical-align: baseline; }原创 2017-11-09 10:32:27 · 1630 阅读 · 0 评论 -
CSS——给图像加边框时不会产生位置偏移
.sec1_img { cursor: pointer; border: 1px solid transparent;}.sec1_img:hover { border: 1px solid #00A4DA;}思路：预先给img设置透明的边框。原创 2017-11-08 17:33:55 · 1997 阅读 · 1 评论 -
CSS:nth-child
Document .test li { margin-top: 10px; } .test li:nth-child(1) { -webkit-text-decoration-line: none; -moz-text-decoration-line: none; text-decoration-line: none; } .test li:nth-转载 2017-10-13 14:51:53 · 291 阅读 · 0 评论 -
不错的字体（收集）
1、font: 14px/1.5 Verdana, Times New Roman; font-size-adjust: .58;效果转载 2017-10-13 11:09:11 · 357 阅读 · 0 评论 -
CSS——模仿按钮2(hover)
模仿按钮如下：（模仿的是w3school http://www.w3school.com.cn/cssref/selector_nth-child.asp） Document a { text-decoration: none; } .search_btn { display: inline-block; padding: 0 40px;原创 2017-10-18 19:48:43 · 368 阅读 · 0 评论 -
CSS——模仿按钮1
要模仿的按钮：（来自优快云：http://download.youkuaiyun.com/） Document a { text-decoration: none; } .search_btn { display: inline-block; padding: 0 40px; text-align: center; color: #FFF;原创 2017-10-18 19:29:38 · 714 阅读 · 0 评论 -
模仿某网站做的简约风格
Document body { margin: 0; border: 0; padding: 0; background: #ECF0F1; } a { text-decoration: none; } .header { height: 50px; background: #456; } li { display:原创 2017-10-18 17:00:13 · 627 阅读 · 0 评论 -
模仿文章框
要模仿的框： Document body { margin: 0; padding: 0; } ul li, li{ list-style: none; margin-right: 10px; /* 换一个单位 */ } a { text-decoration: none; } header,sec原创 2017-10-18 14:46:52 · 334 阅读 · 0 评论 -
导航栏样式1
Document body { margin: 0; padding: 0; } ul li, li{ list-style: none; margin-right: 10px; /* 换一个单位 */ } a { text-decoration: none; } header,section { margin: 0;原创 2017-10-18 12:33:50 · 406 阅读 · 0 评论 -
CSS——解决hover离开时效果突然消失的问题
参考代码： 简单解决 p{ width: 100px; height: 100px; border:1px solid; margin:0px auto; margin-top: 200px;转载 2017-11-10 11:53:53 · 18573 阅读 · 3 评论 -
CSS—z-index这样用
Document #d1 { width: 100px; height: 100px; background: #000; position: absolute; z-index: 0; } #d2 { position: absolute; top: 20px; color: #FFF; z-index: 1; /* z原创 2017-11-10 12:27:01 · 532 阅读 · 0 评论 -
CSS——滚动加旋转
Document #ds { position: relative; top: 80px; margin-left: 80px; width: 200px; height: 200px; /* border: 1px solid red; */ animation-name: headRoll; animation-duration: 3原创 2017-11-14 18:34:59 · 744 阅读 · 0 评论 -
CSS——图片精灵(Image Sprites)
注册成功 .head { width: 40px; height: 40px; background: url(../img/passport_icon.png); background-position: -480px -120px;}效果：参考资源：http://passport.iqiyi.com/pag原创 2017-11-27 10:30:39 · 1076 阅读 · 0 评论 -
css——遮罩层
Document #all_con { display: none; background-color: #000; width: 100%; height: 100%; left:0; top:0;/*FF IE7*/ filter:alpha(opacity=30);/*IE*/ opacity:0.3;/*FF*/ z-index转载 2017-12-20 16:48:57 · 529 阅读 · 0 评论 -
css 边框透明
border: 3px solid transparent;解决hover时出现边框造成的布局抖动。原创 2017-12-20 09:13:50 · 1619 阅读 · 0 评论 -
图片抖动轮播
Document #d1 { position: absolute; width:1000px; height:400px; top: 50px; overflow: hidden; } #d1>div{ background: url(img/banner2.png); position: absolute; top: 0px;转载 2017-12-08 16:00:02 · 610 阅读 · 0 评论 -
CSS——消息提示(聊天框)
Document #div1 { margin-left: 100px; width: 140px; height: 100px; background: #088CB7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-rad转载 2017-11-06 14:25:01 · 1843 阅读 · 0 评论