网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 手机学院 | 邮件系统 | 网络安全 | 认证考试
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.CSS教程:表格的nobr终极解决方案.
.CSS的长度单位(em)与em标签.
.实现页面图片阴影特效.
.对css滑动门技术的一些总结和归纳.
.用CSS来控制网页背景.
.css(div+span)padding的使用.
.css的引用文件方式.
.根据时间段自动切换CSS风格.
.css应用笔记整理之结构编写.
.精通 CSS 滤镜(二).
.CSS选择器的优先级.
.常用CSS.
.火狐/IE浏览器flash透明,css强制.
.google chrome 的CSS hack来了.
.两句CSS完美截断侧栏最新评论列表.
.CSS语法手册(四)文本填充,边框.
.最全的CSS浏览器兼容问题.
.简单的CSS改进网站设计的三个技巧.
.精通 CSS 滤镜(四).
.CSS:如何编写代码才能更有效率.

css实现图片横向排列,溢出隐藏\滚动条横向拖动

发表日期:2008-12-3

关键样式:

white-space:nowrap;/*内容横向排列不换行*/

overflow-x:auto;  overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现,纵向滚动条隐藏*/

预览代码:
<!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>css实现图片横向排列,溢出隐藏横向滚动</title>
<style. type="text/css">
<!--
.inimg {width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}
.inimg img {width:670px;height:375px;}
-->
</style>
</head>
<body>
<div class="inimg">
<img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />
<img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />
<img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />
<img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />
</div>
</body>
</html>

上一篇:Div+CSS+JS树型菜单,可刷新 人气:835
下一篇:CSS文字换行详细解说 人气:900
浏览全部css的内容 Dreamweaver插件下载 网页广告代码 2009年新年快乐