<style type="text/css">
*{ margin:0; padding:0;}
body{ font:12px Verdana, Arial, Helvetica, sans-serif;}
ul{ list-style:none;}
.menu{ width:949px; margin:0 auto; overflow:hidden;}
.outer{ background:#0000C6 no-repeat top left; margin-top:10px; padding-left:15px;}
.inner{ background:#AFCB2E no-repeat top right; padding-right:5px; width:50%px;}
.menu ul{ background:#AFCB2E repeat-x 0 -102px; height:34px; }
.menu li{ float:left; width:auto !important; width:1%; white-space:nowrap; padding:0 5px; background:#AFCB2E no-repeat bottom left;}
.menu li a{ display:block; text-decoration:none; padding-left:15px; cursor:pointer;}
.menu li a span { display:block;height:34px; line-height:34px; color:white; padding-right:15px;}
.menu li a:hover { background:#0AEAEF no-repeat left -68px;}
.menu li a:hover span { background:#0AEAEF no-repeat right -68px;}
.menu li.selected a { background:#DC6DB3 no-repeat left -34px;}
.menu li.selected a span { background:#DC6DB3) no-repeat right -34px; color:red;}
</style>
<script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="JQuery/menu.js"></script>
</head>
<body>
<div class="menu outer">
<div class="inner">
<ul>
<li class="selected" style="background:none;"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">百姓民声</a></li>
</ul>
</div>
<div style="position:absolute;top:10;right:1%;width:50%; height:34px; background-color:#999933; text-align: right">aaaaaaasdfsdfaaaaaaa</div>
</div>
分享到：
相关推荐
在网页设计中，常常需要将多个div元素在同一行内排列显示，以便布局的美观性和内容的逻辑性。从提供的文件信息来看，文档旨在展示如何使用CSS样式和HTML代码让多个div在同一行显示，并提供了具体的代码示例供初学者...
在网页设计中，让多个div元素在同一行内保持等高是一项常见的需求，这可以使得页面布局更加美观且统一。在本篇文章中，我们将深入探讨如何使用div实现多列等高处理，以及相关的关键技术和方法。 首先，让我们了解...
让我们深入探讨一下如何让多个 `div` 元素在同一行内显示，并讨论如何使父容器自适应子元素的大小。 首先，我们要理解默认情况下，`div` 是块级元素，它们会占据一整行并垂直堆叠。如果希望多个 `div` 在同一行内...
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、...
4. **inline-block**：内联块元素，和其他内联元素在同一行显示，同时具有块级元素的特点。 示例代码： ```html <div id="myDiv" style="display:none;"> 这个div不显示，并且不保留空间。 </div> ``` 通过...
2. **定位机制**：在`DIV+CSS`中，有相对定位(relative)、绝对定位(absolute)和固定定位(fixed)三种定位方式。相对定位是相对于其正常位置，绝对定位相对于最近的非static定位的祖先元素，固定定位则始终相对于...
`inline`则使其成为内联元素，允许与其他内联元素在同一行显示；`inline-block`结合了两者特性，既能并排显示，又能设置宽高；`flex`则是现代布局模式，可以灵活地处理元素的排列和对齐。 CSS还提供了盒模型概念，...
由于它属于块级元素，因此每个`<div>`都会自动创建一个新行，并占据整个屏幕或父元素的宽度。 - **span**：则是一个内联元素，主要用于对文档中的某部分文本应用样式或添加特定的行为，而不改变这些文本在文档流中...
因此，开发者需要寻找方法来实现在同一行显示多个复选框。 首先，Yii框架通过Widget来扩展和增强表单的构建能力，其中`checkBoxList`方法就是用来生成复选框列表的。默认情况下，`checkBoxList`方法生成的HTML元素...
这里展示了如何使用`float:left`和`float:right`将三个列（`column1`，`column2`，`column3`）排列在同一行。通常还需要一个带有`clear:both`样式的`div`来清除浮动，防止父元素高度塌陷。 总的来说，`DIV+CSS`...
1. 创建Div：在HTML中，创建一个div非常简单，只需要使用`<div>`和`</div>`标签将内容包裹起来。例如： ```html <div>这是一个div容器</div> ``` 2. 类与ID：为了更方便地管理和应用样式，我们可以为div添加类名...
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许在同一页面上组织大量内容，以提高用户体验和页面的可读性。同一页面多个Tab选项卡的嵌套显示实例是这种设计模式的一种进阶应用，它能够更好地管理复杂的...
上述代码中，两个div元素会显示在同一行内，但是这种并排效果并不是严格意义上的并排布局，因为它不提供行内元素之间的空间控制，通常还需要额外的样式处理。 二、通过设置float来让Div并排显示 浮动（float）是一...
`使每个菜单项向左浮动，从而实现在同一行显示多个菜单项。 2. **伪类**: `:link`和`:visited`用于未访问和已访问的链接样式，`:hover`用于鼠标悬停时的样式变化。 3. **动态状态**: 通过`#current`标识当前页面对应...
1. 流动布局（Block Layout）：块级元素默认独占一行，行内元素则在同一行显示。 2. 浮动布局（Float Layout）：利用float属性使元素浮动，创建多列布局。 3. 定位布局（Positioning）：position属性有static、...
例如，如果希望两个并排的`div`，我们可以设置它们的`display`为`inline-block`或`flex`，使它们在同一行显示。对于垂直堆叠的`div`，我们可以保持默认的`block`值或者使用`column`的`flex-direction`。 实现这种...
2. 行内布局（Inline Layout）：行内元素布局，元素按列显示，多个元素可以在同一行。 3. 混合布局（Flexbox Layout）：CSS3引入的弹性盒模型，适用于一维布局，能轻松实现对齐、分配空间、响应式设计等功能。 4. ...
例如，我们可以创建一个Div来作为网站的头部，另一个Div作为主要内容区，再一个Div作为页脚。 二、CSS基础 1. 选择器：CSS通过选择器来定位HTML元素，如标签选择器（h1{}）、类选择器（.myClass{}）、ID选择器（#...