![](\"/uploads/divcss/pic_1h.jpg\")
应用视频: Windows | Word2007 |
Excel2007 | PowerPoint2007 |
Dreamweaver 8 | Fireworks 8 |
Flash 8 | Photoshop cs |
CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局
| Javascript | Access数据库
| Asp | Sql Server数据库
| Asp.net | Flash
AS
当前位置 > 文字教程 >
div+css布局教程
CSS图片放大展示的一种小思路
文章类别：div+css布局 | 发表日期:2008-9-26 11:27:59
看下面的HTML代码：
Example Source Code [www.21shipin.com]
下面是CSS代码：
Example Source Code [www.21shipin.com]
看运行效果：
Source Code to Run [www.21shipin.com]
Example Source Code [www.21shipin.com]<div class=\"photo\">
<ul>
<li><a href=\"#nogo1\" class=\"hor\"><img src="../img/divcss/200892611254222477803.jpg" alt=\"\" title=\"\" /><b>Snow capped mountains</b></a></li>
</ul>
</div>
<ul>
<li><a href=\"#nogo1\" class=\"hor\"><img src="../img/divcss/200892611254222477803.jpg" alt=\"\" title=\"\" /><b>Snow capped mountains</b></a></li>
</ul>
</div>
下面是CSS代码：
Example Source Code [www.21shipin.com]/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;}
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}
.photo ul li a:hover {white-space:normal;position:relative;}
.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;}
a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}
/* slides styling */
.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;}
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}
.photo ul li a:hover {white-space:normal;position:relative;}
.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}
.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}
.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;}
看运行效果：
Source Code to Run [www.21shipin.com]
视频教程列表
文章教程搜索
div+css推荐教程
- .div+css布局视频教程(21视频教程
- .DIVCSS布局实例：DIV CSS新闻列表
- .{WEB标准}用Css来制作一个更漂亮
- .{WEB标准}推荐： CSS样式表设计经
- .{WEB标准}CSS实现当前页的滑动门
- .{WEB标准}alt属性和title属性
- .{WEB标准}w3c技术架构介绍
- .{WEB标准}web标准概念入门
- .{XHTML}HTML表格标记教程(38):表
- .{XHTML}HTML表格标记教程(37):表
- .{CSS}学习CSS制作网页总结的一些
- .{CSS}写给刚刚接触web标准的新人
- .{CSS}display:inline及与float:
- .{CSS}CSS代码结构初探：根基的建
- .{CSS}CSS提高网页的维护更新效率
- .DOV CSS表单：超炫的单选框与复选
- .用背景图片实现CSS柱状图表一例
- .XHTMLCSS网页布局中ID与class的
- .DIVCSS教程：判定用户浏览器及分
- .如何制作可控制显示或隐藏的伸缩
- .用CSS控制输入框input样式，悬停
- .如何实现多风格选择样式实时切换
- .段落前面空两个字，不使用空格。怎
- .border与list缩写的时候应该注重
- .CSS对文字溢出时的自动隐藏处理
- .Div CSS三列布局最先显示中列的
- .DIV CSS布局概述及初步入门
- .在WEB标准中嵌入Flash的最佳方法
- .Div CSS布局网站设计的优点！
div+css热门教程
- .CSS教程:链接外虚线框的设定hid
- .2012年做的不错的CSS网站分享(5
- .2012年做的不错的CSS网站分享(4
- .2012年做的不错的CSS网站分享(3
- .2012年做的不错的CSS网站分享(2
- .2012年做的不错的CSS网站分享(1
- .CSS教程：CSS3 Transform的persp
- .CSS教程：CSS3 Transform的persp
- .CSS教程:CSS变换(transition)
- .CSS教程：初学者使用div和css误区
- .Div+Css教程：CSS开发工具介绍（3
- .Div+Css教程：CSS开发工具介绍（2
- .Div+Css教程：CSS开发工具介绍（1
- .Div+Css教程：display:none与vis
- .CSS教程：背景图像属性backgroun
- .CSS教程：CSS宽度的计算
- .css教程：实现图片透明度链接效果
- .css教程：position属性介绍
- .CSS教程：解决商城商品图片不显示
- .CSS教程：淘宝网导航交互的小三角
- .CSS教程：圆角代码实现案例
- .CSS教程：如何消除inline-block元
- .CSS教程：如何消除inline-block元
- .CSS教程：什么是inline-block元素
- .CSS教程：腾讯QQ对话框抖动效果模
- .CSS教程：百度首页模拟代码
- .CSS教程:预处理器的Sass和less进
- .CSS教程:CSS预处理器的介绍
- .CSS教程:制作网页变色按钮
- .CSS教程：transform属性介绍
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
关于我们 | 教程购买 | 广告刊登 | 网站地图 |湖北继续教育网 |
QQ：2693987339(点击联系)购买教程光盘地址：湖北省武汉市曹家湾32号501室 电话：027－86646545 15972130058--教程购买问题汇总
21视频教程网专业的网站开发视频教程学习网站
ICP备案号：鄂ICP备14009716号-13 公安备案号：42011102002974
:
