在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。 不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多): 加入 table 标签 设置 display;inline 方法 设置 position:relative 和 left:50%; 第一种方法: 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包...
今天在写网页时发现居中是个让人头痛的事,所以我通过网上和自己的用法来总结我目前所知的解决居中问题的办法: 1.text-align: center 需要在父元素上设定,只能是文字或行内元素而且不能是浮动元素 .div1{ text-align: center; } text-alignf 2.margin:0 auto 需要在子元素上设定,只能是块级元素而且不能是浮动元素 .div2 div{ margin: 0 au...
目录 [1]contenteditable [2]execCommand() 段落格式 文本格式 编辑 图片 [3]富文本编辑器 前面的话 HTML5新增contenteditable全局属性,通过此属性与document.execCommand()方法来制作富文本编辑器 contenteditable属性 作用:指定是否可以在浏览器里编辑内容 值:true/false 注意:设置document.designMode =on时,页面的任意位置都可以编辑;使用cont...
我一直喜欢灰度图像因为我认为他们看起来更有艺术感。很多图片编辑如Photoshop很容易把你的彩色图像变成灰度。甚至有选择调整颜色深度和色调。不幸的是,这样的效果想做在网络上并不容易,因为浏览器有差异。 1、CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器...
今天看到了这样一道题 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 自己感觉有好几种方法,再此总结下: 一、使用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就可以了。譬如: ...