先来看下效果图,在很多网站中分类属性会碰见,主要就是鼠标放上去会改变属性(文字、图片、颜色大小等等)
以下是HTML代码,内容简单,就是几个div盒子,加上图片设置大小即可
<div id="content"> <div class="box"> <div class="left"> <img src="images/demo1/1.jpg"/> </div> <div class="right"> <h3 class="yellow">AmyRoiland</h3> <p class="yellow">[AmyRoiland]美国洛杉矶 风格复古又新潮,总能在清新、性感和亲切中相互切换。</p> </div> </div> <div class="box"> <div class="left"> <img src="images/demo1/2.jpg"/> </div> <div class="right"> <h3 class="yellow">Dali Bille</h3> <p class="yellow">[Dali Bille]英国时尚美女 性格温柔</p> </div> </div> <div class="box"> <div class="left"> <img src="images/demo1/3.jpg"/> </div> <div class="right"> <h3 class="yellow">LinWei</h3> <p class="yellow">[LinWei] 潭州时尚代码女神</p> </div> </div> <div class="box4"> <div class="left"> <img src="images/demo1/4.jpg"/> </div> <div class="right"> <h3 class="yellow">Nical Nilsen</h3> <p class="yellow">[Nical Nilsen] 挪威 风格清新甜美</p> </div> </div> </div>
下面内容为css样式,主要用到之前所说的hover改变样式和颜色
#content{ width:480px; height:630px; margin:50px auto; padding:5px; } .box{ width:362px; height:140px; border-bottom:1px solid #c6c6c6 ; margin:20px auto; } .box4 { width:362px; height:140px; margin:20px auto; } .left{ float:left; } img{ border:4px solid #aaa; width:100px; height:100px; border-radius:50%; } .right{ width:248px; margin:4px auto; float:right; } h3{margin:10px;} p { font-size:14px; text-indent:10px; } .yellow:hover{color:#c90;} img:hover{border:4px solid #c90;}
其实就一个知识点,就是选择器后面对应hover属性改变类的颜色
发表评论