动态网站制作指南



当前位置 > 网站建设学院 > 网页制作 > CSS教程 Rss

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>
关注此文的读者还看过：
·2012-2-8 12:58:27 CSS制作很漂亮的文字滑动效果
·2012-2-8 12:58:02 搞定IE的最重要CSS技巧
·2012-2-8 12:56:26 CSS Hack兼容大全,令您的网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari…
·2012-2-8 12:56:10 哀悼逝者 快速将你的网站变成灰色
·2012-2-8 12:54:05 CSS+DIV表格背景透明，内容不透明
·2012-2-8 12:52:25 css实现强制不换行/自动换行/强制换行
·2012-2-8 12:50:33 [视频教程]CSS DIV网页设计视频教程 15
·2012-2-8 12:50:06 [视频教程]CSS DIV网页设计视频教程 14
·2012-2-8 12:49:56 [视频教程]CSS DIV网页设计视频教程 07
站长推荐 PS笔刷下载 在线翻译 系统进程 广告代码
  发表评论
姓　名: 验证码:
内　容:
教程搜索服务
项目外包信息
·找长期合作的网页设计师（切图+
·SNS 网站开发
·云南大蓄文化传播有限公司网站设
·药品代购网站
·FLASH网站汉化
·求高手帮我设计一个减肥产品网站
·flash首页制作（已有设计图）
·寻求长期外包人员
·网页页面修改
·北京地区 flash动画合作
·佛山网站建设+263企业邮箱找我。
·ecshop+Discuz! X2+ Home会员整
·寻找网站建设团队或者个人合伙
·LOGO设计外包
·企业网后台程序外包
发布信息 浏览信息
邮件订阅服务
输入你的邮件地址，你将不会错过任何关于<CSS教程>的内容


网页制作文章分类
Dreamweaver教程
FrontPage教程
Javascript教程
CSS教程
DHTML教程
HTML教程
网页特效
心得技巧
Discuz!专栏
站长工具：Google PR查询|Alexa排名查询|网站速度测试|CSS在线编辑器|OPEN参数生成器|弹出式窗口代码产生器|密码登录生成器|在线按钮生成器|Meta标签生成器|邮箱图标在线生成|多色彩特效字代码生成器|网页代码调试器|在线FTP登陆|Flash取色器|配色代码对照表|配色辞典|CSS生成器|CSS在线压缩|广告代码|框架网页代码生成器|js/vbs加密|md5加密|进制转换|UTF-8 转换工具|在线调色板|Html转换js|Html转换asp|Html转换php|Html转换perl
实用工具：汉字翻译拼音|拼音字典|在线翻译|天气预报|火星文|在线网速测试|符号对照表|个税计算|理财工具|黄金价格|购房银行按揭利率计算|汇率查询|经典小工具|汉字简繁转换|普通单位换算|公制单位换算|生辰老黄历|国内电话区号|国家代码与域名缩写|文字加密解密|元素周期表|健康查询|世界时间|全国各地车牌查询|全国车辆交通违章查询|万年历|二十四节气|汉字横竖排版|手机号码查询|计算器|ip搜索
广告刊登 | 版权声明 | 联系我们 | 加入收藏 | RSS订阅
Copyright © 2000-2012 www.knowsky.com All rights reserved | 沪ICP备05001343号