CSS 导航栏+图片廊 （6）

导航栏

垂直导航栏

/*导航栏*/
		.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>