【小练习05】HTML+CSS--淘宝商铺小页面
生活随笔
收集整理的這篇文章主要介紹了
【小练习05】HTML+CSS--淘宝商铺小页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要求實現如下效果圖：
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{background: #f7f7f7;}h2,h3,p{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;}#wrap{width: 260px;padding-top: 4px;}#wrap h2{height: 20px;background: url(images/title_img.gif) no-repeat;text-indent: 99px;font: bold 12px/17px '宋體';color: #6c6c6c;margin-bottom: 14px;}.box{background: #fff;border: 1px solid #e8e8e8;}.list{padding: 12px 14px 16px 14px;border-bottom: 1px solid #e8e8e8;}.list h3{font: bold 12px/23px '宋體';color: #444444;}.list p{font: 12px/23px '宋體';}.list p a{color: #6c6c6c;padding: 0 6px 0 10px;border-right: 1px solid #eaeaea;}.list p a.noPadding{padding-left: 0;}.list p a.noBorder{border-right: none;}.list ul{font-size: 0;padding-top: 6px;}.list ul li{display: inline-block;}.center{margin: 0 10px;}.look{height: 33px;padding-top: 4px;background: #e9e9e9 url(images/ico_02.gif) no-repeat 82px 12px;text-indent: 112px;}.look a{font: 12px/33px '宋體';color: #6c6c6c;/*position: relative;top: 3px;*/}</style></head><body><div id="wrap"><h2>你可能喜歡的店鋪</h2><div class="box"><div class="list"><h3>素色空間</h3><p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">雙魚座</a></p><ul><li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li><li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li><li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li></ul></div><div class="list"><h3>素色空間</h3><p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">雙魚座</a></p><ul><li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li><li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li><li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li></ul></div><div class="list"><h3>素色空間</h3><p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">雙魚座</a></p><ul><li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li><li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li><li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li></ul></div><div class="list"><h3>素色空間</h3><p><a href="#" class="noPadding">是正品</a><a href="#">漂亮</a><a href="#">很漂亮</a><a href="#" class="noBorder">雙魚座</a></p><ul><li><a href="#"><img src="images/img_02.jpg" alt="" /></a></li><li class="center"><a href="#"><img src="images/img_03.jpg" alt="" /></a></li><li><a href="#"><img src="images/img_04.jpg" alt="" /></a></li></ul></div><div class="look"><a href="#">換一組看看</a></div></div></div></body> </html>源碼地址：http://download.csdn.net/detail/baidu_37107022/9840917
總結
以上是生活随笔為你收集整理的【小练习05】HTML+CSS--淘宝商铺小页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小练习04】HTML+CSS--医药健
- 下一篇： 【小练习06】HTML+CSS--电影公