在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码： title p left right 在浏览器中查看效果如下： 在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如： ...
ios系统和某些移动端background-attachment:fixed不兼容性，没有任何效果，但可以hack一下就可以了，代码如下: ps：想在哪个标签加背景，可以在它class后:before. body:before { content: ; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(path/to/image) center 0 no-repeat; background-size: cover;} 内容来自：前端录ios_iphone_移动端background-attachmen...
0.Goku Goku是《七龙珠》的主人公孙悟空，神通广大，解决世间存在的问题。同样，尝试前后端分离，也希望可以解决目前前端开发中存在的痛点。 1.基本思路 整体上使用MVC的架构，但跟Angular不同(双向绑定)，数据是单向流动的，数据单向流动有如下的好处: 数据具有更好的可预测性，view层的变化一定来源于model 性能上更优 MVC各层使用的基本技术: view: 使用react作为view层渲染...
前两天编写了一个前端页面，在本机上显示一切正常。不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破p溢出来。再由于页面是自适应页面，根据不同分辨率的显示器会做出相应的p宽度调整，所以图片即使不大，但是因分辨率不同也会出现溢出的情况。 这里探讨总结一下解决方法。 首先我们先来做个简单的css布局：<html> <head><meta charset="utf-8" /><title>div图片溢出的解决方案</title><style type="text/cs...
这个就是顶部导航，在我的电脑上显示正常，但是换别的分辨率电脑，就显示有问题了， 我这里边用了一段js代码，贴出来 $(document).ready(function(){ var topMain=$("#header").height();//是头部的高度加头部与nav导航之间的距离 var nav=$(".daohang"); $(window).scroll(function(){ if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除 nav.addC...
CSS Reset是什么？ 在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是...
部件库的方式 常用的方法就是采用网络上分享出来的部件库，比较全的就是小楼老师的部件库。 但是这种部件库的ICON一般都是图片，当颜色与当前原型色调不一样的时候，就不能用了。而且ICON常常表示状态，不同的状态需要不同的颜色，用图片做原型ICON就不合适了。 字体CION方式 后来发现了一个神器，字体icon，每个icon其实就是一个文字，文字更改颜色和大小非常方便。 字体名称：FontAwesome Fon...
在项目中的问题，之前用的是用IETest测试IE7,8发现背景透明设置无效，后来找文章解决！看了一些资料，做下总结。 几种IE半透明CSS样式 IE8里可以这样写 -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”; IE7里可以这样写 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); IE6,IE7,IE8里都可以这样写 filter:alpha(opacity=50) progid:DXImageTransform.Microsoft这种写法很是难懂...
移动端网页开发离不开强大的 rem 支持，但由于各尺寸基数未必成比例，以及浏览器的计算偏差，常常会导致 background-position 不够精确，引发 CSS Sprites 错位。下图左侧为 PC 端模拟页面，右侧为移动端实测： 明显可以看出右侧的图标已经错位，图中的问题可以依赖 iconfont 解决，但只局限于单色图标。既要响应式，又得避免 rem 带来的问题，选用百分比是个好方案。 可是……等等，怎么还是错位？甚至完全没办法...
环境描述 前端：jsp 后端：SpringMVC Controller 尽管jsp页面已设置了pageEncoding： 然后在控制器中，读取到的对应参数如果含有中文，则出现乱码，例如： public ModelAndView search(@RequestParam("keyword") String keyword) { //keyword乱码 } 解决办法 新建xml文件名为“glassfish-web”，添加以下代码： <glassfish-web-app> <parameter-encoding d...
作为一个前端小白，鼓捣了几天前端。。今天突然发现我深信不疑的东西，竟然出现了问题。。就比如我在css目录下面写了一个css样式文档：style.css。这时里面只有一句话： body { background-color: #ddd;} 然后再我的html文件里面去引入这个外部css： 在浏览器一刷新。。哇，kao。竟然没反应，不起作用。。我检查了好几遍这个路径确定没有问题，打开chrome的F12调试器。确信浏览器加载了css文件，然后我打开了这个文...
出处：http://www.zhangxinxu.com/study/201603/icon-text-vertical-align.html css .icon { display: inline-block; width:20px; height:20px; background: url(delete.png) no-repeat center; white-space:nowrap; letter-spacing: -1em; text-indent: -99em; color: transparent; /* IE7 */ *text-indent: 0; *zoom: expression( this.runtimeStyle[zoom] = 1, this.inner...
html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } #div1 { width: 80%; height:100%; margin: 0px auto; padding: 0px; background-color: #b0ffdd; } 上面的例子中，保留div1的height:100%的前提下，能够让div2撑开div1吗？ 回复讨论(解决方案) 默认情况下就是撑开的 height:100%;不要或者设为 height:auto， 都...
1、给inline-block元素设置一个父元素。 设置父元素的font-size：0；。子元素font-size设置成合适大小，如果不设置子元素font-size，子元素会继承父元素的0； 2、给inline-block元素设置一个父元素。(letter-spacing：字符间距) 设置父元素的letter-spacing为-4px或-8px，除谷歌是-8px外，其余是-4px。同样要设置子元素的letter-spacing：0；否则会继承父元素，造成子元素内文字变形。 经过试验，统一设置...
note:当页面内嵌入一个iframe实际上是在dom上新建了一个新的完整的window对象 iframe中取得主窗体 window.top (顶级窗口的window对象) window.parent (当前iframe的父窗体window) 多层嵌套的iframe window.parent.parent....来取 取得需要的window后可进行操作父文档的内容 如: window.top.document.getElementById(xxx"); 主窗体中取得iframe所属的window对象 window.frames[iframe的名字] ...