`
songjindian
  • 浏览: 75601 次
  • 性别: Icon_minigender_1
  • 来自: 河南
文章分类
社区版块
存档分类
最新评论

设置<li>让页面同时显示两列

ASPAjaxjQueryJavaScript编程 
阅读更多

今天在做网站的时候有一个小模块的布局问题，然我头疼了半天，不过最后还是解决了，我想显示的效果如下图所示 ：

 

下面举个例子来说明是怎么实现的：

<!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>
<title>LI列表自动排成两列显示</title>
<style type="text/css">
<!--
body {font:12px/1.5em "Lucida Grande", Verdana, sans-serif; }
 #list {width: 600px;float:left; list-style:disc outside; color:#000; }
 #list li {float:left;}
  #list li a{display:block;float:left; width: 300px; }
-->
</style>
</head>
<body>
 <ul id="list">
<li><a href="http://songjindian.iteye.com" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="http://songjindian.iteye.com" target="_blank">ASP结合Ajax实现草稿自动保存系统</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">jQuery 多项选择功能的表格</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">带后台管理的ASP+jS动感相册</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">基于JavaScript的Tween算法及曲线特效</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">C#编程获取局域网IP及网卡MAC地址</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">Asp生成静态HTML完整实例（包括列表分页）</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">信友拼客(圈子交友)程序 v2.1</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">JavaScript开发的拼音输入法[精品]</a></li>
<li><a href="http://songjindian.iteye.com" target="_blank">ASP+AJAX无刷新评论提交</a></li>
 </ul>
</body>
</html>

 这个希望在以后的使用中能够用到。

分享到：
| 用js彻底解决中文传递乱码问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ul和li实现分两列（多列）布局显示

    根据文件中的描述，通过设置CSS样式使`&lt;ul&gt;`元素包裹的`&lt;li&gt;`元素浮动，从而实现两列或多列布局。具体的CSS样式代码如下： ```css .myul{ width:210px; /* 容器的宽度 */ } .myli{ width:100px; /* 单个列表项的...

    jQuery mobile多种样式的导航

    &lt;li&gt;&lt;a href="#" data-icon="gear"&gt;设置&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-icon="grid"&gt;网格&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; ``` `data-role="navbar"` 属性定义了这是一个导航栏，而 `data-icon` 属性允许我们为每个链接...

    html中的标签实例

    `&lt;table&gt;&lt;tr&gt;&lt;td&gt;数据1&lt;/td&gt;&lt;td&gt;数据2&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;` 创建了一个包含两列的表格行。 4. `&lt;br&gt;`：这是一个空元素，用于在文本中插入换行。例如，`Hello&lt;br&gt;World` 会在浏览器中显示为两行文本。 5. `&lt;h1&gt;`：...

    自己总结的 HTML基本语法

    - **无序列表**：`&lt;ul&gt;`与`&lt;li&gt;`配合使用，可设置`type`属性改变列表样式。 - **有序列表**：`&lt;ol&gt;`与`&lt;li&gt;`，可设定`type`属性（如`disc`, `circle`, `square`），以及`start`属性调整起始编号。 - **自定义列表**...

    Java Web应用开发：商品展示静态页面.docx

    为了让页面看起来更整洁且易于维护，我们可以使用JSP的`&lt;%@ include file="..." %&gt;`指令来包含其他页面。具体而言，我们将把`head.jsp`、`left.jsp`和`statusBarNavigation.jsp`这三个页面嵌入到`showProducts.jsp`...

    HTML参考手册

    - 示例：`&lt;td colspan="2"&gt;跨两列&lt;/td&gt;` - **`rowspan`**：用于定义单元格跨越的行数。 - 示例：`&lt;td rowspan="2"&gt;跨两行&lt;/td&gt;` 5. **表单属性** - **`action`**：用于指定表单数据提交的URL。 - 示例：`&lt;form...

    HTML教程(完整版).pdf

    &lt;td colspan="2"&gt;跨两列&lt;/td&gt; ``` ##### 7-6 表格的分组 - **行分组**： - `&lt;thead&gt;`：定义表格的头部。 - `&lt;tbody&gt;`：定义表格的主体。 - `&lt;tfoot&gt;`：定义表格的底部。 - **按列分组**： - `&lt;colgroup&gt;`：...

    HTML教程（完整版）

    &lt;td colspan="2"&gt;合并两列&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="2"&gt;合并两行&lt;/td&gt; &lt;td&gt;普通单元格&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;普通单元格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` - **表格的标题标签**: - `&lt;caption&gt;`: 表格标题...

    HTML主要属性

    &lt;td colspan="2"&gt;跨两列&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="2"&gt;跨两行&lt;/td&gt; &lt;td&gt;数据&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` 6. **多媒体标签 `&lt;video&gt;` 和 `&lt;audio&gt;`** - 作用：用于在页面中...

    HTML教程文档

    - 示例: `&lt;td colspan="2"&gt;合并两列&lt;/td&gt;`。 #### 四、多媒体内容 - **音频**: 使用`&lt;audio&gt;`标签添加音频。 - 属性包括`src`（音频文件源）和`controls`（显示播放控件）。 - 示例: `&lt;audio src="music.mp3" ...

    利用frameset做菜单

    在这个菜单页面中，我们使用了无序列表`&lt;ul&gt;`和列表项`&lt;li&gt;`来创建菜单。通过JavaScript的`onclick`事件，我们可以改变右侧`contentFrame`的页面内容。这里的`parent.contentFrame.location`就是引用了主页面中的`...

    HTML标准教程

    - 链接：`&lt;a&gt;`标签创建超链接，`href`属性设置目标URL，`target`属性决定新页面的打开方式。 - 图像：`&lt;img&gt;`标签插入图片，`src`属性指图片源，`alt`属性提供替代文本。 5. **列表与表格** - 无序列表：`&lt;ul&gt;`...

    跟我学HTML+CSS答案

    &lt;td colspan="2"&gt;横跨两列&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td rowspan="2"&gt;纵跨两行&lt;/td&gt; &lt;td&gt;正常单元格&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;正常单元格&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; ``` ### 第8章：表单与输入 #### 表单标签 - `&lt;form&gt;`: ...

    保利集团网页页面练习

    `&lt;ul&gt;`和`&lt;ol&gt;`以及`&lt;li&gt;`用于无序列表和有序列表等。掌握这些基本标签的用法是构建静态网页的第一步。 接着，我们探讨CSS的简单布局。CSS允许我们控制元素的样式，如颜色、字体、大小，以及它们在页面上的位置。`...

    WEB_HTML、CSS[参考].pdf

    例如，`&lt;frameset cols="50%,50%"&gt;`会创建一个两列的框架布局，每个列占屏幕的一半。 CSS（Cascading Style Sheets）是用来描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。它允许开发者...

    加速ASP程序的显示速度

    例如，列表框（＜SELECT＞）和组合框（＜SELECT＞）中的＜OPTION＞标签以及列表项（＜UL＞或＜OL＞中的＜LI＞标签）。在ASP中处理数据库查询并填充这些元素时，确保每个＜OPTION＞或＜LI＞都有对应的关闭标签。提前...

    作业3

    `&lt;img&gt;`标签用于插入图像，其`src`属性指定图片路径，`alt`属性提供替代文本，当图片无法显示时显示。 【HTML表格】 HTML还支持创建表格，通过`&lt;table&gt;`、`&lt;tr&gt;`（行）、`&lt;td&gt;`（单元格）和`&lt;th&gt;`（表头）等标签...

    assignment1

    每个元素都有其特定的功能，如`&lt;title&gt;`用于设置页面标题，`&lt;p&gt;`用于创建段落，`&lt;a&gt;`用于创建超链接。 【HTML元素】 HTML元素通常由起始标签和结束标签组成，例如`&lt;p&gt;`和`&lt;/p&gt;`。部分元素如`&lt;img&gt;`和`&lt;br&gt;`是自...

Magicbox
Global site tag (gtag.js) - Google Analytics