css相关
文章平均质量分 50
xlb_123
好记性不如烂笔头……
展开
-
css下拉框select自定义样式
注意:外层标签的宽度要大于下拉框的宽度标签: 套餐A 套餐B 套餐B 样式:.mask_box .styled-select {原创 2016-10-26 17:33:54 · 2585 阅读 · 0 评论 -
css实现div背景透明,文字不透明
标签://透明背景层 那谁谁5 //层上显示文字样式:.bg{ position: relative; float: left; top: -76px; width:190px; height: 40px; background: #000; FI原创 2016-07-12 16:40:09 · 812 阅读 · 0 评论 -
css实现鼠标移动图片上放大效果
标签:div class="new_img gallery cf"> div> a href="">img src="images/new_left.png" >a> div>div>样式:.new_img{ width: 270px; height: 180px; float: left; overflow: hidden;}/*原创 2016-07-12 16:38:03 · 3160 阅读 · 0 评论 -
css div设置positon:relative之后,再设置top,div的原位置有空白,解决办法
div设置positon:relative之后,再设置top,div的原位置有空白,解决办法:设置父元素的overflow:hidden原创 2016-11-02 18:20:51 · 2509 阅读 · 0 评论 -
div(固定宽度和不固定宽度)居中显示的方法总结
转自:http://www.w2bc.com/Article/200111.使用自动外边距实现DIV CSS居中CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为该容器指定宽度:转载 2017-03-06 09:06:43 · 1615 阅读 · 0 评论 -
响应式布局实例
静态布局意思就是只是针对某个屏幕下设计的网页,当屏幕大小改变时,页面布局不会发生变化,就像经常所看到的滚动条。自适应布局特点是分别为不同的屏幕设置布局格式,当屏幕大小改变时,会出现不同的布局,意思就是在这个屏幕下这个元素块在这个地方,但是在那个屏幕下,这个元素块又会出现在那个地方。只是布局改变,元素不变。可以看成是不同屏幕下由多个静态布局组成的。流式布局转载 2017-03-10 11:50:55 · 333 阅读 · 0 评论 -
html css rem响应式页面布局实例
html>head> meta charset="utf-8"> title>响应式页面csstitle> meta name="description" content="A basic responsive web page– an example from Chapter 1"> meta name="viewport" content="width=dev原创 2017-05-25 14:05:07 · 804 阅读 · 0 评论 -
html 有些图片被uc浏览器屏蔽的问题
昨天产品测试发现有些banner图片在uc手机浏览器上显示不出来,但是其它图片可以正常显示,最后发现是banner、ad、baidu这类的关键词引起的,改了之后就正常了,真是太吃惊吃惊了,即使是图片地址里面也不能带这些敏感词的………………………………………………原创 2017-05-26 09:24:08 · 6432 阅读 · 1 评论 -
css实现热点地图map,鼠标移到热点弹出层提示框
标签:div class="ConDiv"> img border="0" usemap="#Map" src="images/dt_04.png" /> map name="Map" id="Map"> area id="dongbei" alt="东北" href="" coords="642,92,675,127" shape="rect">原创 2016-07-12 16:45:48 · 4853 阅读 · 0 评论 -
CSS设置滚动条样式
一:webkit下面的CSS设置滚动条主要有下面7个属性::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的::-webkit-scrollbar-button 滚动条两端的按钮::-webkit-scrollbar-track 外层轨道::-webkit-scrollbar-track-piece 内层滚动槽::-webkit-scrollbar-thumb转载 2017-06-05 10:49:47 · 457 阅读 · 0 评论 -
css的div垂直居中的方法,百分比div垂直居中
前言我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。固定高宽div垂直居中如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50转载 2017-06-07 17:38:22 · 497 阅读 · 0 评论 -
换行符在textarea、div、pre中的区别
关于换行符,网上有许多说法,IE早期的浏览器是\r\n,有的浏览器是\r,但很难找到确切的版本号。经过本人正则匹配测试,chrome、firefox、safari、IE11都是\n,因此保险起见,若对换行符进行正则匹配,应当同时匹配\n, \r以及\r\n.值得一提的是\n、\r和\r\n都有换一行的效果,有些同学写换行时常写作\n\r,这就相当于换了两行,因此必须注意!换行符用于te...转载 2018-08-01 16:45:33 · 1895 阅读 · 0 评论 -
js 图片延迟加载lazyload.js详解
简介lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的。优点:它可以提高页面加载速度; 在某些情况清晰它也可以帮助减少服务器负载。安装bower安装:$ bower install jquery.lazyloadnpm安装:$ npm install jquery-lazyload 使用l...转载 2018-08-20 09:49:50 · 392 阅读 · 0 评论 -
.net html2canvas网页截图生成图片并保存到本地
网页截图,并保存到本地,页面长度过长,可能会出现截图不成功的情况,这个暂时还没解决。(1)引用jquery.js和html2canvas.js(下载地址:https://github.com/niklasvh/html2canvas/releases ,下载的版本是v0.4.1 - 7.9.2013)(2)html代码:<!DOCTYPE html><html...原创 2018-09-18 18:32:13 · 1803 阅读 · 0 评论 -
纯CSS的CheckBox样式修改
.limits { padding: 20px 50px 0px;} .limits section{ padding: 0px 50px;} .limits input[type=checkbox] { visibility: hidden;} .limits .checkbox { width: 15px; height: 15p...转载 2018-10-23 15:30:16 · 763 阅读 · 0 评论 -
css鼠标聚焦到文本框去除默认自带蓝色边框
input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-modify: read-write-plaintext-only; outline: none; box-shadow: none;}原创 2016-07-18 17:38:52 · 3181 阅读 · 0 评论 -
css图片图片居中显示
测试页面* {padding: 0;margin: 0;}.box {width: 200px;height: 200px;overflow: hidden;border: 2px solid #000;border-radius: 50%;}div.box {background-position: center;backgro转载 2016-07-20 11:08:05 · 1121 阅读 · 0 评论 -
css对上传按钮美化
思路就是:input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。选择文件 .file{ position:relative; display:inline-block; background:#D0EEFF;转载 2016-07-20 11:20:55 · 424 阅读 · 0 评论 -
css无刷新改变地址栏参数
使用a的瞄标记,使用history.pushstate,不兼容ie浏览器原创 2016-11-08 10:52:58 · 313 阅读 · 0 评论 -
html页面顶部提示在更高浏览器下面提示语
标签:div class="ie-tips">Sorry. 您使用的浏览器版本过旧,为了更好的访问体验,请升级浏览器至b>IE8以上b>,推荐使用a href="http://rj.baidu.com/soft/detail/14744.html?ald" target="_blank">Chrome谷歌浏览器a>a class="js-tip-close">关闭a>div>css:原创 2016-10-28 09:52:44 · 3067 阅读 · 0 评论 -
css 页面右侧悬浮窗口左右位置固定
之前写左右固定,直接写了一个right:多少px,发现当窗口变小之后,那个悬浮框会挡住页面,体验不好,找了一下,发现,有人这么写的:直接left:50%,再这个加上margin-left:就可以了,这样,右侧的悬浮窗距左边的距离就不会变了right_fbox {width:143px;height:349px;position: fixed;float: ri原创 2016-10-24 09:47:19 · 18933 阅读 · 2 评论 -
css移动页面使用rem
这个rem我这会才搞明白,查了好几个资料,又是计算公式之类的,看的都晕掉了rem是以fontsize为基准的 如果html的fontsize设置为16px 就相当于设定了1em=16px 比如你的一个div设置为 32px ,那就是2rem一般用js来:html lang="zh-CN" lang="zh-CN" class="no-js" id="html-lay原创 2016-10-19 15:36:32 · 381 阅读 · 0 评论 -
css兼容性ie5/6/7/8的圆角
转载来自:http://www.jb51.net/css/78107.htmlborder-radius 圆角.radius{border: 1px solid #696;padding: 60px 0;text-align: center; width: 200px;-webkit-border-radius: 8px;-moz-border-radius:转载 2016-08-08 11:55:50 · 760 阅读 · 0 评论 -
css下拉框ie8下面文字居中
设置:padding:8px 0;转载 2016-08-05 14:23:23 · 516 阅读 · 0 评论 -
css兼容ie浏览器鼠标放大效果
jQuery鼠标悬浮图片放大特效$(function(){var imgWid = 0 ;var imgHei = 0 ; //变量初始化var big = 1.2;//放大倍数$(".banimg li").hover(function(){$(this).find("img").stop(true,true);var imgWid2 = 0;var imgH转载 2016-08-05 13:28:39 · 473 阅读 · 0 评论 -
css背景图片填充样式background-size兼容ie8以下浏览器解决
background-image: url(images/background.jpg); background-size:100%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg',sizingMethod='scale');/*兼容ie8以下*/已经试过,确实可用!!转载 2016-08-05 11:19:49 · 8751 阅读 · 0 评论 -
css兼容ie浏览器下面圆形问题
网上搜到的,这个办法确实可行的,原理就是做一张遮罩图片(中间是圆形,其他颜色根据背景色设置),然后设置浮动到要显示的图片上,设置个z-index就可以了。html代码 css代码.user-img{ position: relative; float: left; wid转载 2016-08-04 13:04:00 · 998 阅读 · 0 评论 -
css实现动态进度条
转载自:http://www.tuicool.com/articles/AVRvmqmhtml lang="en">head> meta charset="UTF-8"> title>测试title> style type="text/css"> #progress{ width: 50%; hei转载 2016-07-25 10:41:19 · 954 阅读 · 0 评论 -
css实现百分比进度条
html lang="en">head> meta charset="UTF-8"> title>测试title> style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding:原创 2016-07-25 10:33:05 · 6139 阅读 · 0 评论 -
css实现鼠标放到图片旋转效果
html lang="en">head> meta charset="UTF-8"> title>Titletitle> style type="text/css"> .flip-container { perspective: 1000; transform-style: preserve-3d;转载 2016-07-25 10:19:08 · 4051 阅读 · 0 评论 -
css空箭头的样式
css绘制空心和实心箭头,网上搜到好多实心箭头,很少有空心的,今天整理了一下:实心的箭头比较好写,空心的箭头,要用2个样式去叠加显示,最外层背景是白色的,里面一层的背景色就是箭头的要显示的颜色,通过位移来设置箭头宽度。效果:html代码:html lang="en">head> meta charset="UTF-8"> title>鼠标滑过显示隐藏层title>原创 2016-07-22 10:39:05 · 896 阅读 · 0 评论 -
css设置鼠标放到图片上图片放大效果
div{width: 300px;height: 300px;border: #000 solid 1px;margin: 50px auto;overflow: hidden;}div img{cursor: pointer;transition: all 0.6s;}div img:hover{transform: scale(1.4);}转载 2016-07-21 16:32:32 · 4116 阅读 · 0 评论 -
css设置小于12像素的字体
css设置小于12像素字体:一、html{-webkit-text-size-adjust:none;//旧版本的webkit内核的浏览器是支持,新版的webkit内核的浏览器已经不再支持这个属性}二、.class{transform: scale(0.5);//并不是真的小于12像素,只是在原来的基础上进行缩小了}原文:https://blog.csdn.net...转载 2019-05-22 16:57:48 · 2157 阅读 · 0 评论