美化你的页面 看CSS的神奇
时间：2014-01-30 发布人：SHX 浏览次数：2219 评论：0
在排网页的时候，有时候注重细节是非常重要的，下面就介绍几个小特效和美化：
<input type="text" name="title" />
如果只是简单的写一些定义宽高的样式，这个文本框就显的不够美观。但是我们简单的加点东西就会变的特别精致(此样式为CSS3不支持IE)
input{background-color: white;
border-color: #CCC #E2E2E2 #E2E2E2 #CCC;
border-style: solid;
border-width: 1px;
box-shadow: 1px 2px 3px #F0F0F0 inset;
overflow: hidden;
padding: 10px 0 8px 8px;
vertical-align: middle;}是不是想要你的图片有种泛光了，下面结合JS和CSS3制作
我们先写JQ
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('li').hover(function(){
$(this).find('.i').stop().animate({'left':'100px'},500);
},function(){
$(this).find('.i').stop().animate({'left':'-90px'},500);
});
});
</script>在写CSS3
.i{position: absolute;
left: -90px;
top: 0;
width: 50%;
height: 100%;
background-image:
-webkit-linear-gradient(0deg, rgba(255, 255, 255, 0),
rgba(255, 255, 255, 0.5),
rgba(255, 255, 255, 0));
backg--round-color: red;
-webkit-transform: skewx(-25deg);
-webkit-transition: 0s;}
li{width:100px;
height:100px;
background:#000;
position:relative;
list-style:none;}最后写html
<li> <img src="product.png" width="100" height="100" /> <i class="i"></i> </li>
原理：先把光隐藏在<li>外，当鼠标经过的时候用JQ改变<i>标签的位置，从左至右移动。
最后介绍个最简单但很实用的CSS
position:fix;
用这个就能吧标签一直定在屏幕上，不会随滚动条的滚动而滚出去。
上一篇：PHP分页处理下一篇：周立波语录——老百姓的智慧（合集）上
