div+css布局实例淘宝分析(一)
对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式
查找相关文章:div+css布局实例,css,div+css布局入门,div+css布局教程,div+css示例
对于刚入门学DIV,CSS布局的朋友来说,不知道从那里下手,我以为从分析优秀网站的源代码来学习div,css布局是一个不错的方法,这篇div+ css布局教程是我自己在边分析边学习中总结出来的,如果你要转载请注明出处,另外本人特别声明:本教程只是分析淘宝网站的HTML,CSS源代码,作为 一个教程的例子,达到学习DIV+CSS排版的效果,请勿模仿淘宝,或者仿照淘宝制作网站,谢谢,这是第一篇,淘宝顶部排版方式
我们看看原始图片
通过观察,我们把它分为如下图所示块
具体的HTML,DIV+CSS排版样式为
我们一行一行分析,
1.全部的代码均在一个DIV容器(我暂时这样称呼) Head里面,我们来看看Head的写法
&&& text-align:center;
为什么Head前面有一个&#&号呢?
而有的却是在前面加一个&．&比如 &．Head&,有时候写css的时候干脆什么也不加,比如 td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是 &div id=&Head&&&/div& 而有的是这样 &div class=&HackBox&&&/div&
从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是 CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如 td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号 &;&,
语法 text-align : left | right | center | justify
取值说明：
left& :? 默认值。左对齐
right& :? 右对齐
center& :? 居中对齐
justify& :? 两端对齐
#Head #HeadTop{
&&& position:relative;
&&& width:760px;
&&& margin:10px auto 10px;
&&& text-align:left;
} 为什么#HeadTop前面会有一个#Head?
我们发现#headTop是嵌套在#Head里面的,为了Head里面的设置在HeadTop里面同样生效,将HeadTop放在了Head后面
position : static | absolute | fixed | relative
static& :? 默认值。无特殊定位，对象遵循HTML定位规则
absolute& :? 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed& :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative& :对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置
width : auto | length
auto& :? 默认值。无特殊定位，根据HTML定位规则分配
length& :? 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的宽度。不可为负数。 可以用相对长度象素单位px或者绝对长度in等做单位(1in = 2.54cm = 25.4 mm = 72pt = 6pc)
margin:10px auto 10
检索或设置对象四边的外补丁
如果提供全部四个参数值，将按上－右－下－左(顺时针方向)的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
text-align:
我们看到Head里面已经有设置文字对齐是居中的了,而这里又定义文字居左,那么到底文字怎么对齐呢?如果有相冲突的定义,CSS将按最近的一个定义来执 行,这跟HTML中的是一样的,比如&font color=red&&font color=green&我到底是什么颜色?&/font&&/font&
#Head #Logo{
&&& width: 240px;
&&& height: 31px;
&&& float: left;
&&& margin-left: 2px;
width(宽度),height(高度)都不说了
float : none | left | right
none& :? 默认值。对象不飘浮
left& :? 文本流向对象的右边
right& :? 文本流向对象的左边
翻译为漂浮,left说明是从左开始排列
margin-left: 2 相当于 maign:0002px
这里Logo容器说明的是,从左开始排列,宽度为240px,高度为31px,左补丁(左边空余)2px宽
4.HeadNavBar左边导航条
#Head #HeadNavBar{
&&& float:right;
&&& clear:right;
&&& background: url(images/header_mm_bk.gif) left top no-repeat;
&&& width:510px;
clear:right;清除右浮动,说明右边不能再有容器 clear : none | left | right | both background: url(images/header_mm_bk.gif) left top no- (意思是背景图片左,上对齐,不重复) background : background-color || background-image || background-repeat || background-attachment || background-position background-color: 背景色 background-image:url(/images/space.gif);
当同时存在背景图片和背景色时背景色将被覆盖 background-repeat : repeat | no-repeat | repeat-x | repeat-y
取值： repeat& :? 默认值。背景图像在纵向和横向上平铺
no-repeat& :? 背景图像不平铺
repeat-x& :? 背景图像仅在横向上平铺
repeat-y& :? 背景图像仅在纵向上平铺 background-attachment : scroll | fixed
取值： scroll& :? 默认值。背景图像是随对象内容滚动
fixed& :? 背景图像固定
background-position : length || length
background-position : position || position
取值： length& :? 百分数 | 由浮点数字和单位标识符组成的长度值。&
position& :? top | center | bottom | left | center | right
整句的意思是宽度为510px象素的容器从右往左排列
5. #Head ul{ & & list-style-type: &&& margin:0; &&& padding:0; } list-style-type: list-style : list-style-image || list-style-position || list-style-type
list-style-image : url ( url );可以将列表样式改变为图片
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值：可以将列表改变为其他样式 disc& :? CSS1& 默认值。实心圆
circle& :? CSS1& 空心圆
square& :? CSS1& 实心方块
decimal& :? CSS1& 阿拉伯数字
lower-roman& :? CSS1& 小写罗马数字
upper-roman& :? CSS1& 大写罗马数字
lower-alpha& :? CSS1& 小写英文字母
upper-alpha& :? CSS1& 大写英文字母
none& :? CSS1& 不使用项目符号
6. #Head #HeadNavBar li{ &&& float: &&& height:31 &&& background: url(images/header_mm_sep.gif) left center no- &&& display: } display: 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行(显示在行内,超出的将不显示) display : block | none | inline | inline-block
7. #Head #HeadNavBar li.NoSep{ &&& background: &&& margin-left: 5 } 当列表区块内标志类为NoSep时,没有背景色&background: url(images/header_mm_sep.gif) left center no-&,并且左补丁为5px
8.#MyTaoBao { &&& padding-left: 14px! &&& margin-left: 9px! &&& margin-left: 4 &&& background:transparent url(images/header_mm_mytb_icon.gif) no- } padding:内补丁,用法参考margin, padding-left: 14是指左边空余14px的值,这空余是用来放置居左中的背景图片的 !important;提升指定样式规则的应用优先权。
9.设置列表内的链接样式 #Head #HeadNavBar li a{ &&& display: &&& padding: 0 6px 0 7 &&& float: &&& height:31 &&& line-height:31 &&& color: #0f3a66; &&& font-size: 13 } display: 以块状呈现 padding: 0 6px 0 7左右内补丁各为7px,6px color: #0f3a66;链接时文字颜色为#0f3a66; 链接的完整定义还可以包含背景颜色background,链接样式text-decoration(text-decoration : none[无装饰] || underline[下划线] || blink[文字闪烁] || overline[上划线] || line-through[贯穿线]) 链接的顺序应该是这样的(LVHA) a:link{background:#F0EBD6;padding:8width:240text-decoration:color:#000000;} a :visited{background:#FF3300;color:#00000} a :hover{background:#FFC080;color:#000000;} a :active{background:#CCCFFF;color:#000000;}
#Head #HeadNavBar li a:hover{ &&& color: #e60; }
10. #Head #HeadNavBar li#AdvanceBox { &&& background: &&& margin-left: 10 } 由于AdvanceBox是在块li里面,故顺序为#Head #HeadNavBar li#AdvanceBox,这句意思是无背景,左外补丁(左空余)为10
11.为#AdvanceBox内的其他表单元素定义 #Head #HeadNavBar li#AdvanceBox form { &&& margin:0; &&& padding:0; &&& margin-left:8 &&& margin-top:5 }
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBox { &&& display: &&& float: &&& width:112 &&& height:15px! &&& height /*ie55*/: 21 &&& padding:3px 2px 1px 2
&&& padding-right:0; &&& border: 1px solid #7ad2 &&& background:url(images/header_mm_srch_bk.png) no-
&&& color: #000; }
#Head #HeadNavBar li#AdvanceBox input.DC { &&& color: #90B1C5 ! }
#Head #HeadNavBar li#AdvanceBox .HeaderSearchBtn { &&& display: &&& float: &&& margin-left /*ie55*/: -3 }
#Head #HeadNavBar li#AdvanceBox li { &&& background: none! }
12.#QuickLinks #Head #QuickLinks{ &&& float: &&& width:750 &&& margin-top:6 &&& margin-right:6 } 右浮动,宽度为750px,上,右补丁各为6px
13.为#Head #QuickLinks定义列表li样式 #Head #QuickLinks li{ &&& float: &&& margin-left:10 &&& line-height:21 } line-height:21 行高21
14.定义#Head #QuickLinks li内链接样式,多个相同的定义时可以用&,&分割开,而且路径要写完整 #Head #QuickLinks li a:link, #Head #QuickLinks li a:visited { &&& font-style: &&& font-weight: &&& font-size: 12 &&& color:#04d; }
#Head #QuickLinks li a:hover, #Head #QuickLinks li a:active { &&& color:#e60; }
15. .HackBox{ && border-top:1px solid transparent ! && border-top:0; && clear: } 这里有两个重复定义的border-top(上边框,!important优先,边框为1px,透明 clear: 左右浮动均清除,类似换一行
淘宝头部导航已经基本分析完成,现在总结一下:
(1).容器div可以嵌套,比如 &div id=&Head&&&div id=&Logo&&&/div&&/div&,嵌套时容器的写法:需要在前面加上容器的命名,如 #Head #Logo,我们发现,Logo虽然在容器&HeadTop&里面却不用写成 #Head #HeadTop #Logo,因为HeadTop并没有对Logo限制
(2).独特的容器名字前面加符号 &#&,通用的前面加符号小句点&.&
(3).容器的基本参数包括 外补丁 margin,内补丁 padding,宽度 width,背景 background,浮动 float,清除 clear,这几个参见参数的用法要熟记
(4).需要换行显示时用 clear:
(5).可以单独为某个容器定义链接样式, 顺序为 LVHA(a:link,a:visited,a:hover,a:active),链接样式的几个参数背景(background),内补丁 (padding)宽度(width)描述(text-decoration)文字颜色(color)等,可以设置链接以块状方式显示
其他未总结之处,请多看源码.
转载请注明出处:
收藏div+css布局实例淘宝分析(一)
你可能对这些文章感兴趣
mendan | 发表于： 03:54:15
朋友，写的很不错哦 非常感谢你这么有耐心 这两天在学帝国的cms 没怎么看div 感觉有点罪恶感啊 呵呵 网上搜了一下 看到你的这篇感觉不错 你QQ多少啊 可以加我吗 我的是 最好注明一下哦.
80o08 | 发表于： 10:58:55
你讲的太棒了 幸苦幸苦我这个初学者很受益~~~~~~谢谢了
blueboyss | 发表于： 22:26:23
用了table几年了.突然要学div+css真是感觉麻烦
Alia | 发表于： 10:38:15
这个地方上下文有点矛盾：#Head{
text-align:}#Head #HeadTop{
text-align:}为什么#HeadTop前面会有一个#Head?我们发现#headTop是嵌套在#Head里面的,为了Head里面的设置在HeadTop里面同样生效。
will | 发表于： 12:22:52
it's great!thanks
到达 | 发表于： 17:02:01
非常的有用,多谢了!!!
lulu | 发表于： 09:11:47
非常有用，谢谢
psdshow | 发表于： 17:10:07
自己多用一下就知道啦
xiang | 发表于： 14:08:34
我什么也看不懂呀！！！怎么学啊
Estart | 发表于： 23:10:34
写的很详细，对于我这个菜鸟学习很有帮忙。
will | 发表于： 18:12:31
很受用 解释得很明白 谢谢！~
不忘国耻 警钟长鸣支持国货 强我中华全屏效果唯美小清新淘宝店招模板含淘宝导航条css代码
分享一份宽全屏效果的唯美小清新淘宝店招模板，淘宝装修模板非常简单，由页头背景图、950店招代码、淘宝导航条css代码构成。其中店招里面仅店铺名称可以编辑。这样方便新手朋友快速安装、编辑。
本淘宝全屏店招仅淘宝专业版旺铺可以使用哦。
（一）淘宝店招模板效果预览
（1）模板真实预览效果
（2）模板部分预览截图如下：
（二）模板素材
（1）淘宝店招代码（需设置店招高度120px）
style=&width:950 height:120 margin:
background:url(/imgextra/i2//T2NOCMXJVaXXXXXXXX-.gif)
no-font-weight: font-size:12&&
style=&color:#FE8181;font-family:微软雅黑,黑体;font-size:40font-weight:600;
text-align: display:
padding-top:25&&鱼摆摆免费模板&/div&
（2）淘宝导航条css代码
.skin-box-bd{
height:30 line-height:30 border:0;
background:font-family:微软雅黑;font-size:14font-weight:}
.skin-box-bd .all-cats
.link{-moz-border-bottom-colors:-moz-border-left-colors:-moz-border-right-colors:-moz-border-top-colors:background:url(/imgextra/i4//T2vXCZXPRXXXXXXXXX-.gif)
no- border:0;
color:#cursor:font-size:14height:30letter-spacing:1line-height:30width:110px}
.skin-box-bd
.all-cats:hover
.link{background:url(/imgextra/i4//T2vXCZXPRXXXXXXXXX-.gif)
no-repeat scroll 0
-30color:#font-size:14font-weight:letter-spacing:1px}
.skin-box-bd .all-cats .link .title{
margin-left:0;text-align:color: font-size:}
.skin-box-bd .all-cats .link .popup-icon{background:}
.skin-box-bd .all-cats:hover .link .popup-icon{background:}
.skin-box-bd .menu-list{ background: width:}
.skin-box-bd .menu-list .link{background: border:0;
color:#fe8b8b;cursor:font-size:14height:30letter-spacing:1line-height:30px}
.skin-box-bd
.menu-list .menu{ background: border:0;}
.skin-box-bd .menu-list .menu:hover
.link{background:color:#font-size:14letter-spacing:1px}
.skin-box-bd .menu-list .menu:hover .link .title{background:}
.skin-box-bd .menu-list .menu:hover .link{background:#fea7a7}
.popup-content{background:#fe9696;border:opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);}
.popup-content .cats-tree{margin:0}
.popup-content .cats-tree .fst-cat{border-bottom:0 solid
#fdd4d4;border-top:0 solid
#fdd4d4;font-size:14height:28line-height:28px}
.popup-content .cats-tree .fst-cat a,.skin-box-bd
a{color:#font-weight:normal}
.popup-content .cats-tree .fst-cat
a:hover{color:#font-weight:letter-spacing:1px}
.popup-content .cats-tree .fst-cat
.snd-pop-inner{background:#fe6d6d;border-top:0 solid
#fdd4d4;font-size:14height:padding:0}
.popup-content .cats-tree .fst-cat .snd-pop-inner
.snd-cat-hd{height:28px}
.popup-content .cats-tree .fst-cat .snd-pop-inner .snd-cat-hd
.snd-cat-icon{background:height:1margin:10px 0 0 5width:7px}
.popup-content .cats-tree .fst-cat .snd-pop-inner .snd-cat-hd:hover
.snd-cat-icon{background:height:1margin:10px 0 0 5width:7px}
.popup-content .cats-tree .cat-hd:hover,
.popup-content .cats-tree .cat-hd-hover,
.popup-content .menu-popup-cats .sub-cat:hover a,
.popup-content .menu-popup-cats .sub-cat-hover
a{background-color:#fd5555}
.popup-content .cats-tree .fst-cat .snd-pop-inner .snd-cat-hd
.snd-cat-name{height:28margin-left:10overflow:width:120px}
.popup-content .cats-tree .fst-cat .snd-pop-inner .snd-cat-hd:hover
.snd-cat-name,
.popup-content .cats-tree .cat-hd:hover .fst-cat-name,
.popup-content .cats-tree .has-children:hover
.fst-cat-name{color:#fcfe77}
.popup-content .cats-tree .fst-cat .snd-pop-inner .snd-cat-hd:hover,
.popup-content .cats-tree .cat-hd:hover,
.popup-content .cats-tree .has-children:hover,
.popup-content .menu-popup-cats .sub-cat-hover{background:#fd5555}
.popup-content .menu-popup-cats .sub-cat-hover a{color:#fcfe77}
.popup-content .cats-tree .fst-cat .has-children
.fst-cat-icon{background:height:7margin:10px 6px 0
10width:7px}
.popup-content .cats-tree .has-children:hover
.fst-cat-icon{background:}
.menu-list .link
.popup-icon{background:height:6margin-left:5margin-top:12width:10px}
.menu-list
.menu-hover .link .popup-icon{background-position:0 -7px}
.popup-content .cats-tree
.fst-cat-icon{background:height:7margin:10px 6px 0
10width:7px}
.popup-content .cats-tree .cat-hd-hover
.fst-cat-icon{background-position:0 0}
.menu-list .menu-selected{background:#fee6da}
.all-cats{ max-width: background:}
.all-cats .link{ padding:0 10}
.skin-box-bd .menu-list .menu .title{ color: font-size:
font-weight:}
.skin-box-bd .menu-list .menu-selected .link .title{ background:}
.popup-content .cats-tree .cat .cat-hd .fst-cat-icon{ top:}
.all-cats{width:}
.all-cats .link{width:}
.menu-list{ width:}
.all-cats .link .title{ margin:0 10}
（3）页头背景图：不平铺+居中对齐
（三）店招代码修改
（1）修改店铺名称
代码中，搜索并查找&免费模板&，替换为自己店铺的名称。
（四）淘宝全屏店招模板安装教程
详见：淘宝全屏店招模板安装教程&,记得设置店招高度120px。
（五）淘宝装修模板素材打包下载地址
全屏效果唯美小清新淘宝店招模板下载地址：.cn//.rar
------分隔线----------------------------淘宝导航CSS代码。想请大侠们。这个效果是怎么实现的。_百度知道
提问者采纳
。，不知道你说的是哪个》这里面包含很多效果
点击收藏哪里。首页旁边应该是“所有分类”。但是他把所有分类去掉了。换成点击收藏
能否给个店铺的名称，我去看看给链接会被百度屏蔽，你直接给我店铺名称就行了
没琏接呢。这张图是在百度图片找的。我去他店铺。已经换了。我把整张图片发上去给你看一下。
将这个“点击收藏”的和“所有分类”包含在一个div里面，然后整体margin-top：-XX 就能有这效果
提问者评价
其他类似问题
淘宝的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前位置： >
淘宝是个坑货，不能自己定义导航栏，系统提供的就那么几种样式，远远不能满足我们的需求。有多种多样的导航栏，但是那是淘宝的装修市场里的，少则5元一个月，多则90月一个月，这个，我们完全没有必要去买。我们可以自己装修。那就是使用我们的导航栏css代码。部分装修代码里有，我们会用这种css代码了，就有付费模板的效果了。
那么进入正题，淘宝导航栏CSS代码如何设置。
第一步：我是卖家左侧---店铺装修---进入装修后台----编辑导航条
第二步：显示设置----放入导航CSS代码---确定即可！
疑问解答：
导航CSS代码从哪里找到呢？
您购买的模板有些是带有CSS代码的噢，也可以自己设计导航CSS代码
其他区域能用CSS代码吗？
抱歉淘宝只对导航条开放了CSS代码使用权限，其他地方无法使用CSS代码
文章关键词：淘宝,导航,CSS,代码,如何,设置,淘宝,是个,坑货,不能
本文地址：/jiaocheng/703.html，转载请说明出处，谢谢！
大家都在学
这些是最新的