使用DIV+CSS构建京东商城风格导航条

5星 · 超过95%的资源需积分: 4 132 浏览量更新于2024-09-13 收藏 8KB TXT 举报

"使用DIV+CSS技术来仿制360buy京东商城的导航条，适合初学者进行简单修改和直接应用。" 在网页设计中，`DIV+CSS`是一种常见的布局方式，它将内容（HTML元素）与样式（CSS样式表）分离，使页面结构清晰，易于维护和调整。在这个例子中，我们将学习如何使用`DIV+CSS`来创建类似360buy京东商城的导航条。这个导航条具有一定的视觉效果和交互性，能够提升用户体验。首先，`<head>`部分定义了页面的基本样式和设置，包括字体、颜色和背景图片等。`<style type="text/css">`标签内的CSS代码是实现导航条样式的主体。 `.my_left_category`是一个类选择器，用于定义整个导航条的基本样式。在这个例子中，设置宽度为150px，字体大小为12px，字体为arial或sans-serif，字母间距为2px。 `.my_left_category h1`选择器针对导航条的标题部分。这里使用了背景图片`spring_06.gif`，高度20px，不重复显示背景，字体大小14px，加粗，并通过`padding`设置了内边距，标题颜色设为白色。 `.my_left_category.my_left_cat_list`是一个复合类选择器，用于定义导航条的列表样式。这个列表有1像素的边框，边框颜色为#b60134，线高为13.5pt。 `.my_left_category.my_left_cat_list h2`针对列表中的子标题，设置了内外边距，以及链接的初始样式。链接颜色为#d6290b，加粗，字体大小14px，行高22px。 `.my_left_category.my_left_cat_list h2 a:hover`是当鼠标悬停在链接上时的样式，保持颜色、字体和行高不变，这样可以提供用户友好的交互反馈。 `.my_left_category.h2_cat`定义了一个带有背景图片的子分类标题区域，背景图片`my_menubg.gif`用于装饰。通过这些CSS规则，我们可以创建一个类似京东商城的导航条，包括标题、子标题和链接的样式。这个模板可以直接应用于个人项目，或者作为学习`DIV+CSS`布局的实践案例。在实际应用中，你可以根据自己的需求修改颜色、尺寸、字体等属性，以适应不同的网站设计风格。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV+CSS仿360buy京东商城导航条</title>
<style type="text/css">
.my_left_category{
width:150px;
font-size:12px;
font-family:arial,sans-serif;
letter-spacing:2px;
}
.my_left_category h1{
background-image:url(http://www.6a8a.com/images/spring_06.gif);
height:20px;
background-repeat:no-repeat;
font-size:14px;
font-weight:bold;
padding-left:15px;
padding-top:8px;
margin:0px;
color:#FFF;
}
.my_left_category .my_left_cat_list{
width:148px;
border-color:#b60134;
border-style:solid;
border-width:0px 1px 1px 1px;
line-height:13.5pt;
}
.my_left_category .my_left_cat_list h2 {
margin:0px;

剩余9页未读，继续阅读

liu__song369

粉丝: 1

使用DIV+CSS构建京东商城风格导航条

div+css例子 div+css例子

div+css百分比表格+DIV+CSS+JS静态分页程序+DIV+CSS像素表格

DIV+CSS 仿猪八戒导航条

div+css+jquery仿写京东首页

DIV+CSS仿腾讯拍拍网导航菜单

基于jq+div+css+php+mysql 仿哥弟商城全栈电商项目.zip

DIV+CSS仿京东商城导航条

DIV+CSS仿京东商城导航条.rar

div+css实现仿猪八戒首页导航菜单效果

DIV+CSS前台模板 DIV+CSS WordPress模板

最新资源