问答首页 → 入门技术
0 0

用html+css哦导航栏，我的导航栏的的div跑到最顶部去了，怎么修改 html和css的代码都在下面5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<link href="test.css" rel="stylesheet" type="text/css" />

 

 

</head>

 

<body>

<div class="contariner" >

 

<div class="bor_1" >

<div class="bor_1_left"></div>

<div class="bor_1_center"></div>

<div class="bor_1_right">

     <ul>

<li><a href="#">登陆</a></li>

<li>&nbsp;&nbsp;&nbsp;</li>

<li><a href="#" >注册</a></li>

<li>&nbsp;&nbsp;&nbsp;</li>

 </ul>

</div>

</div>

 

 

<div class="top_1">

<div class="top_1_left">

<ul>

<li class="STYLE1"><a href="#" >首页</a></li>

<li class="STYLE1"><a href="#">相册</a></li>

<li class="STYLE1"><a href="#">日志</a></li>

<li class="STYLE1"><a href="#">个人信息</a></li>

<li class="STYLE1"><a href="#">iteye</a></li>

</ul>

</div>

 

  <div id="top_right">

 

<ul>

<li class="STYLE1"><a href="#" >个人中心</a></li>

<li class="STYLE1"><a href="#">百度知道</a></li>

</ul>

</div>

 

 

 

</div>

 

 

</body>

</html>

 

 

 

.contariner {

height: 800px;

width: 1340px;

}

.STYLE1 {

font-size: 16px;

font-weight: bold;

}

 

.contariner .bor_1 {

background-color:#FFFFFF;

height: 60px;

width: 1240px;

border: thin dashed #CCCCCC;

font-style: normal;

float:right;

 

 

}

.contariner .bor_1_left{

background-color:#999;

height:58px;

width:800px;

float:left;

 

}

 

.contariner .bor_1_center{

background:#330033;

    height:58px;

width:150px;

float:left;

}

 

.contariner .bor_1_right{

background-color:#00FF00;

height:58px;

width:288px;

float:right;

}

 

 

.contariner .bor_1 .bor_1_right li {

background-position: top;

float: right;

list-style-type: none;

margin: 0px;

padding: 1px;

}

 

 

 

.contariner .top_1 #top_right {

background-color: #00CC00;

margin-left:900px;

height: 30px;

width: 220px;

margin-top:-48px;

}

 

.contariner .top_1 #top_right ul li {

background-color: #00CC00;

list-style-type: none;

line-height: 30px;

width:110px;

float: right;

text-align: center;

margin-bottom: 1p

}

 

.contariner .top_1 {

margin-top:65px;

background-color: #00FF00;

height: 30px;

width: 1340px;

border: 1px dashed #FFFFFF;

list-style-type: none;

 

}

 

 

 

.contariner .top_1 .top_1_left {

background-color: #00CC00;

height: 30px;

width: 600px;

margin-left:100px;

margin-top:-15px;

 

}

 

.contariner .top_1 .top_1_left ul li{

background-color: #00CC00;

list-style-type: none;

line-height: 30px;

width:110px;

float: left;

text-align: center;

margin-bottom: 1px;

}

 

.contariner .top_1 .top_1_left ul li a{

   font-size: 22px;

color: #000;

text-decoration: none;

display:block;

 

}

 

.contariner .top_1 .top_1_left ul li a:hover{

background-color:#006699;

 

}

 

 

html css div+css 
2014年5月20日 15:14

2个答案 按时间排序 按投票排序

0 0

采纳的答案

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="contariner">
		<!-- -->
		<div class="bor_1">
			<div class="bor_1_left"></div>
			<div class="bor_1_center"></div>
			<div class="bor_1_right">
				<ul>
					<li><a href="#">登陆</a></li>
					<li>&nbsp;&nbsp;&nbsp;</li>
					<li><a href="#">注册</a></li>
					<li>&nbsp;&nbsp;&nbsp;</li>
				</ul>
			</div>
		</div>
		
		<!-- -->
		<div class="top_1">
			<div class="top_1_left">
				<ul>
					<li class="STYLE1"><a href="#">首页</a></li>
					<li class="STYLE1"><a href="#">相册</a></li>
					<li class="STYLE1"><a href="#">日志</a></li>
					<li class="STYLE1"><a href="#">个人信息</a></li>
					<li class="STYLE1"><a href="#">iteye</a></li>
				</ul>

			</div>

			<div id="top_right">
				<ul>
					<li class="STYLE1"><a href="#">个人中心</a></li>
					<li class="STYLE1"><a href="#">百度知道</a></li>
				</ul>

			</div>
		</div>
		
	</div>

</body>

</html>

<style>
.contariner {
	height: 800px;
	width: 100%;
}

.STYLE1 {
	font-size: 16px;
	font-weight: bold;
}

.contariner .bor_1 {
	background-color: #FFFFFF;
	height: 60px;
	width: 100%;
	border: thin dashed #CCCCCC;
	font-style: normal;
	float: left;
}

.contariner .bor_1_left {
	background-color: #999;
	height: 58px;
	width: 800px;
	float: left;
}

.contariner .bor_1_center {
	background: #330033;
	height: 58px;
	width: 150px;
	float: left;
}

.contariner .bor_1_right {
	background-color: #00FF00;
	height: 58px;
	width: 288px;
	float: right;
}

.contariner .bor_1 .bor_1_right li {
	background-position: top;
	float: right;
	list-style-type: none;
	margin: 0px;
	padding: 1px;
}

.contariner .top_1 #top_right {
	background-color: #00CC00;
	margin-left: 900px;
	height: 30px;
	width: 220px;
	margin-top: -48px;
}
.contariner .top_1 #top_right ul li {
	background-color: #00CC00;
	list-style-type: none;
	line-height: 30px;
	width: 110px;
	float: right;
	text-align: center;
	margin-bottom: 1p
}

.contariner .top_1 {
	background-color: #00FF00;
	height: 30px;
	width: 100%;
	float: left;
	border: 1px dashed #FFFFFF;
	list-style-type: none;
}

.contariner .top_1 .top_1_left {
	background-color: #00CC00;
	height: 30px;
	width: 600px;
	margin-left: 100px;
	margin-top: -15px;
}

.contariner .top_1 .top_1_left ul li {
	background-color: #00CC00;
	list-style-type: none;
	line-height: 30px;
	width: 110px;
	float: left;
	text-align: center;
	margin-bottom: 1px;
}

.contariner .top_1 .top_1_left ul li a {
	font-size: 22px;
	color: #000;
	text-decoration: none;
	display: block;
}

.contariner .top_1 .top_1_left ul li a:hover {
	background-color: #006699;
}
</style>

2014年5月20日 17:46
0 0

html+css 尽量用dreamweaver来画吧 谁用谁知道

2014年5月23日 02:02

相关推荐

    DIV+CSS导航栏

    接下来，我们讨论如何用JavaScript来控制`DIV+CSS`导航栏。JavaScript可以为导航栏添加动态效果，如下拉菜单、滑动切换、动画过渡等。以下是一个简单的下拉菜单实现： ```html &lt;div class="nav-item dropdown"&gt; ...

    html+css侧边伸缩导航栏

    4. 使用 CSS 选择器和媒体查询控制导航栏在不同屏幕尺寸下的行为。 5. 考虑交互效果，提升用户体验。 通过熟练掌握这些技术，你可以轻松创建出一个功能强大且美观的侧边伸缩导航栏，为你的网站增添更多亮点。

    css+div+js实现简单导航栏菜单栏

    在实际项目中，"html"这个文件很可能是包含HTML代码的主文件，其中可能包含了`&lt;div&gt;`元素来构建导航栏结构，以及相关的CSS和JS内联代码或链接到外部的CSS和JS文件。为了优化代码结构，通常会将CSS和JS代码分离到单独...

    html+css侧边抽屉式导航栏

    以下将详细讲解如何使用HTML和CSS创建一个侧边抽屉式导航栏。 首先，我们需要构建HTML结构。一个简单的侧边抽屉导航栏可能包括一个包含导航链接的`&lt;nav&gt;`元素，以及一个触发导航栏显示/隐藏的按钮。示例如下： ```...

    div+css+ul-li制作横向导航栏

    本教程将详述如何使用HTML的`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`标签，结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用，非常适合初学者学习。 首先，我们来理解一下这些HTML标签的基本概念： 1. `&lt;div&gt;`：这...

    css+div 导航栏

    在CSS中，我们可以使用`background-image`属性为导航栏添加图片，或者用`::before`和`::after`伪元素添加装饰性图标。 总的来说，使用CSS+div创建导航栏是一种灵活且强大的方法，可以实现各种定制化的设计效果。...

    基于html和CSS3制作简单侧边导航栏

    文章主要介绍了如何使用HTML和CSS3来制作一个简单而大方的侧边导航栏。下面详细解析了文中所提及的知识点： 1. HTML结构 - &lt;div class="sidebar"&gt;&lt;/div&gt;: 用于包裹整个侧边导航栏的容器，类名sidebar定义了这个...

    div+css下拉导航栏

    通过使用CSS，我们可以控制导航栏的外观和交互效果。例如，设置背景色、边框、字体大小以及鼠标悬停时的改变。 要实现下拉导航栏，我们需要以下关键步骤： 1. **基础结构**：首先，创建一个包含所有导航项的主`div...

    html+css网页设计源代码

    你可以通过查看和修改代码，了解HTML和CSS的工作原理，学习如何创建和组织网页结构，以及如何使用CSS来控制样式和布局。对于初学者，可以从简单的页面开始，如创建一个包含标题、段落和图片的基本网页，然后逐步增加...

    html+css二级导航栏的创建

    - 上述代码中，我们使用了`&lt;ul&gt;`和`&lt;li&gt;`元素来构建导航栏的结构。每个`&lt;li&gt;`元素代表一个主菜单项，并通过嵌套`&lt;ul&gt;`元素来实现二级菜单。 - 主菜单项的`&lt;a&gt;`标签用于添加链接，而二级菜单项也使用同样的方式实现...

    div+css制作的几款好看的导航栏

    这里我们将深入探讨如何利用div和css来创建具有不同颜色风格的导航栏，包括蓝色、黑色、黄色和红色导航栏。 首先，让我们理解什么是div和css。`div`是HTML中的一个块级元素，全称为"division"，它用于将网页内容...

    导航栏切换 div+css+js 源码

    导航栏切换 div+css+js 源码 by Jacky

    CSS+DIV实现的导航栏

    本文将深入探讨如何使用CSS（层叠样式表）和DIV（division，分块元素）来创建灵活且响应式的导航栏，包括横排和竖排两种布局方式。 首先，我们从基础开始。CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    - **导航栏**: 使用`&lt;nav&gt;`标签创建，结合CSS实现下拉菜单或侧边栏等功能。 - **轮播图**: 利用JavaScript控制图片的自动切换或手动切换。 - **详情页**: 展示景点详细介绍、地图位置、开放时间等内容。 - **地图...

    DIV+CSS案列源代码03

    这个案例可能包含了各种网页元素的布局，如导航栏、主体内容区、侧边栏、页脚等，通过`CSS`来控制每个`DIV`的大小、位置、背景、边距等属性，实现响应式设计，确保网站在不同设备上都能良好显示。 【标签】"DIV+CSS...

    DIv+css导航栏.rar

    标题中的“DIv+CSS导航栏.rar”是一个压缩包文件，通常包含HTML和CSS文件，用于展示如何使用HTML的div元素结合CSS样式来创建网页导航栏。导航栏是网站设计中至关重要的一部分，它帮助用户在网站的不同页面之间进行...

    83套HTML5+CSS3+DIV网页模板

    3. 应用CSS3的动画和过渡，为按钮、导航栏和其他元素添加平滑的动态效果。 4. 利用CSS3的图形样式，如渐变、阴影、圆角，提升网页的视觉吸引力。 5. 使用媒体查询实现自适应布局，适应移动设备和桌面电脑的不同需求...

    div+css的导航条脚本代码

    本文将通过分析一个具体的div+css导航条实例代码，深入探讨其实现原理和技术要点。 #### 二、基础知识回顾 ##### 1. HTML (HyperText Markup Language) HTML 是一种标记语言，用于定义网页结构。在构建导航条时，...

    DIV+CSS案列源代码06

    - **导航栏**：使用CSS实现固定顶部的导航栏，以及鼠标悬停时的下拉菜单效果。 - **产品展示**：通过CSS实现网格布局展示水果图片，鼠标悬停时显示详细信息和添加到购物车按钮。 - **购物车**：使用CSS和JavaScript...

Magicbox
Ask-but
我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

Global site tag (gtag.js) - Google Analytics