导航栏+图片廊

• 导航栏
• • 垂直导航栏
  • 水平导航栏
• 图片廊
• • 普通版
  • 设置图片透明度
  • 设置透明文本框

导航栏

垂直导航栏

/*导航栏*/.part1 {list-style-type: none;margin: 0;padding: 0;}li>a:link,li>a:visited {display: block;font-weight: bold;color: white;background-color: green;width: 120px;text-align: center;padding: 4px;text-decoration: none;text-transform: uppercase;}li>a:hover,li>a:active {background-color: #7A991A;}
------------------------------------
<h3>垂直导航栏</h3>
<ul class="part1"><li ><a href="#">主页</a></li><li ><a href="#">新闻</a></li><li ><a href="#">联系</a></li><li ><a href="#">关于</a></li>
</ul>

水平导航栏

		li>a:link,li>a:visited {display: block;font-weight: bold;color: white;background-color: green;width: 120px;text-align: center;padding: 4px;text-decoration: none;text-transform: uppercase;}li>a:hover,li>a:active {background-color: #7A991A;}.part2 {list-style-type: none;margin: 0;padding: 0;overflow: hidden;}.part3 {float: left;}
-----------------------------
<h3>水平导航栏</h3>
<ul class="part2"><li class="part3"><a href="#">主页</a></li><li class="part3"><a href="#">新闻</a></li><li class="part3"><a href="#">联系</a></li><li class="part3"><a href="#">关于</a></li>
</ul>

图片廊

普通版

点击后显示大图片：

/*图片廊*/}div.part4 {margin: 5px;border: 1px solid #ccc;float: left;width: 180px;}div.part4:hover {border: 1px solid #777;}div.part4 img {width: 100%;height: 180px;}
-------------------------------------
<div ><div class="part4"><a target="_blank" href="1.png"><img src="1.png" alt="图片" width="50px" height="50px"></a></div><div class="part4"><a target="_blank" href="2.png"><img src="2.png" alt="图片" width="50px" height="50px"></a></div><div class="part4"><a target="_blank" href="1.png"><img src="1.png" alt="图片" width="50px" height="50px"></a></div><div class="part4"><a target="_blank" href="2.png"><img src="2.png" alt="图片" width="50px" height="50px"></a></div><div class="part4"><a target="_blank" href="1.png"><img src="1.png" alt="图片" width="50px" height="50px"></a></div>
</div>

设置图片透明度

点击后变清晰

/*图片透明度*/p>img {opacity: 0.4;filter: alpha(opacity=40);}p>img:hover {opacity: 1.0;filter: alpha(opacity=100);}
-------------------------------------
<h3>设置图片透明度:点击后变清晰</h3>
<p><img src="1.png" width="180px" height="180px" alt="图片"><img src="2.png" width="180px" height="180px" alt="图片">
</p>

设置透明文本框

/*透明文本框*/div.part5 {width: 500px;height: 250px;background: url(2.png) repeat;border: 2px solid black;}div.part6 {width: 400px;height: 180px;margin: 30px 50px;background-color: #ffffff;border: 1px solid black;opacity: 0.6;filter: alpha(opacity=60);}div.part6 p {margin: 30px 40px;font-weight: bold;color: #000000;}
------------------------------------
<h3>图片作为背景，设置透明文本框</h3>
<div class="part5"><div class="part6"><p>我是文本我在透明的文本框中。</p></div>
</div>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！