- 博客(22)
- 收藏
- 关注
RSS订阅原创 自适应页面的正方形块
方法1div{width:50%;height:0;padding-bottom:50%;float:left;display:block;}方法2div{width:50vw;height:50vw;float:left;display:block;}方法3js方法
2017-10-28 15:18:57
316
转载 em rem px vw vh用法
px 像素，相对长度单位，相对于显示器屏幕分辨率而言em相对长度单位，相对于当前对象内文本的字体大小；当前对象内的文字大小没有设置，则相对于浏览器的默认字体大小任意浏览器默认的字体高度是16px,所有未经调整的浏览器都符合1em=16px,为了简化font-size的换算，需要在body选择器中声明font-size=62.5%,这样是的em的值变为16px*62.5%=10px;这样
2017-10-28 14:57:16
713
转载 checkbox全选/取消/选中所有奇数/反选/获得选中的值
$("document").ready(function(){ $("#btn1").click(function(){ $("[name='checkbox']").attr("checked",'true');//全选 }) $("#btn2").click(function(){ $("[
2016-05-05 17:12:40
351
转载 隐藏滚动条
网页中去掉滚动条： 去掉横向滚动条： 去掉竖向滚动条： 两个都去掉： 框架中去滚动条在name=""后面加 scrolling="No" 1,Overflow内容溢出时的设置 overflow 水平及垂直方向内容溢出时的设置 overflow-x 水平方向内容溢出时的设置 overflow-y 垂直方向内容溢出时的设置 以上三个属性设置的值为visible、sc
2016-04-29 16:48:34
263
原创 换行问题
/*CSS*/只能在半角空格或连字符处换行word-break:keep-all允许在单词内换行word-break:break-all使用浏览器默认的换行规则word-break:normal;强制换行word-wrap:break-word;overflow:hidden;多出文字用省略号代替text-overflow:ellipsis;//让超出的用.
2016-04-09 10:18:04
280
转载 提取页面宽度的问题
1=document.body.clientWidth;//网页可见区域宽1354/1333/96 2=document.body.offsetWidth;//包括边线和滚动条的宽1354/1333/1329 3=document.body.scrollWidth;//网页正文全文宽度1354/1349/1329 4=document.body.scrollTop;//0/0//
2016-04-08 21:29:09
283
转载 手机端网页web开发要点
头部必须要加的http-equiv="Content-Type" content="text/html; charset=utf-8" /> name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
2016-03-29 16:53:59
2888
转载 使用CSS3 Media Queries实现网页自适应
当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大。人们也不再仅仅用台式机来浏览网页，现在有手机，平板电脑等等。所以传统的固定宽度设计形式将不再是个最佳选择，网页设计需要有自适应性。网页的布局需要能够根据不同的分辨率和设备来自动调整，以达到到最佳显示效果。接下来会展示如何运用HTML5和CSS3来设计一个自适应网页。效果预览 代码下载先看看它的效
2016-03-23 09:31:06
602
转载 css3媒体查询实现网站响应式布局
原因和其他创意性的生活用品基本上是一样的，处于对人力物力财力的节省和对生活富有诗意的一种追求。在人力物力和财力有限的情况下，一个网站既要功能完善，又要跟得上移动互联网的潮流（不是瞎跟风啊），那么同一套后台系统、数据库和前端代码，怎样才能满足用户在不通场景（厕所、超市、商场、被窝）不同设备（Iphone、ipad、电视、小米、三星、华为、HTP、诺基亚等等）上都能体验到最佳的产品体验和功能呢？
2015-08-18 10:37:24
981
转载 img之间有空隙的问题
图片间有空隙的解决方法定制页面时遇到图片间有空隙的问题，google：在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:直接加样式img{vertical-align:bottom; display:block}当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙
2015-08-15 10:24:57
3262
转载 一个页面两个windon.onload的解决办法
1.问题描述:当一个HTML页面中加载了两个window.onload=function() {};函数时,页面只会执行第二个window.onload里面的内容如下,结果显示2:[html] view plaincopy> html xmlns="http://www.w3.org/1999/xhtml"> head
2015-07-22 16:45:45
538
转载 如何声明字体？
@font-face{ font-family: 'fontNameRegular';src: url('fontName.eot'); src: local('☺'), url('fontName.woff') format('woff'),url('fontName.ttf') format('truetype'),url('fontName.svg#fontName') fo
2015-06-15 16:58:35
1106
转载 quotes
CSS blockquote标签的定义blockquote {background:#f9f9f9;border-left:10px solid #ccc;margin:1.5em 10px;padding:.5em 10px;quotes:"\201C""\201D""\2018""\2019";}blockquote:before {color:#ccc
2015-06-15 14:36:16
980
转载 background:-webkit-gradient()背景渐变属性
webkit内核的safari、 Chrome的Linear Gradients (线性渐变)的几点说明及演示：webkit内核的safari、 Chrome的Linear Gradients (线性渐变) 基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值), [color-stop
2015-06-14 17:00:43
26985
转载 display的设定block;inline;inline-block
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是： 和其他元素都在一行上； 高，行高及顶
2015-06-14 16:08:40
646
转载 转载【学习CSS了解单位em和px的区别】
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章，题目有点吓人，但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点，看过以后确实收获很大。平时都是用px来定义字体，所以无法用浏览器字体放大的功能，而国外大多数网站都可以在IE下使用。因为1、IE无法调整那些使用px作为单位的字体大小；2、国外的大部分网站能够调整的原因在于其使用了em
2015-03-12 10:00:54
363
转载 利用@media screen实现网页布局的自适应
经常为不同分辨率设备或不同窗口大小下布局错位而头疼,可以利用@media screen实现网页布局的自适应,优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值以下是针对自用主题而写的css,对宽度768以下设备只保留主要文章框架,以便在有限的空间里获得最佳阅读体验@media scre
2014-08-08 16:56:42
367
原创 zoom:1的作用
zoom这个特性是IE特有的属性。zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题，功能相当于overflow:auto，同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto；zoom:1;。这样，子元素浮动，父元素再也不会不自动跟子元素扩大了。
2014-05-23 13:45:11
546
原创 关于背景半透明效果的代码
在css中加入｛background:rgba(0, 0, 0, 0.8)!important;filter:Alpha(opacity=80); background:#000;｝
2014-05-22 18:16:47
887
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人