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