CSS教程首页_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
74页2下载券117页2下载券110页免费86页免费16页免费37页免费85页1下载券60页1下载券18页免费52页4下载券
喜欢此文档的还喜欢60页1下载券13页1下载券74页2下载券56页7下载券17页1下载券
CSS教程首页|C​S​S
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢黑色网页主板模块(简洁的个人网页相册)样式版 - 谷普下载 |
| 您所在的位置： >
> 黑色网页主板模块(简洁的个人网页相册)样式版黑色网页主板模块(简洁的个人网页相册)样式版黑色网页主板模块(简洁的个人网页相册)样式版介绍这是一款炫酷的HTML网页，用HTML5+CSS3制成，喜欢的朋友不能错过哦！素材相关HTML5已经逐渐开始流行，那么HTML5+CSS3做成的网页还是非常多棒的哟。本次小编带来的黑色网页模块，非常适合个人主页，鼠标滑动的个人相册是最大的亮点。此次素材附带了范例图片，可以随意使用。也附带了CSS文件样式表，大家可以钻研钻研，修改修改，一定能做出不同的效果来！　　谷普下载提供，版权归原作者所有。喜欢，请支持正版！标签：&&黑色网页主板模块(简洁的个人网页相册)样式版下载高速多线下载下载地址列表获取更多下载不能下载？内容有错？&&+&&+&
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
分类选择您可能在找这些赶快加入吧
收藏，668 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，这个模块实现的分类列表是菜单列表式的，我想实现在K2模块下，实现博客式分类列表布局，但是不知道该怎么修改mod_k2_tools模块，求高手指教！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
模块的目录下，都会有tmpl目录，里面放的全部是模板，你要修改列表布局，就需要修改模板。这个前提是你需要有HTML PHP的知识。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不应该用mod_k2_tools模块吧？而且mod_k2_tools模块并不非常适合定制
你是要实现分类目录模式还是其他效果？
同步到新浪微博
不要错过该问题的后续解决方案
如果你没找到答案，记得登录关注哦，大家会尽全力帮你解决的 ^___^
最专业的开发者社区
最前沿的技术问答，最纯粹的技术切磋。让你不知不觉中开拓眼界，提高技能，认识更多朋友。
分享到微博？
删除理由：
删除理由：
忽略理由：
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
内容质量差，或不适合在本网站出现
其他原因（请补充说明）
补充说明：
举报理由：
带有人身攻击、辱骂、仇恨等违反条款的内容
与已有问题重复
内容质量差，或不适合在本网站出现
答非所问，不符合答题要求
其他原因（请补充说明）
补充说明：整理的CSS兼容解决方法
对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了 一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明.
1.div的垂直居中问题
vertical-align: 将行距增加到和整个DIV一样高 line-height:200 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display: 例如：
&#div id=”imfloat”&
相应的css为
#IamFloat{
3.浮动ie产生的双倍距离
#box{ float: width:100 margin:0 0 0 100
//这种情况之下IE会产生200px的距离display: //使浮动忽略} 这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box{ display: //可以为内嵌元素模拟为块元素 display: //实现同一行排列的效果 diplay:
4 IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两
个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。 比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{ width: 80 height: 35}html&body #box{
width: height: min-width: 80 min-height:
5.页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个&div& 放到 &body&
标签下，然后为div指定一个类,
然后CSS这样设计：
#container{ min-width: 600
width:expression_r(document.body.clientWidth & 600?
"600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
6.DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{ float: width:800}
#left{ float: width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3 //这句是关键}
&div id="box"&
id="left"&&/div&
id="right"&&/div&
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
8.float的div闭合;清除浮动;自适应高度;
① 例如：&#div id=”floatA”
&&#div id=”floatB”
&&#div id=” NOTfloatC”
&这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left 这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签 闭合。在 &#div class=”floatB”&
&#div class=”NOTfloatC”&之间加上
class=”clear”&这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:}
②作为外部 wrapper 的
div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow: 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义：
.colwrapper{ overflow: zoom:1; margin:5}
③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:
&div id=”page”&
id=”left”&&/div&
id=”center”&&/div&
id=”right”&&/div&
&/div& 比 如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决
&div id=”page”&
&div id=”bg”
style=”float:width:100%”&
id=”left”&&/div&
id=”center”&&/div&
id=”right”&&/div&
&/div& 再嵌入一个float left而宽度是100%的DIV解决之
④万能float 闭合(非常重要!) 关
于clear float 的原理可参见 [How To Clear Floats Without Structural
Markup],将以下
代码加入Global CSS 中,给需要闭合的div加上
class="clearfix" 即可,屡试不爽.
.clearfix:after { content:"."; display: height:0; clear:
visibility: }
.clearfix { display:inline- }
.clearfix {display:}
或者这样设置：.hackbox{ display: //将对象作为块元素级的表格显示}
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。例：
#box {background-color：# }
#box p {margin-top: 20margin-bottom: 20 text-align:
&div id="box"&
&p&p对象中的内容&/p&
解决方法：在P对象上下各加2个空的div对象CSS代码：.1{height:0overflow:}或者为DIV加上border属性。
12 .IE6下为什么图片下有空隙产生
解 决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom
都可以解决.
13.如何对齐文本与文本输入框
加上 vertical-align:
&style type="text/css"&
vertical-align:
14.web标准中定义id与class有什么区别吗
一.web标准中是不容许重复ID的,比如div id="aa" 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题
ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.
15. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
&style type="text/css"&
white-space:
text-overflow:
-o-text-overflow:
16.为什么web标准中IE无法设置滚动条颜色了
解决办法是将body换成html
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&meta http-equiv="Content-Type" c
&style type="text/css"&
scrollbar-face-color：#f6f6f6;
scrollbar-highlight-color：#
scrollbar-shadow-color：#
scrollbar-3dlight-color：#
scrollbar-arrow-color：#000;
scrollbar-track-color：#
scrollbar-darkshadow-color：#
17.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:overflow:hidden | zoom:0.08 | line-height:1px
18.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明
&param name="wmode" value="transparent"
19.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二
type="text/css"&
margin:-100px 0 0 -100
height:200
页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:register状态:status按钮:btn
合作伙伴:partner版权:copyRight
1.CSSID的命名
外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示)容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的current
2.样式文件命名
主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css
主题:themes.css
4，对于有float的，在最后一定要消除float效果当然，如果你只为兼容IE6，大可以不必消除
5，减少嵌套，看到很多新手在最开始写的时候往往会有大量的嵌套（表格布局的后遗症吧…）
6，先布大块，在布小块
7，不要有过多的页面注释，我曾经修改的一个页面
完全变形，找了半天也没发现是什么问题，偶尔中删除了其中一条注释，居然好了，这个不清楚是什么原因，希望有高人指点一下。
8，在没有特殊要求的情况下不要设置高度
其实学习CSS+DIV很简单的，只要搞清楚其中的几个属性就可以完成布局。
一，搞清float样式
Div标签的默认宽度为百分之百，也就是说当两个div并列的时候产生的效果是第二个div会在第一个的下一行，但是布局的时候一定会有一行两列的情形出现，这个时候我们就要引入float
style=”float:left”&&/div&
style=”float:left”&&/div&
style=”clear:both”&&/div&(再次啰嗦，一定要记得清除浮动)这个就是最简单的一行两列
二，一定要搞清楚padding,border,margin的含义
比如有两幅表好的画画到边框的举例为padding边框为border两幅画之间的距离为margin其中padding算入宽高之内，颜色为background的颜色边框算入宽高之外border:1px solid #000(1像素黑色实线)
Margin没有颜色属性（另外说下，在有float属性的时候在IE6会造成margin双倍的问题，这个时候只要加入display:inline即可解决）
三，关于相对定位，绝对定位和空间定位
绝对定位：position:
有如下两种情况
1，没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点
2，有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1)，父级没 position
属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、
Right、Bottom、Left 属性决定
(2)，父级有 position
属性，父级的“坐标原始点”为原始点相对定位：position:参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，并且会在父块以外占据相同的大小，所以不推荐使用。空间定位：z-index：数值当两个板块之间用绝对定位产生上下的时候，可以用z-index来决定哪个板块再上，数值大的位于数值小的上方。做一个简单的阴影效果：
style="width:900font-size:20font-family:'黑体';position:
background-colorCC0000; color00CC00;padding:10 height:200
font-weight:bold"&
&div style="position:left:5top:5
z-index:150"&阴影效果&/div&
style="position:left:7top:7color666666;z-index:50"&阴影效果&/div&
*注意一点，当设置left属性的时候不要设置right，同样，设置top之后不要设置bottom
完全理解以上三点之后，就可以进行自己的CSS+DIV制作最后说一些关于IE6,IE7和FF的兼容问题以及一些小技巧
1，hack方法
FF,IE7可以识别!important
IE6，IE7识别*
#hack{width:500*width:400px!_width:300px}宽度在FF下为500，IE7下400，IE6下300就我个人来说，padding值对于FF和IE系列的解析并不相同（个人感觉），为了达到完全一直而使用hack，一般情况下不需要使用这种方法
2，当有float属性时，margin在IE6下双倍，可加入display:inline来解决
3，想要有最小高度并根据内容自伸缩可以用以下方法设置min-height:500px!_height:500px，FF和IE7会以min-height值为最小高度并按内容伸缩，height对于IE6为最小高度并按内容伸缩
4，对于FF想要板块根据页面居中需在父块设置margin:0 auto
5，div标签没有垂直居中的概念，所以当只有一行文字的时候，想要垂直居中只需将line-height设置与height相同即可
6，W3C标准写法：
（1）所有卷标元素名称都使用小写错误 &HTML&
&BODY&正确 &html&
（2）所有没有成对的空标签必须以 /&结尾错误：&br&
&hr&正确：&br /& &hr
（3）不允许使用target="_blank"在HTML4.01可以使用target="_blank",但XHTML1.0是不被允许的,你可以改写为 target="new"
（4）特殊字符以符号表示比如空格使用
(5) 正确使用CSS样式表错误
&style&正确
type="text/css"&
(6) 同一个id选择器不可重复使用
(7) 绝对不可省略双引号或单引号
再说几点注意事项
1，用DW创建新的页面的时候，会出现一堆英文，如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
xmlns="http://www.w3.org/1999/xhtml"&此段不可删除，为W3C标准！（记得最开始老师教的时候我问过是什么意思，他老人家告诉我是广告，囧…）
2，各个标签对之间都有默认的margin等值，所以最开始要设置为0
div,p,span,form,ul,ol,li,input {margin:0;padding:0;border:0;
已投稿到：}