
布局之道
文章平均质量分 93
疯小伙五
这个作者很懒,什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
div被flash遮挡的情况
本人在做web开发中遇到fusioncharts生成图表flash遮挡页面中元素的情况,无论怎么设置flash容器和层的深度(z-index)也无济于事,如下图: 现有的解决方案 是在插入flash的embed或object标签中加入”wmode”属性并设置为wmode=“transparent”或”opaque”,在这里,我在FusionCharts.js源码中加入一段代转载 2014-06-24 16:05:14 · 648 阅读 · 0 评论 -
jQuery全屏滚动插件fullPage.js
简介如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js。fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏转载 2014-10-24 09:40:41 · 926 阅读 · 0 评论 -
手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。meta name="viewport" content="width=device-width, initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=d翻译 2014-09-02 09:52:29 · 538 阅读 · 0 评论 -
CSS 实现表格内容超出显示省略号
原理:本方法用于解决表格单元格内容过多时的美观问题,主要涉及到4句CSS样式:1. table-layout: fixed 由于table-layout的默认值是auto,即table的宽高将取决于其内容的多寡,如果内容的体积无法估测,那么最终表格的呈现形式也无法保证了,fixed一下就好了。(注意:此样式是关键)2. white-space: nowrap 是为了保证无论转载 2014-08-18 22:40:57 · 801 阅读 · 0 评论 -
完美解决多行文字垂直居中
完美解决不固定行数的文字垂直居中 body{font-size:14px;font-family:tahoma;} .wrap{display:table; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; height:400px; _position:relative; overflow:hidden;原创 2014-08-13 14:30:42 · 1533 阅读 · 0 评论 -
IE label中有图片 无法选中radio?其实可以完美解决
今天遇到一个问题,在IE浏览器下,使用label FOR radio后,label中的图片无法选中。例如,这样的代码 ,这种情况下,点击label的图片将无法选中radio选项。解决这个问题,目前可以有三种方法,分别是通过JS、CSS或者HTML代码3个方面来解决。方法一,JS:window.onload = function(){翻译 2014-07-21 11:03:57 · 772 阅读 · 0 评论 -
web app自适应屏幕方案探讨
标签:自适应viewportdpi因为web app跨平台的特性,决定着自适应方案在整个项目的重要性。特别对于Android众多分辨率和屏幕尺寸的机器群,找到合适通用的解决方案显得尤为重要1.页面大小有没有遇到过一个情况?在iphone 4机器上开发时,明明分辨率是960*640,我们写一个320px的容器,竟然占满了屏幕宽;显示一张100*100的转载 2014-06-12 12:01:03 · 1260 阅读 · 0 评论 -
三个div横排,中间的div自适应宽度
HTML: section-a section-b section-c CSS :.container{position: relative; overflow: hidden;width: 100%; height: 180px;}.section-a,.section-b,.section-c{position: absolute;top: 0;原创 2014-05-11 18:00:30 · 2159 阅读 · 0 评论 -
2016各大互联网公司前端面试题汇总
百度篇 1 写出java运行结果:for(var i=0; i<10; i++){} alert(i); // 102 Cookie、sessionStorage、localStorage的区别3 JSONP原理4 简述css盒模型5 说说get和post请求的区别6 运行结果 var a = {n: 1} var b = a; a.x = a = {n: 2} ...转载 2018-04-23 20:01:17 · 262 阅读 · 0 评论 -
可扩展的模块化架构的CSS
分类CSS规则每个项目需要一些组织。将您创建的每个新风格到单个文件的结束会发现事情更困难,会对别人非常混乱的项目。当然,你可能有一些组织已经到位。希望你读在这些页面将强调与您现有的流程和工作,如果我很幸运,你将会看到新的方法可以改善你的过程。你如何决定是否使用ID选择器,或类选择器,或任何数量的选择器在你处理吗?你怎么决定哪些元素应该得到样式魔术你希望给吗?你如何让它容易理解如何组翻译 2014-11-23 11:15:01 · 811 阅读 · 0 评论 -
如何在PS,AI上直接使用FONTAWESOME图标?
如何在PS,AI上直接使用FONTAWESOME图标?FontAwesome是一套免费而且好用的Web字体图标,只要在CSS引入这个字体icon,它就可以直接通过class来生成一个图标,而且免费使用。目前图标数量已经更新至585个之多,包含常用的APP UI应用图标、品牌图标等。今天教大家如何将FontAwesome直接在Photoshop或AI上使用,这样日后做UI设计也方转载 2015-12-15 17:18:40 · 3554 阅读 · 0 评论 -
总结移动端开发的一些问题
标签:1、防止手机中网页放大和缩小,这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport有些手机网站我们看到如下声明:DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">转载 2016-12-14 11:04:47 · 523 阅读 · 0 评论 -
html5在移动端的屏幕适应性问题
html5在移动端的屏幕适应性问题Html5 曾经是最最炙手可热的技术,移动端也因为html5技术的加入变得更加变通一些,人人都喜欢“Write once,run more”,但在今年扎克伯格承认在html5上的失策以来,我们也应该清醒的认识到html5作为一种新兴技术,还有许多不完善的地方,比如html5 的效率问题,这足以让众多程序员们无力吐槽,消费者们也会无法忍受。但不可否认转载 2014-06-12 13:41:50 · 1598 阅读 · 0 评论 -
图片原理与优化
前言:该文收集了前辈们的一些关于图片优化的技巧,在此收拢到一起,对于各个方法的优化原理做了一些研究,希望能给大家对于图片优化这一块起到抛砖引玉的作用。提到图片,我们不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。常见的翻译 2014-08-21 14:15:02 · 1015 阅读 · 0 评论 -
div层被flash遮挡的解决办法
flash的wmode属性:"Window " 在 Web 页上用影片自己的矩形窗口来播放应用程序,并且始终位于最顶层。"Opaque " 显示页面上位于它后面的内容。"Transparent "使 HTML 页的背景可以透过应用程序的所有透明部分显示出来,并且可能会降低动画性能。"Opaque "和"Transparent "都 可与 HTML 层交互,从而允许 SWF 文件转载 2014-06-24 16:10:39 · 2649 阅读 · 0 评论 -
滚动条宽度到底是多少?
滚动条宽度到底是多少? 相信不管是web前端还是后台的程序员,都讨厌网页水平方向出现滚动条。而要避免出现水平滚动条,计算宽度是必不可少的。而在设计过程中,设计师一般避免计算这个右侧滚动条的宽度。为了避免出现水平滚动条,而将宽度设为比具体分辨率少五六十像素的宽度。如YUI推荐的宽度750px对800*600的分辨率,950px或974px对1024*768的分辨率。一般认为:这个转载 2015-02-04 10:01:26 · 7945 阅读 · 0 评论 -
html头文件<meta>设置缓存
,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.) ,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private,其作用根据不同的重新浏览方式分为以下几种情况:1) 打开新窗口 值为private转载 2016-08-19 10:17:22 · 544 阅读 · 0 评论 -
div+css布局有哪些技巧?
一、处理九刀十断的情况css2:使用伪类:first-child 例如:.news-list .item{border:1px solid #ddd;} .news-list .item:first-child{border:none;}css3:使用伪类:not(:last-child)、:not(:first-child)、:not(:nth-child)等二、遵循“原创 2017-03-08 12:03:50 · 898 阅读 · 0 评论 -
谈谈div+css布局命名、语义化、结构化的开发经验?
一、什么是HTML语义化?根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等 二、为什么要语义化?为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看; 用户体验:例原创 2017-03-07 10:16:11 · 921 阅读 · 0 评论 -
移动端屏幕适配 fis3+rem方案
移动端多屏适配rem方案 背景1. 开发移动端H5页面2. 面对不同分辨率、dpr的手机3. 面对不同屏幕尺寸的手机 一、概念1、物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元,在操作系统的调度下,每一个设备像素都有自己的颜色值和亮度值。2、设备独立像素(density-independent pixel)设原创 2017-02-10 10:52:19 · 3365 阅读 · 0 评论 -
不容错过的图标样式-FONT-AWESOME
设置Font Awesome字体的方法很简单,只需将两行代码添加到你的网站。或者你可以成为一个专业和定制一个最简单的自己,Bootstrap 3 Font Awesome字体会让更好的扮演自己!一、最简单的通过MaxCDN方法使用BootstrapCDN由于在MaxCDN的慷慨的人,您可以使用BootstrapCDN字体的添加到你的网站一行代码。你甚至不需要下载和安装任何东西!1.将下转载 2018-09-23 10:26:05 · 423 阅读 · 0 评论