`

横向图文列表

    博客分类:
  • Css
 
阅读更多
小公司,boss不招MM,美工这块只有自己来慢慢折腾了.
<!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>
<style type="text/css">
<!--
body { 
	margin:120px auto auto 420px; 
	font-size:12px; 
	font-family:Verdana; 
	line-height:1.5;
}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form { 
	padding:0; 
	margin:0;
}
ul { 
	list-style:none;
}
img { border:0px;}
a { 
	color:#05a; 
	text-decoration:none;
}
a:hover { color:#f00;}
#layout {
	width:390px;
	border:2px solid #ccc;
	padding-bottom:20px;
	overflow:auto;
	float: none;
	clear: both;
}
 
#layout ul li {
	text-align: center;
	margin: 20px 0px 0px 20px;
	float: left;
	width: 72px;
}
#layout ul li a {
	display: block;
}
#layout ul li a img {
	padding: 1px;
	margin-bottom: 3px;
	border: 1px solid #FF0000;
}
#layout ul li a:hover img {
	padding: 0px;
	border: 2px solid #0000FF;
}
-->
</style>
</head>

<body>
<div id="layout">
[list]
[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[*][url=#][img]sound.png" width="68" height="54[/img]亚信[/url]

[/list]
</div>
</body>
</html>

上图:





  • 大小: 81.2 KB
0
0
分享到:
评论

相关推荐

    PC用横向图文列表展示

    在PC端设计网页时,有时候我们需要展示一组图文并茂的信息,这时横向图文列表展示就显得尤为重要。本项目是专为个人计算机(PC)设计的一种视觉效果,利用jQuery库实现了一个功能强大的前端插件,旨在提供一种高效且...

    Dreamweaver8系列DIV+CSS教程html列表.pdf

    此外,我们还可以创建横向图文列表,这是一种常见的布局技巧,常用于展示带有图片的项目。首先,我们需要在HTML中添加图片元素到`&lt;li&gt;`标签内,并通过CSS实现列表项的浮动和宽度控制,使它们水平排列。例如: ```...

    DIV+CSS教程——第六天html列表.pdf

    - 要创建横向图文列表,首先确保列表项目`&lt;li&gt;`设置了浮动(如`float: left`),这样它们会并排显示。然后,可以将图片和文字放入同一个列表项中,如: ```html 文字描述 ``` - 为了使列表看起来整洁...

    jQuery横向图文手风琴代码.zip

    《jQuery横向图文手风琴代码实现详解》 在网页设计中,动态效果是提升用户体验的重要手段之一,jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能和便利的操作接口。本篇文章将详细探讨如何利用jQuery...

    横向的图文手风琴布局效果.zip

    在实际应用中,这种横向图文手风琴布局可以灵活适应不同的屏幕尺寸,实现响应式设计。通过使用媒体查询(`@media`),开发者可以为不同设备定义不同的CSS规则,保证在手机、平板电脑和桌面电脑上都能有良好的显示...

    黑色横向图文排版商品介绍的微信小程序模板下载.zip

    黑色横向图文排版商品介绍的微信小程序模板下载.zip

    动态滑动的jquery横向图文菜单.rar

    一款动画效果相当平滑的jquery图标式菜单,动态滑动的jquery横向图文菜单,需要手动控制滑动,点击左右两侧的箭头即可实现滑动。这个菜单在设计的时候,图标是基于图片的,因此若菜单项比较多,则需要引入比较多的...

    超精美的jquery横向图文滚动特效.rar

    超精美的jquery横向图文滚动特效,其实就是图片滚动,但是本效果设计的十分精美,而且每张图片都显示文字信息。左右两边的箭头,用于切换图片滚动,滚动时的速度有缓冲效果,先快后慢,慢慢停止。这种设计风格更像是...

    简单横向图文排版商品介绍精彩活动展示店铺小程序源码.zip

    该压缩包文件“简单横向图文排版商品介绍精彩活动展示店铺小程序源码.zip”主要包含了一个用于创建电商店铺小程序的源代码。这个源码设计的主要目的是为了帮助商家以一种直观、吸引人的方式进行商品介绍和活动展示,...

    横向走马灯图文

    横向走马灯是一种常见的网页动画效果,主要用于展示一串连续的图像或文字,如同传统的物理走马灯一样,从一端滚动到另...压缩包中的“横向走马灯图文”可能包含了相关的HTML、CSS和JavaScript代码示例,供学习和参考。

    jQuery横向图文手风琴代码

    【jQuery横向图文手风琴代码】是一种常见的网页交互设计,主要利用jQuery库和CSS3技术,为用户提供一种优雅的展示方式,将多个图文内容以横向滑动的形式进行切换,常用于网站的导航、产品展示或者文章摘要等场景。...

    jQuery限时限量抢购商品图文列表滚动切换代码

    在本文中,我们将深入探讨如何使用jQuery实现一个限时限量抢购商品的图文列表滚动切换功能。这个功能包含三种状态:正常、卖光了和活动结束,并且具备左右箭头按钮来控制列表的切换。我们将主要关注以下几个方面: ...

    jQuery箭头控制图文左右滚动代码

    在本文中,我们将深入探讨如何使用jQuery和CSS来实现箭头控制的图文左右滚动效果。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画制作和Ajax交互。结合CSS,我们可以创建出动态且用户友好的网页...

    dz手机模板头条新闻资讯手机版 论坛版 价值99元.rar

    3、首页增加今日头条图文列表样式。 4、帖子列表页增加顶部样式,帖子显示页样式优化。 5、美化了登录注册页。 6、美化了用户中心页面。 7、本模板是仿照今日头条手机APP的样式进行制作,基本做到样式一致; 论坛...

    “推拉窗”样式图文菜单,横向滑动展开.rar

    这种菜单通过横向滑动展开,增加了用户体验的趣味性和互动性。在给定的资源中,我们看到一个使用jQuery插件实现的此类功能。 jQuery是一款广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理、动画...

    高可定制化,既支持横向,也支持纵向布局的图文 Segment Control 组件.zip

    本开源项目“高可定制化,既支持横向,也支持纵向布局的图文 Segment Control 组件”提供了超越默认Segment Control功能的高级特性,特别强调了自定义性和布局灵活性。 1. **Swift编程语言**: 该组件使用Swift...

    CSS 图片横向排列实现代码

    JS+CSS联合打造的图文结合动感菜单,则涉及到JavaScript和CSS的交互,用于创建动态的、响应用户交互的菜单。这种菜单通常会结合CSS动画和JavaScript事件监听,提供更丰富的用户体验。然而,这些内容超出了本篇关于...

    新媒体图文内容设计.pptx

    1. 文字思维创意:运用发散思维、聚合思维、横向思维和逆向思维,创造独特的表达方式,提升内容的吸引力。 2. 文字字形创意:例如文字云,通过图形化排版,结合关键词和图像,使内容更具视觉冲击力。 3.1.4 新媒体...

    微信小程序图片横向左右滑动案例

    本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: &lt;image class=upload_Item_img src=../../image/test1.jpg&gt;&lt;/image&gt; ...

    凹版印刷机横向电动对版结构.zip

    凹版印刷机是一种广泛应用在包装、报纸、杂志等领域的印刷设备,其主要特点是采用凹陷的图文部分来存储油墨,然后通过压力将油墨转移到承印物上。"横向电动对版结构"是凹版印刷机中的一个重要组成部分,它的功能在于...

Global site tag (gtag.js) - Google Analytics