今天看到了这样一道题 用两种不同的方法来实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 自己感觉有好几种方法，再此总结下： 一、使用position：absolute方法，因为把元素设置为absolute，那元素就脱离了文档流，后面的元素就会占据他原来的位置： 无标题文档 .side{width:190px;height:80px;background-color:#F00;position:absolute;} .exta{height:...
在传统方法的基础上加入了Flex布局并阐述各方法的优缺点，希望对大家有所帮助。先上目录： 两列布局：左侧定宽，右侧自适应 方法一：利用float和负外边距 方法二：利用外边距 方法三：利用position 方法四：利用flex布局 三列布局：左右定款，中间自适应。 方法一：使用负外边距 方法二：使用绝对定位 方法三：使用flex布...
子元素的margin-top作用于外层父元素解决方法:有时候在设置子元素的margin-top属性的时候，本来是要作用于父元素，但是表现的结果却是父元素具有了margin-top效果，下面就通过代码实例介绍一下如何解决此问题。代码实例如下: 蚂蚁部落#box{ width:200px; height:200px; background:red; overflow:hidden;}#main{ width:50px; height:50px; background:blue; margin-top:50px;} 上面代码实...
需求： 在前端页面布局中，经常会有因文字过多而影响页面排版。特别是在移动端页面中，因屏幕宽度不够段落文字如完全显示则会打乱布局。因此若段落文字能根据屏幕空余大小而显示就完美了，也就是若屏幕够大，段落文字就完全显示，若屏幕很小，则段落文字以省略号的形式部分显示。 解决办法： 在CSS3中有text-overflow属性，不熟悉的同学可以点此查询。用来实现单行文本的溢出显示省略号，单行文本的溢出显示省略号在现代浏...
先看html和效果图 body,p{ margin:0; } .header,.footer{ background:#000; height:60px; } /*兼容ie8 html,body{ height:100%; } */ .auto-height{ /*兼容ie8 min-height:100%; */ min-height:100vh; margin-top:-60px; margin-bottom:-60px; /*设置内边距方式一*/ box-sizing:border-box; padding-top:60px; padding-bottom:60px; } /*设置内边距方式...
在项目开发中经常会将比较大的js、图片、css等放到app中，而html放服务器，这样在使用时流量较少，加载也比都放服务器上快，其实方法也比较多，网上搜了很久都没结果。 一种是获取服务器返回的html内容后，直接处理返回的html，在引用js、图片的地方替换其资源为本地的“file:///android_asset/”资源，这种方式我没试。 另一种就是直接使用WebViewClient实现 1 webView.setWebViewClient(new WebViewClient(){ 2 ...
.brand{ width: 100%; overflow:hidden; margin: 40px auto;}.brand img{ /* max-width: 200px; */ width: 25%; height: 300px; float:left;} 回复讨论(解决方案) *{margin:0;padding:0;} 加这个试下 *{margin:0;padding:0;} 加这个试下 已经加了，这个应该是IE7对宽25%有误差的原因。 记得IE6用百分比宽度的话会有类似四舍五入的，IE7没遇到过。 .brand img...
先说一下canvas元素比较游泳的方法主要是canvas通过getContext()方法获取的上下文对象。 其次设置颜色方面，通常有四种方法：16进制颜色值、英语单词、rgb、rgba。主要注意的是后两者，rgb的三个参数是红绿蓝0-255的值，rgba在此基础上添加了第四个参数透明度，范围0-1。 1.画矩形 JavaScript已经是所有浏览器的默认脚本语言，因此 3.写字 textBaseline和textAlign特点可以查看其他...
请选择本页面文本看看:http://hovertree.com/h/bjaf/38hq6y9d.htm一般情况下在网页里的文本我们用鼠标选中的时候都是蓝色的，这个默认颜色也是可以更改的，本文我们学习如何使用CSS3实现改变默认文本选中的颜色。以我的系统举例（xp 默认主题），浏览器上页面文字选中后默认的背景色是一种蓝色， 不同浏览器的颜色有些许差异，但大致相同，文字颜色也近乎白色。一、关于浏览器文字选中颜色：在CSS3的爸爸 妈妈还没有相亲认识的时候...
写在前面 最近看到《图解CSS3》的布局部分，结合自己以前阅读过的一些布局方面的知识，这里进行一次基于CSS2、3的各种布局的方法总结。 常见的页面布局 在拿到设计稿时，作为一个前端人员，我们首先会做的应该是为设计图大致地划分区域，然后选择一种最合理的，结构清晰的布局。下面我先根据一些典型的网站案例列举一下几种常见的页面布局。 T型布局 这个是我们比较常见的布局，其页面的顶部一般放置横网站的标志或...
在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码： title p left right 在浏览器中查看效果如下： 在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如： ...
当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。1.分解你的样式对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样...
有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了，呵呵，其实和横排一样简单，下面介绍4种方法来实现CSS文字竖排。第一种方法：将需要竖排显示的字符放在span中，在CSS中设置span的display属性为block，不过不推荐使用这种方法，因为有些麻烦，代码如下：h1 span { display: block; } N E T T U T S第二种方法A：同样使用CSS，在需要竖向显示的地方，强...
我们在给用户显示文本内容的时候,往往需要避免文本内容超出容器宽度,防止换行溢出,小弟在网上找了下发现网上的实现仅仅只是实现了用 ...省略了的功能! 而并没有获取光标提示的功能,所有小弟就结合网上的代码改了个带省略号并且获取光标显示全部的功能,废话不多说先上效果图! 如果文本超出了指定宽度就会用...省略,并且当鼠标获取光标的时候会显示全部! 上代码 位 置:四川省绵阳市梓...
CSS存在Bug，但怎么能让我们记住这些Bug，以便在以后编写CSS代码的时候能很好的应对，这不，有心人就编写了这么一个CSS BUG顺口溜，还是挺不错的：一、IE边框若显若无，须注意，定是高度设置已忘记;二、浮动产生有缘故，若要父层包含住，紧跟浮动要清除，容器自然显其中;三、三像素文本慢移不必慌，高度设置帮你忙;四、兼容各个浏览须注意，默认设置行高可能是杀手;五、独立清除浮动须铭记，行高设无，高设零，设计效果兼浏览;六、...