在好例子网,分享、交流、成长!
您当前所在位置:首页CSS 开发实例网页布局 → 淘宝页面,素材+实例

淘宝页面,素材+实例

网页布局

下载此实例
  • 开发语言:CSS
  • 实例大小:1.39M
  • 下载次数:52
  • 浏览次数:742
  • 发布时间:2016-04-19
  • 实例类别:网页布局
  • 发 布 人:1258620225
  • 文件格式:.zip
  • 所需积分:5
 相关标签: html/css 页面布局 素材+实例

实例介绍

【实例简介】飘城杂货店实例

【实例截图】

【核心代码】

* {
padding:0;
margin:0;
}
body {
font-size:12px;
background:#0074E8 url(../images/bg.png) repeat-x 0 -67px;
width:900px;
margin:0 auto;
font-size:12px;
}
ul {
list-style-type:none;
}
a {
color:#333;
text-decoration:none;
}
a:hover {
color:#f60;
text-decoration:underline;
}
img {
border:none;
}
#header {
background:#fff url(../images/global.png) no-repeat 0 0;
width:900px;
height:96px;
border-top:5px solid #eee;
}
#header embed {
width:238px;
height:96px;
display:block;
float:left;
}
#header dl {
margin-top:6px;
height:22px;
width:396px;
float:right;
}
#header dl dd a {
display:block;
height:22px;
text-indent:-9999px;
}
#header dl dd {
height:22px;
float:left;
padding-right:4px;
}
#header dl dd.nav1 {
width:95px;
background:url(../images/global.png) no-repeat -699px -6px;
}
#header dl dd.nav2 {
width:79px;
background:url(../images/global.png) no-repeat -715px -61px;
}
#header dl dd.nav3 {
width:59px;
background:url(../images/global.png) no-repeat -735px -117px;
}
#header dl dd.nav4 {
width:59px;
background:url(../images/global.png) no-repeat -735px -89px;
}
#header dl dd.nav5 {
width:84px;
background:url(../images/global.png) no-repeat -710px -33px;
}
#header p {
height:42px;
line-height:42px;
width:398px;
float:right;
background:#fff;
text-indent:12px;
color:#06f;
}
#header p strong {
font-weight:normal;
color:#f00;
}
#header p a {
color:#06f;
text-decoration:none;
}
#header p a:hover {
color:#f60;
text-decoration:underline;
}
#header ul {
height:26px;
width:630px;
background:#fff;
float:right;
position:relative;
left:-65px;
}
#header ul li {
width:77px;
height:26px;
float:left;
}
#header ul li a {
display:block;
width:75px;
height:19px;
padding-top:7px;
text-align:center;
text-decoration:none;
color:#333;
background:url(../images/global.png) no-repeat -516px -8px;
}
#header ul li a:hover {
font-size:14px;
color:#f00;
font-weight:bold;
background-position:-591px -8px;
}
#strip {
width:900px;
height:67px;
background:url(../images/bg.png) repeat-x 0 0;
z-index:9999;
margin:0 auto;
position:relative;
}
#strip #underway {
width:207px;
height:67px;
line-height:67px;
text-align:center;
font-size:14px;
color:#fff;
font-weight:bold;
float:left;
}
#strip #search {
width:693px;
height:29px;
float:right;
margin-top:9px;
}
#strip #search select {
font-size:12px;
color:#333;
margin-left:2px;
width:111px;
display:block;
float:left;
}
#strip #search input.text {
border:solid 1px #fff;
width:410px;
height:18px;
background:#fff url(../images/global.png) no-repeat -774px -148px;
margin-left:4px;
padding:0 0 0 20px;
color:#999;
display:block;
float:left;
}
#strip #search input.submit {
margin-left:4px;
width:47px;
height:22px;
background:url(../images/global.png) no-repeat -568px -62px;
display:block;
float:left;
position:relative;
top:-1px;
cursor:pointer;
border:none;
}
#strip #search a {
height:22px;
line-height:20px;
padding-left:4px;
text-decoration:none;
color:#fff;
}
#strip #hot {
width:693px;
height:29px;
float:right;
background:url(../images/searchline.jpg) repeat-x;
}
#strip #hot ul {
height:29px;
line-height:29px;
}
#strip #hot ul li {
display:inline;
}
#strip #hot ul li strong {
color:#fff;
}
#strip #hot ul li a {
color:#fff;
text-decoration:none;
}
#strip #hot ul li a:hover {
text-decoration:underline;
}
#strip1 {
width:100%;
height:67px;
background:url(../images/bg.png) repeat-x 0 0;
position:absolute;
right:0;
top:101px;
text-indent:-9999px;
}
#strip2 {
width:100%;
height:67px;
background:url(../images/bg.png) repeat-x 0 0;
position:absolute;
top:101px;
left:0;
text-indent:-9999px;
}
#adver {
width:900px;
height:50px;
background:#fff;
}
#adver img {
display:block;
width:892px;
height:45px;
margin:0 auto;
padding-top:3px
}
#footer {
clear:both;
background:#fff;
width:890px;
height:164px;
padding:6px 5px;
}
#footer #footer1 {
background:#f2f2f2;
width:445px;
height:84px;
float:left;
padding:10px 0 0 0;
margin:0 0 8px 0;
}
#footer #footer1 dl {
height:25px;
line-height:25px;
padding:0 0 0 12px;
}
#footer #footer1 dl dt {
display:inline;
color:#666;
}
#footer #footer1 dl dd {
display:inline;
color:#666;
}
#footer #footer1 dl dd a {
color:#06f;
text-decoration:none;
}
#footer #footer1 dl dd a:hover {
text-decoration:underline;
}
#footer #footer2 {
background:#f2f2f2;
width:445px;
height:84px;
float:right;
padding:10px 0 0 0;
margin:0 0 8px 0;
}
#footer #footer2 p {
height:25px;
line-height:25px;
padding:0 0 0 12px;
}
#footer #footer2 select {
font-size:12px;
width:90px;
margin:0 2px 0 0;
}
#footer #footer2 .text {
width:250px;
margin:0 2px 0 0;
}
#footer #footer2 .tel {
background:url(../images/global.png) no-repeat -770px -249px;
text-indent:24px;
}
#footer #footer2 .kkk {
background:url(../images/global.png) no-repeat -771px -282px;
text-indent:24px;
}
#footer #footer2 p a {
color:#06f;
text-decoration:none;
}
#footer #footer2 p a:hover {
text-decoration:underline;
}
#footer ul {
width:356px;
height:18px;
line-height:18px;
margin:0 auto;
clear:both;
}
#footer ul li {
display:inline;
padding:5px 0 0 0;
}
#footer ul li a {
color:#f60;
text-decoration:none;
}
#footer ul li a:hover {
text-decoration:underline;
}
#footer p.copy,#footer p.qq {
text-align:center;
height:18px;
line-height:18px;
color:#666;
}
………………

………………


实例下载地址

淘宝页面,素材+实例

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警