CSS样式规划global.css和layout.css
luyued 发布于 2011-01-31 03:46 浏览 N 次
代码:
@charset "utf-8";
/*xiongsongsong 2008年5月8日20:24:43*/
/*
全局(global)
-----------------------------------------------
*/
body{width:1003px;text-align:center;margin:0 auto;font-size:small;font-family:Arial, Helvetica, sans-serif;position:relative;}
h1,h2,h3,h4,h5,h6,ul,ol,form,p,dl,dd,dt{margin:0;padding:0;font-size:100%;font-weight:normal;}
.clear_both{clear:both;}.display_none{display:none;}
ul,ol{list-style:none;}
a{text-decoration:none;}
a img{border:none;}
.fl{float:left;}.fr{float:right;}.tr{text-align:right;}.tl{text-align:left;}
/*
顶部区域-导航(top area - navigation)
----------------------------------------------
*/
#nav{width:100%;float:left;position:relative;background:#000 url(../images/global/style_bg.gif) 98% 40% no-repeat;height:198px;color:#fff;text-transform:uppercase; border-top:solid 18px #000;}
#nav h2{background:url(../images/global/alex.gif) center center no-repeat;width:427px;height:122px;text-indent:-9999px;margin:0 auto;padding-top:19px;}
#nav span.the,#nav span.issue,#nav span.path,#nav p,#nav span.date,#nav ul{position:absolute;}
#nav span.the,#nav span.issue{text-indent:-9999em;background-image:url(../images/global/issue_the.gif);background-repeat:no-repeat;width:100px;height:12px;display:block;overflow:hidden;}
#nav span.the{right:-8px;top:60px;background-position:left -12px;}
#nav span.issue{right:-27px;top:102px;background-position:left top;}
#nav p{top:140px;font-weight:bold;}
#nav span.path,#nav span.date{background-image:url(../images/global/top_l_r.png);background-repeat:no-repeat;width:173px;height:18px;display:block;text-indent:-9999px;}
#nav span.path{left:3px;}
#nav span.date{right:3px; background-position:left bottom;}
#nav p{left:24%;padding-top:3px;background:url(../images/global/long_text.gif) left center no-repeat;width:533px;height:15px;text-indent:-9999px;}
#nav ul{bottom:0;left:0;width:100%;border:solid 4px #fff;border-left:none;border-right:none;height:26px;line-height:26px;font-size:90%;overflow:hidden;background:#fff;}
#nav ul li{float:left;width:141px;margin-right:2px;}
#nav ul li a{display:block;width:100%;height:26px;background:#000 url(../images/global/nav_bg.gif) left top no-repeat;text-indent:-9999px;}
/*单独定义每个栏目的颜色*/
#nav ul li#nav_home a{background-position:left top;}
#nav ul li#nav_magazine a{background-position:-143px top}
#nav ul li#nav_shoes a{background-position:-286px top;}
#nav ul li#nav_nyc a{background-position:-430px top;}
#nav ul li#nav_living a{background-position:-573px top;}
#nav ul li#nav_entertainment a{background-position:-716px top;}
#nav ul li#nav_green a{background-position:-859px top;}
#nav ul li#nav_flash{margin-right:0;}#nav ul li#nav_flash a{background-position:-1002px top;width:145px;}
/*定义鼠标以上的背景替换*/
#nav ul li#nav_home a:hover,#nav ul li#nav_home.current_tag a{background-position:left bottom;}
#nav ul li#nav_magazine a:hover,#nav ul li#nav_magazine.current_tag a{background-position:-143px bottom}
#nav ul li#nav_shoes a:hover,#nav ul li#nav_shoes.current_tag a{background-position:-286px bottom;}
#nav ul li#nav_nyc a:hover,#nav ul li#nav_nyc.current_tag a{background-position:-430px bottom;}
#nav ul li#nav_living a:hover,#nav ul li#nav_living.current_tag a{background-position:-573px bottom;}
#nav ul li#nav_entertainment a:hover,#nav ul li#nav_entertainment.current_tag a{background-position:-716px bottom;}
#nav ul li#nav_green a:hover,#nav ul li#nav_green.current_tag a{background-position:-859px bottom;}
#nav ul li#nav_flash{margin-right:0;}#nav ul li#nav_flash a:hover,#nav ul li#nav_flash.current_tag a{background-position:-1002px bottom;width:145px;}
/*
版权(copyright)
--------------------------------------------
*/
#copyright{width:100%;float:left;clear:both;}
#copyright ul{height:32px;background:#000;text-transform:uppercase;width:100%;font-size:85%;font-weight:bold;letter-spacing:1px;}
#copyright ul li{float:left;margin:10px 20px 0 12px;display:inline;}
#copyright ul li a{color:#fff;}
#copyright p{font-size:80%;text-align:left;color:#545354;padding:5px 0 0 0;font-family:"Times New Roman", Times, serif;}我的layout.css复制内容到剪贴板代码:
@charset "utf-8";
/*
xiongsongsong 2008年5月10日9:59:33--------------*/
/*
定义布局 definition of the layout
---------------------------------------
*/
#main{width:100%;float:left;clear:both;position:relative;}
#menu,#ad{position:absolute;top:0;}
#menu{width:139px;left:0;border-right:solid 3px #000;background:#000;}
#content{width:700px;float:left;margin-left:142px;z-index:0;position:relative;min-height:604px;display:inline;}
#ad{height:604px;right:0;top:0;width:159px;background:#fff;border-left:solid 2px #fff;}#ad a{display:block;}
body #main h3{position:absolute;left:0;top:0;width:282px;height:33px;background-position:left top;background-repeat:no-repeat;z-index:2;text-indent:-9999px;}
body #main h3.go_green{background-image:url(../images/global/left_menu_green.png);}
body #main h3.shop{background-image:url(../images/global/left_menu_shop.png);}
body #main h3.living{background-image:url(../images/global/left_menu_living.png);}
body #main h3.flash{background-image:url(../images/global/left_menu_flash.png);}
body #main h3.magazine{background-image:url(../images/global/left_menu_magazine.png);}
/*
左侧菜单 Menu
---------------------------------------
*/
#menu ul{width:100%;float:left;clear:both;margin-top:50px;}
#menu ul li{height:24px;width:139px;background-repeat:no-repeat;border-bottom:solid 3px #000;text-indent:-9999px;background-position:left bottom;}
/*各种样式的左侧菜单 */
#go_green li,#go_green li a{background-image:url(../images/global/left_menu_green.png);}
#shop_list li,#shop_list li a{background-image:url(../images/global/left_menu_shop.png);}
#nyc_list li,#nyc_list li a{background-image:url(../images/global/left_menu_nyc.png);}
#living_list li,#living_list li a{background-image:url(../images/global/left_menu_living.png);}
#flash_list li,#flash_list li a{background-image:url(../images/global/left_menu_flash.png);}
#magazine_list li,#magazine_list li a{background-image:url(../images/global/left_menu_magazine.png);}
/*背景有规律的增长*/
#menu ul li#nav_one a{background-position:left -33px;}#menu ul li#nav_one a:hover,#menu ul li#nav_one.current_tag a{background-position:145px -33px;}
#menu ul li#nav_two a{background-position:left -57px;}#menu ul li#nav_two a:hover,#menu ul li#nav_two.current_tag a{background-position:145px -57px;}
#menu ul li#nav_three a{background-position:left -81px;}#menu ul li#nav_three a:hover,#menu ul li#nav_three.current_tag a{background-position:145px -81px;}
#menu ul li#nav_four a{background-position:left -105px;}#menu ul li#nav_four a:hover,#menu ul li#nav_four.current_tag a{background-position:145px -105px;}
#menu ul li#nav_five a{background-position:left -129px;}#menu ul li#nav_five a:hover,#menu ul li#nav_five.current_tag a{background-position:145px -129px;}
#menu ul li#nav_six a{background-position:left -153px;}#menu ul li#nav_six a:hover,#menu ul li#nav_six.current_tag a{background-position:145px -153px;}
#menu ul li#nav_seven a{background-position:left -177px;}#menu ul li#nav_seven a:hover,#menu ul li#nav_seven.current_tag a{background-position:145px -177px;}
#menu ul li#nav_eight a{background-position:left -201px;}#menu ul li#nav_eight a:hover,#menu ul li#nav_eight.current_tag a{background-position:145px -201px;}
#menu ul li a{width:100%;height:24px;display:block;overflow:hidden;}
#menu a.ad{margin:10px 0 0 10px;float:left;padding-bottom:8px;}
/*
右侧广告 Ad
---------------------------------------
*/
#ad span.ad_info{position:absolute;bottom:0;left:0;display:block;background:#fff;width:100%;font-size:80%;text-align:right;font-family:"Times New Roman", Times, serif;color:#494748;}
#ad img{display:block;width:158px;height:595px;background:#007073;}
上一篇：情侣衣夹克马甲 下一篇：FORUM Nom de Guerre
相关资讯
- 05-04· 引用 世界著名服装品牌
- 04-25· 尤文新星成转会市场宠儿
- 04-24· 调教+斗阵+敌对+交易+买卖
- 04-24· 调戏小白兔 BY 凌豹姿
- 04-24· 风风浪浪都好闯过来，c
- 04-24· 只用聆听
- 04-24· 浪都品牌介绍浪都泳装加
- 04-24· 记忆中的浪都
- 04-24· 2011年03月20日
- 04-24· 香格里拉 浪都
图文资讯
最新资讯
- 04-24· 佛山格仑堡之旅
- 04-24· 体育器材
- 04-24· 学生和家长自己的淘宝城
- 04-24· 梦回保定
- 04-24· 近几年运动场、公园绿地
- 04-24· 广州专业服装摄影公司
- 04-23· neiyi222 (2010-05-09 14:49:41)
- 04-23· 傻子的悲伤
- 04-23· 回忆
- 04-23· 上海基望斯咨询管理者的
广告赞助商
最多关注
- 今日
- 本周
- 年度
最多评论
品牌排行榜