`

非常简单的导航条 DIV + CSS

阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>


Home page
* {
padding: 0;
margin: 0;
font-size: 12px;
line-height: 1.7;
font-family: Verdana, "宋体", Arial;
list-style: none;
}
/*简单定义了一下全局*/
a:link,a:visited {
background: #FFF3C6 url(jaian.gif) no-repeat 15px 7px;
padding-left: 23px;
color: #000000;
text-decoration: none;
}
a:hover,a:active {
color: #000;
text-decoration: none;
background-color: #FED762;
}
a {
display: block;
border-bottom: 1px solid #fff;
padding-left: 10px;
width: 127px;
}
/*定义链接的样式*/
ul {
background: #fff;
width: 150px;
border: 1px solid #FF6600;
margin: 0px 20px -1px 20px;
padding: 1px;
}
/*定义了UL*/
span {
display: block;
background: #FF9900 url(jai.gif) no-repeat 5px 5px;
padding-left: 13px;
}


分享到:
评论

相关推荐

    网页导航条-div+css+js

    网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js网页导航条-div+css+js

    div+css页面布局,新手入门教材,2天学会div+css

    11. **导航条制作**:导航条是网站的重要组成部分,需要考虑其响应性,确保在不同屏幕尺寸下都能正常工作。 12. **清除默认样式**:浏览器对HTML元素有默认的样式,如`body`和`div`的外边距和内边距,需要通过CSS...

    DIV+CSS网页导航条

    在网页设计中,导航条是页面布局的重要组成部分,它帮助用户快速访问网站的不同部分。"DIV+CSS网页导航条"是一种常见的...总的来说,理解和掌握DIV+CSS创建网页导航条的方法对于任何Web开发者来说都是至关重要的技能。

    几个经典的导航条,css+div+js写的,个人收集

    在创建导航条时,CSS可以实现如下的功能: 1. **布局管理**:通过`display`属性设置元素为`inline-block`或`flex`,可以将导航条项排列成一行。 2. **背景与边框**:使用`background-color`、`border`和`box-shadow...

    div+css布局制作横向带箭头步骤流程样式

    在网页设计中,`div+css`布局是构建页面结构和样式的重要技术。它通过HTML的`&lt;div&gt;`元素作为容器来组织内容,并利用CSS(层叠样式表)来定义这些容器的外观、位置和样式。`div+css`布局能够实现灵活、可维护的网页...

    不错的DIV+CSS框架

    Bootstrap的网格系统、导航条、下拉菜单、模态框、表单控件等功能,都是基于DIV+CSS的实现,符合题目描述的框架特征。 Bootstrap的核心特性包括: 1. 响应式布局:自动适应不同设备屏幕大小,确保在手机、平板电脑...

    div+css设计页面框架

    在本案例中,我们看到的文件名如w.gif、h.gif、f.gif等可能代表不同用途的动态图片,比如w.gif可能用于导航栏的滑动效果,h.gif可能是滚动条或提示信息的动态效果,而f.gif可能用于按钮的鼠标悬停状态。 此外,文件...

    第23章 基于DIV+CSS的个人网站

    前面介绍了Web标准的基本概念,及其实现的基本方法。采用DIV+CSS可以很快实现页面布局,而且在页面设计和维护时都带来了极大的...本章将使用一个简单的实例,介绍DIV+CSS页面方式的简单设计过程,希望借此能抛砖引玉。

    蓝色网站导航源码!div+css样式导航条!

    在“div+css”导航条中,div通常被用作容器,包含一系列链接或菜单项。这些div元素通过CSS进行定位、布局和样式化。CSS可以控制导航条的宽度、高度、颜色、字体、边框、背景、浮动等属性,从而实现各种设计效果。...

    DIV+CSS规范命名大全集合

    ### DIV+CSS规范命名大全集合 #### CSS规范命名与实践指南 在网页设计与开发过程中,DIV+CSS的布局方式已经成为了业界的标准做法之一。合理的命名规则不仅能够提高代码的可读性和可维护性,还能有效提升团队协作...

    DIV+CSS 仿猪八戒导航条

    【DIV+CSS 仿猪八戒导航条】是一种常见的网页设计技术,主要目的是利用HTML的`&lt;div&gt;`元素和CSS(层叠样式表)来构建类似www.zhubajie.com网站上的导航栏。这个技术的核心在于利用这两种语言的特性来实现布局、样式...

    用div+css布局十步入门

    【用div+css布局十步入门】是一份适合初学者的CSS布局教程,旨在帮助学习者掌握使用CSS进行网页布局的基本技巧。以下是该教程详细的知识点解析: **第一步:规划网站** 在开始布局前,首先需要对网站进行规划。本...

    DIV+CSS实现的MAC风格的水平导航条

    【标题】:“DIV+CSS实现的MAC风格的水平导航条” 在网页设计中,导航条是网站布局的重要组成部分,它帮助用户快速访问网站的主要部分。本教程将介绍如何使用DIV和CSS来创建一个模仿MAC操作系统风格的水平导航条。...

    Div+css页面布局资料(很好很强大)

    ### CSS盒子模型与Div+CSS页面布局 #### CSS盒子模型概览 在深入探讨Div+CSS页面布局前,我们首先需要了解CSS盒子模型的基本概念。CSS盒子模型是Web设计中的核心概念之一,它用于描述HTML元素如何根据CSS属性在...

    左侧导航(js+div+css)

    你可以通过定义div元素的样式,如宽度、高度、颜色、边框、背景等,来设计导航条的基本外观。同时,利用CSS的浮动、定位和层叠特性,可以实现导航菜单在页面左侧固定的效果。例如,可以使用`position: fixed`让导航...

    div+css的导航条脚本代码

    ### div+css的导航条脚本代码解析 #### 一、引言 在网页设计中,导航栏是非常重要的组成部分之一,它不仅提升了用户体验,还帮助用户快速定位到所需信息。div+css组合创建的导航栏因其灵活性高、样式美观而备受青睐...

    菜单导航(DIV+CSS)30种

    “菜单导航(DIV+CSS)30种”资源提供了丰富的菜单导航实现方式,涵盖了多种布局、交互和视觉效果,旨在帮助设计师和前端开发者提升技能,创建高效且美观的网页导航系统。通过深入理解和运用这些实例,你可以更好地...

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

    本教程主要聚焦于如何使用`DIV+CSS`技术来仿制京东商城的导航条,这是网页设计中一个重要的组成部分,它能提供清晰的网站导航,帮助用户快速找到所需信息。 首先,`DIV`是HTML中的一个块级元素,它可以容纳其他HTML...

Global site tag (gtag.js) - Google Analytics