动物相册——HTML效果

2022-01-21 19:31:56 阅读：174 来源： 互联网

标签：相册效果 solid padding 1px HTML nbsp background border

下载地址（完整编码+素材）

完整编码（无素材）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS相册v3.0</title>
<style>
/*初始化几个要用的标签*/
*{ padding:0; margin:0; list-style:none;}
body{ line-height:1.7; font-size:12px; font-family:Verdana, Arial, "宋体"; margin:10px; color:#6F9C21}
h1,h3{font-size:14px; font-family:"黑体"; color:#517317;}
h1{line-height:45px; background:#84B726; padding-left:14px; color:#517317;}
h2{font-size:12px;color:#fff; text-align:center;background:#95CC2D; border-bottom:1px solid #84B726;}
img{display:block;}

/*全局链接样式*/
a:link,a:visited{color:#6D9C1F;text-decoration:none;}
a:hover,a:active{color:#fff;text-decoration:none;}

/*常用的三个样式*/
.l{  float:left;}
.r{ float:right;  }
.c{ clear:both; overflow:hidden; height:0;}

/*全局框架用*/
#pic{ background:#B5DF63; width:600px; height:450px; border-left:3px solid #3B8C54; border-right:3px solid #8CC128; 

overflow:hidden}
.main{width:365px; }
.sidebar{width:210px; float:right;height:360px;overflow:hidden}
.pager{clear:both;}

/*第一页的特殊处理*/
#yan{ padding:160px 0 0 50px;}
#kai{background:#3B8C54; width:150px;margin:160px 0 0 70px; padding-left:10px; overflow:hidden}
#kai img{ display:block; border-left:2px solid #B5DF63; padding:20px;}

/*相册正式开始*/
.pic{height:450px;}
.main li { text-align:center; float:left; width:120px; margin-top:10px;}
.main li span{padding:5px;display:block;  margin:auto}
.main li img{ width:90px; height:65px; display:block;border:1px solid #A5D845;; padding:5px; margin:0 auto; 

background:#FFFFFF}
 /*照片上的链接样式*/
 a:link span,a:visited span{border:1px solid #B5DF63; background:#B5DF63}
 a:hover span,a:active span{ background:#95CC2D; border:1px solid #84B726; border-top:1px solid #FFF;border-left:1px 

solid #FFF}

.sidebar img{padding:5px;}
.sidebar p{padding:5px 15px;}
.sidebar span{background:#95CC2D;display:block;border-top:1px solid #fff;}
.sidebar li{ height:600px;}
.sidebar{ border:1px solid #A5D845; border-top:none;  padding:0 1px 1px 1px;background:#Fff; margin:15px 5px; }

</style>
</head>
<body>
<div id="info">
  <ul id="pic">
   
	<!--第一 页 -->
    <li class="pic"><a name="a01" id="a01"></a>
      <div class="l main">
        <div id="yan">
          <h3>往事留下的美好</h3>
          <p>随着扉页的开启，回忆与陌生同时浸近你<br />
            当世界上所有的寂寞袭向你<br />
            惟有那曾经的岁月不会<br />
            沉浸在曾经的岁月<br />
            波澜的心会告诉你<br />
            往事留下的美好 </p>
        </div>
      </div>
      <div class="r">
        <div id="kai"><a href="#a02">点击进入相册</a></div>
      </div>
      <div class="c"></div>
    </li>


	<!--第二页 -->
    <li class="pic"><a name="a02" id="a02"></a>
      <h1>往事留下的美好</h1>
      <div class="l main">
        <ul>
          <li><a href="#b01"><span><img src="./img/001.jpg" alt="大象" />大象

</span></a></li>
          <li><a href="#b02"><span><img src="./img/002.jpg" alt="野马" />野马

</span></a></li>
          <li><a href="#b03"><span><img src="./img/003.jpg" alt="狐假虎威" />狐假虎威

</span></a></li>
          <li><a href="#b04"><span><img src="./img/004.jpg" alt="鱼肝油" />鱼肝油

</span></a></li>
          <li><a href="#b05"><span><img src="./img/005.jpg" alt="鸟类" />鸟类

</span></a></li>
          <li><a href="#b06"><span><img src="./img/006.jpg" alt="小鸡和蛋" />小鸡和蛋

</span></a></li>
          <li><a href="#b07"><span><img src="./img/007.jpg" alt="一条小金鱼" />一条小

金鱼</span></a></li>
          <li><a href="#b08"><span><img src="./img/008.jpg" alt="彩蝶" />彩蝶

</span></a></li>
          <li><a href="#b09"><span><img src="./img/009.jpg" alt="小样吧" />小样吧

</span></a></li>
        </ul>
        <div class="pager">
          <p> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#a01"><font color="red" >关闭相册</font></a> 
		    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#a03"><font color="red" > 下一页</font></a></p>
        </div>
      </div>
      <div class="sidebar">
        <ul>
          <li><a name="b01" id="b01"></a><span> <img src="./img/001.jpg" alt="" />
            <h2>大象</h2>
            </span>
            <p>象肩高约2米，体重3～7吨。<br />
              头大，耳大如扇。<br />
              四肢粗大如圆柱,支持巨大身体,膝关节不能自由屈曲。<br />
              鼻长几与体长相等，呈圆筒状，伸屈自如；<br />
              鼻孔开口在末端，鼻尖有指状突起,能拣拾细物。 </p>
          </li>
          <li><a name="b02" id="b02"></a><span> <img src="./img/002.jpg" alt="" />
            <h2>野马</h2>
            </span>
            <p>又名普氏野马。栖草原、丘陵。<br />
              冬季群大、夏季群小，由一母马率领。<br />
              听觉和视觉敏锐，性情凶猛。<br />
              白天活动，体壮善跑，无固定栖息地。<br />
              吃植物，冬季挖取雪下枯草和苔藓充饥。</p>
          </li>
          <li><a name="b03" id="b03"></a><span> <img src="./img/003.jpg" alt="" />
            <h2>狐假虎威</h2>
            </span>
            <p>有一天,一只老虎正在深山老林里转悠,突然发现了一只狐狸,便迅速抓住了它,心想今天的午餐又可以美美地享受一顿了。 狐

狸生性狡猾,它知道今天被老虎逮住以后,前景一定不妙,于是就编出一个谎言,对老虎说:... </p>
          </li>
          <li><a name="b04" id="b04"></a><span> <img src="./img/004.jpg" alt="" />
            <h2>鱼肝油</h2>
            </span>
            <p>吃鱼肝油 吃鱼肝油可以预防、治疗佝偻病,这已是众所周知的事情。鱼肝油是强壮骨骼的营养物品,在一般人心目中,婴儿时

期经常服用鱼肝油已成为必不可少的东西。但是,鱼肝油也像其他营养品一样,有利也有弊。</p>
          </li>
          <li><a name="b05" id="b05"></a><span> <img src="./img/005.jpg" alt="" />
            <h2>鸟类</h2>
            </span>
            <p>全世界现有鸟类8千7百余种,我国有1183种。绝大多数营树栖生活。少数营地栖生活。水禽类在水中寻...今鸟亚纲包括白垩

纪以来的一些化石鸟类以及现存鸟类。 化石鸟类以黄昏鸟目和鱼鸟目为代表,它们的骨骼近似现代鸟类但上... </p>
          </li>
          <li><a name="b06" id="b06"></a><span> <img src="./img/006.jpg" alt="" />
            <h2>小鸡和蛋</h2>
            </span>
            <p>也许最早的鸡和蛋早就被吃了或孵成小鸡而没有留下任何我们可以找到的证据呢? 所以,以科学方法来解答,结果是:以目前的

科技还无法解答,也许永远无法解答,但肯定是存在一个答案的。 问题时,总是... </p>
          </li>
          <li><a name="b07" id="b07"></a><span> <img src="./img/007.jpg" alt="" />
            <h2>一条小金鱼</h2>
            </span>
            <p>但愿我就是一条小金鱼 有人告诉我鱼的记忆只有7秒,7秒之后它就什么都不记得了,所以小小的鱼缸它永远不会觉得无聊,因

为7秒一过它就什么都不记得了,小小的鱼缸又成了新的天地,我宁愿是一条鱼</p>
          </li>
          <li><a name="b08" id="b08"></a><span> <img src="./img/008.jpg" alt="" />
            <h2>彩蝶</h2>
            </span>
            <p>彩蝶属于蝴蝶兰的一种,为兰科。 寓意:纯洁幸福,吉祥如意;在日本及台湾作为新娘的手捧花,寓意“我爱你”。 蝴蝶兰属多

年生草本,原产马来西亚热带地区。</p>
          </li>
          <li><a name="b09" id="b09"></a><span> <img src="./img/009.jpg" alt="" />
            <h2>小样吧</h2>
            </span>
            <p>也许因为小样大都指最初的,小的东西,后来人们就把小样当作揶揄人的话了,一般北方人常说,我也经常听周围的北方人说:"

小样,新来的吧",呵呵,意思是说你还是新手,菜鸟,其实并没有什么恶意的哦:)</p>
          </li>
        </ul>
      </div>
    </li>
   <!--第三页 -->
  
	  <li class="pic"><a name="a03" id="a03"></a>
      <div class="l main">
      </div>
      <div class="r">
        <div id="kai"><a href="#a02">点击进入相册</a></div>
      </div>
      <div class="c"></div>
    </li>



  </ul>
</div>

</body>
</html>

标签：相册,效果,solid,padding,1px,HTML,nbsp,background,border
来源： https://blog.csdn.net/feng8403000/article/details/122627923

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动物相册——HTML效果

下载地址（完整编码+素材）

完整编码（无素材）