当当网头部和尾部——CSS源码

简介: 当当网头部和尾部——CSS源码

头部

@charset "utf-8";
/* CSS Document */
/*网页头部导航样式开始*/
.header_top,.header_middle,.header_search{
    margin-left:auto;
    margin-right:auto;
    width:955px;
    clear:both;
}
.header_top{
    border:solid 1px #999;
    background-image:url(../images/dd_header_bg.gif);
    background-repeat:repeat-x;
    height:24px;
}
.header_top_left{
    float:left;
    width:260px;
    padding-left:10px;
    line-height:28px;
}
*html .header_top_left{ /*only IE6*/
    line-height:24px;
}
.header_top_right{
    float:right;
    padding-right:10px;
    width:400px;
    text-align:right;
}
.header_top_right li{
    float:right;
    margin-left:5px;
    margin-top:5px;
}
.logo,.menu_left,.menu_right{
    float:left;
}
.logo{
    width:130px;
    padding-top:13px;
    height:47px;
}
.menu_left{
    height:28px;
    padding-top:32px;
    line-height:35px;
    width:510px;
}
*html .menu_left{ /*only IE6*/
    line-height:28px;
}
#menu_left_bold li{
    float:left;
    background-image:url(../images/dd_head_bg_mid.gif);
    height:28px;
    background-repeat:repeat-x;
    padding:0px 3px 0px 3px;
}
.bold,.bold:hover{
    font-weight:bold;
}
.menu_left_first{
    background-image:url(../images/dd_head_bg_left.gif);
    background-repeat:no-repeat;
    background-position:0px 0px;
    height:28px;
    width:4px;
    float:left;
}
.menu_left_end{
    background-image:url(../images/dd_head_bg_right.gif);
    background-repeat:no-repeat;
    background-position:0px 0px;
    height:28px;
    width:4px;
    float:left;
}
.menu_right{
    padding-top:32px;
    height:28px;
}
#menu_dull_red li{
    float:left;
    margin-left:5px;
    text-align:center;
    line-height:35px;
    height:28px;
}
*html #menu_dull_red li{ /*only IE6*/
    line-height:28px;
}
#menu_dull_red a,#menu_dull_red:hover{
    color:#9B2B0F;
    text-decoration:none;
    font-weight:bold;
}
.menu_right_1{
    background-image:url(../images/dd_header_1_a.jpg);
    width:52px;
    background-repeat:no-repeat;
}
.menu_right_2{
    background-image:url(../images/dd_header_2_a.jpg);
    width:39px;
    background-repeat:no-repeat;
}
.menu_right_3{
    background-image:url(../images/dd_header_3_a.jpg);
    width:65px;
    background-repeat:no-repeat;
}
.menu{
    clear:both;
}
#menu_white{
    float:left;
    background-image:url(../images/dd_head_bg_mid.gif);
    background-repeat:repeat-x;
    background-position:0px -63px;
    height:27px;
    width:99%;
    line-height:28px;
    text-align:center;
    color:#FFF;
}
.menu_mid_white,.menu_mid_white:hover{
    color:#FFF;
    padding:0px 4px 0px 4px;
}
.menu_first{
    background-image:url(../images/dd_head_bg_left.gif);
    background-repeat:no-repeat;
    background-position:0px -31px;
    height:27px;
    width:4px;
    float:left;
}
.menu_end{
    background-image:url(../images/dd_head_bg_right.gif);
    background-repeat:no-repeat;
    background-position:0px -31px;
    height:27px;
    width:4px;
    float:left;
}
.header_search{
    padding-top:2px;
}
.header_serach_left,.header_serach_mid,.header_serach_right{
    float:left;
    height:35px;
}
.header_serach_left{
    background-image:url(../images/dd_head_bg_left.gif);
    background-repeat:no-repeat;
    background-position:0px -58px;
    width:4px;
}
.header_serach_mid{
    background-image:url(../images/dd_head_bg_mid.gif);
    background-repeat:repeat-x;
    background-position:0px -28px;
    width:99%;
}
.header_serach_right{
    background-image:url(../images/dd_head_bg_right.gif);
    background-repeat:no-repeat;
    background-position:0px -58px;
    width:4px;
}
#header_serach_mid_menu li{
    float:left;
    margin-top:6px;
    padding:0px 5px 0px 5px;
    line-height:25px;
}
.header_input_search{
    margin-left:15px;
    width:200px;
    height:18px;
}
.header_secrch_btn{
}
/*网页头部导航样式结束*/
/*网页版权部分样式开始*/
.footer_top,.footer_end{
    width:800px;
    margin:0px auto 0px auto;
    clear:both;
    text-align:center;
}
.footer_top{
    color:#9B2B0F;
}
.footer_dull_red,.footer_dull_red:hover{
    color:#9B2B0F;
    margin:0px 8px 0px 8px;
}
/*网页版权部分样式结束*/
/*导航部分下拉菜单样式*/
#dd_menu_top_down{
    position:absolute;
    width:80px;
    text-align:left;
    border:solid 1px #999;
    border-top:0px;
    display:none;
    background-color:#FFF;
    padding-left:10px;
}
*html #dd_menu_top_down{/*only IE6*/
    right:30px;
    top:25px;
}
*+html #dd_menu_top_down{/*only IE7*/
    right:30px;
    top:25px;
}
#dd_menu_top_down li{
    float:none;
}

尾部

@charset "utf-8";
/* CSS Document */
body{
    margin:0px;
    padding:0px;
    font-size:12px;
    line-height:20px;
    color:#333;
}
ul,li,ol,h1,dl,dd{
    list-style:none;
    margin:0px;
    padding:0px;
}
a{
    color:#333333;
    text-decoration: none;
}
a:hover{
    color:#333333;
    text-decoration:underline;
}
img{
    border:0px;
}
.blue{
    color:#1965b3;
    text-decoration:none;
}
.blue:hover{
    color:#1965b3;
    text-decoration:underline;
}
#header,#main,#footer{
    width:960px;
    margin:0px auto 0px auto;
    clear:both;
    float:none;
}
/*网页版权部分样式开始*/
.footer_top{
    width:800px;
    margin:0px auto 0px auto;
    clear:both;
    text-align:center;
}
.footer_top{
    color:#9B2B0F;
}
.footer_dull_red,.footer_dull_red:hover{
    color:#9B2B0F;
    margin:0px 8px 0px 8px;
}
/*网页版权部分样式结束*/



相关文章
|
9月前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
149 34
|
9月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
456 33
|
9月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
123 22
|
10月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
210 24
|
10月前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
188 6
|
11月前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
61 0
CSS3几何透明层文本悬停变色源码
|
11月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
102 0
|
4月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
4月前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中