• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • YouClaw
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
阳光Angel
博客园    首页    新随笔    联系   管理    订阅  订阅

随笔分类 -  DIV

1 2 下一页
自适应宽度圆角导航如何实现

摘要：让子元素的背景图片右对齐，这样就可以覆盖父元素的背景，而padding-left是为了让父元素露出按钮左侧部分不致于被子元素的背景覆盖。 优点：自适应宽度变化；各浏览器显示效果一致； 缺点： <!DOCTYPE html> <html lang="en"> <head> <meta charset= 阅读全文
posted @ 2017-09-11 10:20 xiaoleilei 阅读(433) 评论(0) 推荐(0)
PC端和移动端一些奇葩兼容性问题

摘要：在password输入框显示一个“小眼睛”的按钮，去掉他的方法如下： 阅读全文
posted @ 2016-06-15 15:46 xiaoleilei 阅读(432) 评论(0) 推荐(0)
如何实现两行内容增多和一行内容增多，多余的内容显示省略号

摘要：最近工作经常会遇到这样的UI设计图，两行内容增多出现省略号，一般这样的解决方法我总会直接overflow:hidden隐藏，可是这样他不会出现三个省略号，下面给大家想到一个很easy的方法分享一下； 方法一：适合PC和移动端，最主要的就是这段js，大概是这样的原理： 1）获取所有的元素.txt,通过遍历循环，判断他的内容个数，如果他的内容大于20（这个数值可以随意定义，大概范围在你的一行是多少... 阅读全文
posted @ 2016-06-15 15:44 xiaoleilei 阅读(701) 评论(0) 推荐(0)
zoom和transform:scale的区别

摘要：小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日，星期二，00:52，归类于 css相关。 阅读 7876 次, 今日 8 次by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zh 阅读全文
posted @ 2016-06-06 15:12 xiaoleilei 阅读(1460) 评论(0) 推荐(0)
图片上黑色透明遮罩的实现

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0} .box{ width: 400 阅读全文
posted @ 2016-05-17 14:09 xiaoleilei 阅读(3749) 评论(0) 推荐(0)
H5如何实现一行三列布局

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta content="yes" name="apple-mobile-web-app-capable"> <meta co 阅读全文
posted @ 2016-05-10 16:20 xiaoleilei 阅读(1579) 评论(0) 推荐(0)
H5一行显示两个正方形

摘要：1）有时候一些图片会是正方形或者长方形，对于这样的图片一般都是居中显示到正方体内，代码如下： .exhibition_list img{width:100%;position: relative;top:50%;transform:translateY(-50%);-ms-transform:tra 阅读全文
posted @ 2016-05-10 15:16 xiaoleilei 阅读(1800) 评论(0) 推荐(0)
H5页面左图右边文字如何布局

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>商品</title> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content= 阅读全文
posted @ 2016-05-10 15:14 xiaoleilei 阅读(4052) 评论(0) 推荐(0)
H5横向三栏布局

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5横向三栏布局</title> <meta name="viewport" content="width=device-width,initial-scale=1 阅读全文
posted @ 2016-05-10 11:18 xiaoleilei 阅读(1206) 评论(0) 推荐(0)
表格第一列固定，右边内容可以左右滑动

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格第一列固定，右边内容可以左右滑动</title> <style type="text/css"> *{margin: 0; padding: 0}.table- 阅读全文
posted @ 2016-05-10 10:58 xiaoleilei 阅读(4874) 评论(0) 推荐(0)
高度30px，宽度自适应，点线在文字中间

摘要：亲爱的你好哦 阅读全文
posted @ 2014-11-20 18:44 xiaoleilei 阅读(298) 评论(0) 推荐(0)
如何在网页中插入百度地图

摘要：http://www.xichang.gov.cn/Item/8901.aspx无标题文档 阅读全文
posted @ 2014-05-22 14:35 xiaoleilei 阅读(236) 评论(0) 推荐(0)
三栏的网页布局，中间宽度自适应

摘要：无标题文档 阅读全文
posted @ 2014-05-16 13:51 xiaoleilei 阅读(221) 评论(0) 推荐(0)
鼠标滑过背景变色

摘要： 阅读全文
posted @ 2014-04-11 09:59 xiaoleilei 阅读(210) 评论(0) 推荐(0)
设置浏览器使用的dom模式为IE7

摘要：设置浏览器使用的dom模式为IE7IE=EmulateIE8 IE8 IE=EmulateIE9 IE9 IE=edge 使用最新版本 阅读全文
posted @ 2014-04-09 13:16 xiaoleilei 阅读(284) 评论(0) 推荐(0)
使用DD_belatedPNG让IE6支持PNG透明图片

摘要：使用DD_belatedPNG让IE6支持PNG透明图片众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上，具有其它图形格式所达不到的效果，IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性。而使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题，并且支持backgrond-positio 阅读全文
posted @ 2014-03-05 09:29 xiaoleilei 阅读(203) 评论(0) 推荐(0)
px和em的区别

摘要：px和em的区别2012-06-21 23:01:06|分类：CSS|字号订阅在如今这个提倡可用性设计以及用户体验设计的网络时代，CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸，中文情况下一般为12px，而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程。其实这一切都可以避免，那就是使用em单位作为字体显示单位。所有浏览器的默认字体大小都是16px，所以未经调整的浏览器在显示1em=16px。换算过来的话也就是说1px=0.0625em，也就是12px=0.75em, 10px=0.6. 阅读全文
posted @ 2013-11-25 17:21 xiaoleilei 阅读(365) 评论(0) 推荐(0)
em（倍）与px的区别

摘要：在国内网站中，包括三大门户，以及“引领”中国网站设计潮流的蓝色理想，ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸，几乎所有的主流站点都使用em作为字体单位，也就是可调的。没错，px比em更加容易使用，大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility)，不仅因为其根生蒂固的人文精神，直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508，强制网站达到一定的易用性。 关键点： 1. IE无法调整那些使用px作为单位的字体大小; 2. 国外的大部分网站能够调整的原因在于其使... 阅读全文
posted @ 2013-11-25 17:13 xiaoleilei 阅读(171) 评论(0) 推荐(0)
YSLOW

摘要：YSLOW编辑目 录1概述2Yslow-23条规则1概述什么是YSlow？YSlow[1]是Yahoo发布的一款基于FireFox的插件。如何安装YSlow？安装YSlow必须首先先安装 Firebug，然后下载YSlow，再对其安装。YSlow有什么用？YSlow可以对网站的页面进行分析，并告诉你为了提高网站性能，如何基于某些规则而进行优化。YSlow可以分析任何网站，并为每一个规则产生一个整体报告，如果页面可以进行优化，则YSlow会列出具体的修改意见。YSLOW[2]2Yslow-23条规则[3]1. 减少HTTP请求次数合并图片、CSS、JS，改进首次访问用户等待时间。2. 使用CDN 阅读全文
posted @ 2013-11-21 15:57 xiaoleilei 阅读(295) 评论(0) 推荐(0)
HTML技巧: 语义化你的代码

摘要：HTML技巧: 语义化你的代码Posted by Mr.Think on 12/30/2010分类于@CSS+HTML最近在读阿当的《Web前端开发修炼之道》, 其中有不少东西值得前端路上的朋友学习. 结合自己日常编码的一些经验, 我将陆陆续续将一些从书中学到的以及自己总结的一些前端方面的技巧分享给大家.HTML语义化, 似乎是一个老生常谈的问题. Google一下,也有大把关于语义化的文章. 为什么要语义化标签? 我是这样认为的:HTML的每个标签都有它特定的意义,而语义化,就是让我们在适当的位置用适当的标签, 以更好的让人和机器(机器可理解为浏览器可理解为搜索引擎)都一目了然.如果我的解. 阅读全文
posted @ 2013-11-21 15:29 xiaoleilei 阅读(267) 评论(0) 推荐(0)

1 2 下一页
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3