CSS设计
关注
分享
扫一扫
文章平均质量分 83
Serein
淡定...
展开
-
根据不同浏览器选择不同css
如何根据浏览器选择不同css？比如我有3个CSS文件，如果客户端是IE6，则使用CSS1，如果客户端是IE7或者IE8,则用CSS2，如果客户端是FIREFOX，则使用CSS3。从网上找了下，有如下说法 根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 if (window.navigator.userAgent.indexOf("MSIE")>=转载 2012-04-15 15:56:17 · 2178 阅读 · 1 评论 -
不同浏览器CSS解析小结
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;转载 2012-04-15 15:54:49 · 837 阅读 · 0 评论 -
导航--标签宽度可变的圆角水平导航
这是一个标签宽度可变的圆角水平导航，参考前面的基于圆角图片的水平标签导航（点击查看），进行一些改变，使得导航中的列表项可以根据它们所包含文本的长度来调整大小。具体的CSS设置和实现细节在代码中有详细的注释，其中需要使用到的4个标签圆角图片如下：原创 2011-07-30 11:26:09 · 667 阅读 · 0 评论 -
导航--一个基本无图片水平导航
将之前的垂直导航改成水平的导航（点击链接查看），HTML部分的代码不变，只是对样式表单作了些改变。一、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/原创 2011-07-29 19:12:47 · 955 阅读 · 0 评论 -
导航--一个基本的垂直导航
一个基本的垂直导航，从中学习开发导航系统所需的基本标记——为排序列表标志ul、li。其中还涉及了如何调试消除IE显示列表项的空白问题。详细说明见代码注释。废话不多说，直接上代码：1、HTML代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1原创 2011-07-29 09:24:46 · 2072 阅读 · 0 评论 -
导航--水平圆角图片标签导航
在前面提到的基本的水平导航（点击查看）的基础上，要求每个菜单项顶角是圆角。通过CSS样式设置难以实现，所以我们借助圆角的图片来实现这个效果。我们注意到菜单项有三种不同的颜色，按照常理应该需要三个不同的标签图片来创建菜单。但是如果把标签作为独立的图片，当页面最初加载到用户端浏览器时原创 2011-07-29 20:43:54 · 1251 阅读 · 0 评论 -
导航--CSS控制矩阵导航图片平移实现的导航
这次的导航，使用导航矩阵技术来解决图片替换与多个状态所提出的挑战。导航矩阵使用一个单个图图片和一组样式组合，把一个未排序列表转换为一个图片替换的菜单。这项技术通过“背景—位置”属性把这个图片在各个列表项周围移动，确保将表示该列表项及其状态的那部分图片显示出来。在导航中使用单个原创 2011-07-31 15:21:51 · 1245 阅读 · 0 评论 -
基于CSS进行设置实现的一个首页
通过实现设计模型中的页面，来深入学习CSS的背景知识以及定位。设计模型图如下所示：设计要求：设计是流式的(fluid)或易于变化的，也就是说它的高度和宽度应该能够子的哦哦那个适应用户的浏览器，同时保持所需的比例。具体要求如下：1）位于左侧的每个图片必须固定在原有的位置；2）树和L原创 2011-07-28 14:18:19 · 1143 阅读 · 0 评论 -
用CSS设置的4种样式的图片说明文本之02
浮在图片的半透明说明文本之一1、效果图2、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">原创 2011-07-16 11:16:02 · 886 阅读 · 0 评论 -
用CSS设置的4种样式的图片说明文本之04
偏移的说明文本1、效果图2、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">原创 2011-07-16 11:23:02 · 810 阅读 · 1 评论 -
用CSS设置的4种样式的图片说明文本之01
常规的方式，说明文本在图片正下方CSS代码说明之一种字体大小的设置方式：em原创 2011-07-16 11:15:46 · 687 阅读 · 0 评论 -
用CSS设置的4种样式的图片说明文本之03
浮在图片的半透明说明文本之二1、效果图2、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">原创 2011-07-16 11:19:08 · 660 阅读 · 0 评论 -
CSS控制图片大小的方法
网页制作技巧实例解决：用CSS控制图片自适应大小 图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？可以通过按比例缩小或者放大到某尺寸（自己指定），来保持图片不变形走样的完全显示。解决方案： 一、 对于标准浏览器（如Firefox），或者最新都IE7浏览器，直接使用max-原创 2012-04-20 09:49:31 · 6128 阅读 · 3 评论