DIV教程之DIV+CSS相册制造教程

只看该作者 · 发表于 2015-1-16 00:14:25

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

结构清晰，容易被搜索引擎搜索到，天生优化了seo

之前用Flash作过一个FLASH相册―收集版这个效果有点学这个的意义。
为了一行了的代码，我已花了两个早晨来想了，了局上去就是感到IE有点反常。用一般的设法往作，FIREFOX等扫瞄器都没有成绩，只要IE不成以。只要加那末一行渣滓代码，IE才干一般显现。
以下就是效果：

登录/注册后可看大图

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>testdiv</title>
<style>
body{margin:0;padding:0;font-size:12px;background:#333333;line-height:1.7;font-family:Verdana,"宋体";overflow:hidden}
#info{width:600px;background:#666666;margin-left:auto;margin-right:auto;text-align:center;border:1pxsolid#FFFFFF;height:450px;margin-top:20px;}
h3{margin:30px000;color:#CC0000;font-size:12px;color:#FFF}
span{visibility:hidden;position:absolute;overflow:hidden;}
ul,li{list-style:none;margin:0;padding:0;}
a:active,a:hover{cursor:pointer}
a:hoverspan,a:activespan{position:absolute;top:90px;z-index:20px;visibility:visible;margin-left:-500px;}
#infoimg{width:400px;height:280px;border:7pxsolid#FFFFFF}
#zs{height:340px;overflow:auto;width:140px;float:right;margin-top:20px;margin-bottom:50px;}
.z{width:80px;height:56px;display:block;border:1pxsolid#FFFFFF;margin:4px04px25px;color:#FFF}
.b1{background:url(/articleimg/2006/07/3784/b1.jpg)}
.b2{background:url(/articleimg/2006/07/3784/b2.jpg)}
.b3{background:url(/articleimg/2006/07/3784/b3.jpg)}
.b4{background:url(/articleimg/2006/07/3784/b4.jpg)}
.b5{background:url(/articleimg/2006/07/3784/b5.jpg)}
.b6{background:url(/articleimg/2006/07/3784/b6.jpg)}
</style>
</head>
<body>
<divid="info">
<h3>子鼠的CSS相册</h3>
<divid="zs">
<ul>
<li><ahref="http://www.blueidea.com"class="b1z"target="_blank"title="照片1"><span><span><span><span>
<h3>子鼠的CSS相册</h3>
<divid="zs">
<ul>
<li><ahref="http://www.blueidea.com"class="b1z"target="_blank"title="照片1"><span><span><span><span><br/>
这是照片2<br/>
www.blueidea.com</span></a></li>
</ul>
</div>
</div>

</p>
更好的控制页面布局。不用多说。

只看该作者 · 发表于 2015-1-18 05:45:17

直接用代码建立链接，如：可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-1-25 18:01:06

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

只看该作者 · 发表于 2015-2-3 12:56:52

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

只看该作者 · 发表于 2015-2-9 03:34:21

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

只看该作者 · 发表于 2015-2-26 20:49:30

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-3-8 17:58:21

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-3-16 10:45:12

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

仓酷云 · 发表于 2015-3-22 22:59:46

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之DIV+CSS相册制造教程

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子