当当网头部和尾部——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;
}
/*网页版权部分样式结束*/



相关文章
|
10天前
|
Web App开发 移动开发 JavaScript
纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
这是一款基于纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码。画面中左下角是一个圆锥形礼炮卡通效果,呈现出节日庆祝时礼花爆破、五彩纸屑纷飞的动画特效。整体动画效果采用纯css3+svg实现,没有引入任何外部图形或js脚本元素。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
26 6
|
24天前
CSS3注册表单文本框占位符特效源码
CSS3注册表单文本框占位符特效源码是一段简单的css3 input文本框占位符,placeholders占位符内容填写注册表单特效,非常有意思,欢迎有兴趣的朋友前来下载使用。
27 5
|
23天前
|
前端开发
CSS制作月球行走404页面特效源码
CSS制作月球行走404页面特效源码是一款迈克杰克逊在月球上漫步走路404页面模板下载。效果非常逼真,感兴趣的朋友可以查看效果演示,也可以下载源码。
22 3
|
22天前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
17 0
CSS3几何透明层文本悬停变色源码
|
22天前
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
17 0
CSS3实现的九宫格图片鼠标悬停去除遮罩层源码
|
23天前
div+css3制作的简洁404错误页面特效源码
div+css3制作的简洁404错误页面特效源码是一段实现了非常简单也大方的效果的网站404错误页面效果代码,当鼠标经过404数字时,该数字会发光发亮,本段代码适应于所有网站使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。
19 1
|
22天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
20天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
42 7
|
20天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6