文章分类 -  Div+Css

上一页 1 2 3 4 5
Css 兼容
[Test]1 浏览器兼容性测试工具Spoon Browser Sandbox
摘要：A、浏览器兼容性和测试工具对于Web前端开发工程师来说，要确保代码在各个主流浏览器的各个版本中都能正常工作事件很费时的事情，因为现在有太多浏览器了，主流就有IE、Chrome、FireFox、Safari、Opera，不入流的就更多了，而这些主流的浏览器又有很多版本，以IE为例就有IE 6、IE8、... 阅读全文
posted @ 2014-08-21 11:11 stma 阅读(7810) 评论(0) 推荐(0)
自动换行 word-break:break-all和word-wrap:break-word
摘要：本人亲测，IE8都支持以下两个属性，chrome也支持。word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如... 阅读全文
posted @ 2014-06-08 08:47 stma 阅读(127) 评论(0) 推荐(0)
webstorm安装时遇到The JVM could not be started的解决方法
摘要：error:THE jvm could not be started.The maximum heap size (-Xmx) might be too large or an antivirus or firewall tool could block the execution.参考了国内外的一些网站 终于找到解决方法了.修改安装目录下的文件..\WebStorm 5.0\bin\WebStorm.exe.vmoptions //用记事本打开，会看到如下的信息：-Xms128m-Xmx516m-XX:MaxPermSize=250m-XX:ReservedCodeCacheSize=64m 阅读全文
posted @ 2014-04-01 10:33 stma 阅读(539) 评论(0) 推荐(0)
DIV重叠 CSS让DIV层叠 两个DIV或多个DIV顺序重叠加
摘要：position是这样用的。4、实例说明：我们使用position实现绝对定位，对父级设置position:relative属性，对其子级设置position:absolute加上left或right和top或bottom实现子级在父级内任意定位。在原始情况下重叠是按DIV代码本身顺序排列，越后输入的DIV盒子其越靠前（浮在上面）。除了改变源代码本身div代码在html顺序，我们还可以使用css z-index实现DIV层排列顺序。全文：http://www.divcss5.com/shili/s587.shtml图文并茂 阅读全文
posted @ 2014-03-25 09:19 stma 阅读(289) 评论(0) 推荐(0)
middle属性不居中问题
摘要：---恢复内容开始---http://wenku.baidu.com/link?url=Dp-hSxeVKECC3bASVL6voy8mnyct2OdVTsJCmgY6ZQDwixobVcCSkJU4btkUEl9qzUzJTphhZmS8YuGCIoTHZV2re4fGfT94ldzSon7QCqq学习的最好方法就是“抄”！关键的地方就在span { vertical-align:middle; display:inline-block; height:100%; }看到加粗的字体吗？ span 标签本身就是内联元素，所谓内联元素就是前后不换行，与块级元素不同。而这里还要把内联元设置为 内联 阅读全文
posted @ 2014-03-11 14:41 stma 阅读(113) 评论(0) 推荐(0)
用inline-block做產品展示頁並且擁有RWD效果
摘要：相信大家對於這樣的排版並不陌生，這是一個產品的展示頁，文章參考Randy Hoyt教你如何用inline-block來做設計排版，內容簡單易懂首先先來認識一下「inline」、「block」、「inline-block」display : inline像、、預設的display屬性是inline，在網頁上呈現時並不會換行，且不能設定「width」、 「height」 、 「background-image」display : block像、、預設的display屬性是block，只要碰到這類元素不管前後都會換行，且預設寬度為最大，但可以設定「width」、 「height」 、 「backgr 阅读全文
posted @ 2014-03-02 16:14 stma 阅读(183) 评论(0) 推荐(0)
div+css浏览器兼容性的调试工具及几种常见css hack
摘要：div+css浏览器兼容性的调试工具及几种常见css hackhttp://wenku.baidu.com/link?url=SYI5SpFo7yr3GwN7XmUq8Fqq8_LcwHJ4DLEB51dE1YoTmcglzW5FdNPRw2JczFWmjmkV5dICfGRN0NU0PxE_sXlnk7mzZtreQARFKlggFVS 阅读全文
posted @ 2013-11-20 20:00 stma 阅读(118) 评论(0) 推荐(0)
Div CSS布局关于分辨率与100%自适应问题的探讨！
摘要：本人最近在学CSS，但是有蛮多疑问。我现在在这里列出来。 1.请问如何设定在不对的客户端都能正常的浏览（不变型）网页。你用CSS定位，你要怎么设定最外面的层宽？假如设定为。宽800 那这有一矛盾，你知道客户是用什么？他如果用PDA上网他的浏览器，怎么去适应？如果对方的分辩率是用1024宽？或是用1280。再是用现在的1440这种的。我们自己设定个固定宽，不怕造成，对方的设备，不好正常显示器吗？ 2.假如用百分比定位。OK，应该可以解决适应问题，但又有一疑问出来，你用的是自适应，请问，那你内部的区域块的宽高，你要怎么设？因为你不知道你最大值不能超过多少。（不过CSS可以设定自动加长加宽区... 阅读全文
posted @ 2013-11-20 19:38 stma 阅读(723) 评论(0) 推荐(0)
深入浅出理解绝对定位和相对定位
摘要：概要： 本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系。以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。说明： 占位空间：元素在文档流中所占据的空间。 物理空间：元素本身所占据的空间。下面分3种情况分别对相对定位和绝对定位进行讨论： 1. 只使用css第一组属性布局定位元素的情况 2. 只使用css第二组属性布局定位元素的情况 3. 混合使用第一组和第二组属性的情况 图1为未定位时的初始效果，层级关系为：<div<div box1<div box2<di 阅读全文
posted @ 2013-11-20 18:19 stma 阅读(189) 评论(0) 推荐(0)
CSS绝对定位在宽屏分辨率下错位
摘要：网页兼容测试，除了做不同浏览器的兼容测试，还要观察网页在不同分辨率下的表现情况。在页面中使用了CSS绝对定位，发现在宽屏下错位。随后测试非1024*768分辨率，都有很严重的错位情况。最后找出了原因，CSS绝对定位是相对于紧邻最近的上级元素的位置，一开始我理解为浏览器左上角，这样在不同分辨率下就会出问题，用position:relative;声明一下参考的固定位置就OK了。如下面这段其中Top，Left都是指相对div.contentArea的位置。页面Html代码略..... 查看：http://www.zfnn.com/post/553.html说一下，分辨率兼容测试方法，由于我现在用的是 阅读全文
posted @ 2013-10-02 08:09 stma 阅读(603) 评论(0) 推荐(0)
2010全面兼容IE6/IE7/IE8/FF的CSS HACK写法
摘要：浏览器市场的混乱，给设计师造成很大的麻烦，设计的页面兼容完这个浏览器还得兼容那个浏览器，本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点，ie8的出现就更头疼了，原来hack ie7的方法又不能用了，怎么办呢？第一种方法：还好，微软提供了这样一个代码：把这段代码放到里面，在ie8里面的页面解析起来就跟ie7一模一样的了，所以，基本上可以无视ie8，剩下的代码只需要这样写就可以了background:#ffc; /* 对firefox有效*/*background:#ccc; /* 对ie7有效 */_background:#000; /* 只对ie6有效 */解释一下吧：fire 阅读全文
posted @ 2013-06-26 10:37 stma 阅读(128) 评论(0) 推荐(0)
14、【视频】相对定位和绝对定位
摘要：出处：http://www.aa25.cn/div_css/899.shtml终上所述，相对定位是在自身位置移动，并且占据空间。而绝对定位是相对于父容器左上角移动，并且不占据空间。 阅读全文
posted @ 2013-06-25 11:29 stma 阅读(100) 评论(0) 推荐(0)
前端开发技巧分享：如何将你的浏览器窗口设定到指定分辨率
摘要：在前端开发的时候测试自己的页面在各种分辨率下显示的情况估计是家常便饭了，而在高分屏下面测试低分辨率屏幕的显示效果估计是很多开发者头疼的事情，下面我就分享一些解决这个问题的工具和小技巧。Firefox浏览器推荐插件：Firesizer介绍/安装地址：https://addons.mozilla.org/en-US/firefox/addon/firesizer/这个小工具会在Firefox附加组件栏上面显示firefox当前窗口的大小，点击后会出现分辨率菜单可以轻松的窗口大小到你想要的分辨率。当然，你也可以自己添加更多你想测试的分辨率。Chrome浏览器推荐插件：Window Resizer介绍 阅读全文
posted @ 2013-06-19 19:31 stma 阅读(3659) 评论(0) 推荐(0)
CSS兼容IE6,IE7和FF的总结
摘要：以下是我个人阅览网上一些资料总结出来的，可以还有些漏洞。ie6 * _ie7 * + !importantie8 \0ie9 \9\0ff !important前面是浏览器，后是是对面的Css Hack 标签。还可以阅读：http://www.cnblogs.com/sylfjjp/archive/2010/04/16/1713348.html 阅读全文
posted @ 2013-06-19 18:21 stma 阅读(73) 评论(0) 推荐(0)
网页分辨率怎么调？
摘要：网页布局离不开对分辨率的设置，网页分辨率应该设多少才是合理的？本文就来为大家详细讲解一下。 网页分辨率的设置通常与屏幕分辨率密不可分，在15存大脑袋的CRT显示器时代，最常用的屏幕分辨率为 800×600，后来发展到17寸方屏液晶显示器，较为常用的屏幕分辨率为 1024 × 768，科技发展到今天，屏幕的种类已越来越多且以宽屏为主，可用分辨率有 1280 × 720 、1440 × 900（19寸宽屏主流）、1920 × 1080 等多种。 一般在网页制作时，网页分辨率的宽度不能超过屏幕分辨率，但对高度没有限制，以 1024 × 76 阅读全文
posted @ 2013-06-18 11:56 stma 阅读(2649) 评论(0) 推荐(0)
关于CSS定义右下角对其的方式
摘要：问：<style>li {float:right;list-style-type:none;}div {width:200px;height:200px;background:#999;}</style><div> <ul> <li>神马</li> <li>都是</li> <li>浮云</li> </ul></div>有劳看一下这串儿代码。。定义右对齐倒是简单。。右下角对其呢？答：div{ position:ralatve;}div ul{ posit 阅读全文
posted @ 2012-12-22 19:13 stma 阅读(1767) 评论(0) 推荐(0)
DIV+CSS body页面居中代码
摘要：最简单的方法就是 把你的body这样设置：<body style="text-align:center;"><div style="margin:0px auto"></div></body>注意：中间的那个div就是要居中的内容，这种房价浏览器都兼容。//text-align:center; 这个样式是内容居中；//margin:0px auto;这个样式是HTML元素居中；转自：http://zhidao.baidu.com/question/259201372.html&__bd_tkn__= 阅读全文
posted @ 2012-11-01 16:36 stma 阅读(468) 评论(0) 推荐(0)
CSS+DIV的问题，body居中不了，不知道出什么问题。
摘要：你body剧中了才怪呢，margin的属性写颠倒了，应该是body{ margin:0 auto;}这个属性是控制页面居中的而且在还要有完整的标签<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"></html>如果没有这段代码 阅读全文
posted @ 2012-11-01 16:33 stma 阅读(186) 评论(0) 推荐(0)
CSS网站如何兼容IE7/IE8
摘要：问：以前是在IE6下做的,现在发现很多都乱套了,怎么解决这个兼容性问题答：写三句代码来控制一个属性，区别Firefox，IE7，IE6： background:orange;*background:green !important;*background:blue; 复制代码说明：这段代码会使在Firefox中，背景呈橙色；IE7中为绿色；IE6中为蓝色。道理如下，Firefox不能识别*，所以后面两句都不执行，直接执行第一句；IE7三个都能识别，但是由于有第二句important的作用，所以就执行了第二句代码；IE6不能识别!imprtant，按照最新原则，那就理所当然的执行了最后一句。注： 阅读全文
posted @ 2012-11-01 16:28 stma 阅读(191) 评论(0) 推荐(0)

上一页 1 2 3 4 5