【小练习06】HTML+CSS--教学大讲堂
生活随笔
收集整理的這篇文章主要介紹了
【小练习06】HTML+CSS--教学大讲堂
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
要求實(shí)現(xiàn)如下效果圖：
代碼演示
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>h3,h4,p{margin: 0;}ul{margin: 0;padding: 0;list-style: none;}a{text-decoration: none;}img{vertical-align: middle;}.clearfix:after{content: '';display: block;clear: both;}body{background: #f1f1f1;}section{width: 980px;border: 1px solid #ddd;background: #fff url(images/section_bg.gif) repeat-x;}section h3{height: 54px;font: bold 16px/54px '宋體';color: #333;padding-left: 15px;margin-bottom: 3px;}.list1{padding-left: 39px;}.list1 li{width: 272px;height: 134px;float: left;}.space{margin: 0 43px;}.imgLink{float: left;}.imgLink img{padding: 1px;margin-right: 16px;border: 1px solid #c7c7c7;}.list1 li div{float: left;width: 157px;}.list1 li h4{height: 13px;line-height: 13px;margin-bottom: 5px;font-size:11px ;font-weight: normal;}.list1 li span,.list1 li p{font: 11px/22px '字體';display: block;}.list1 li p.btn{line-height: 20px;}.btn a{display: inline-block;width: 44px;height: 20px;margin-top: 8px;background: url(images/btn_01.gif);font-size: 0;}.btn a.preview{background: url(images/btn_02.gif);margin-left: 9px;}.list2{margin: 30px 0 21px 0;padding-left: 39px;}.list2 li{width: 124px;float: left;margin-right: 32px;}.list2 li img{padding: 1px;border: 1px solid #c7c7c7;}.list2 h4{height: 25px;line-height: 25px;margin-top: 10px;}.list2 h4 a{font-size: 11px;color: #0b57ab;}.list2 p{font: 11px/23px "宋體";}.list2 p a{color: #0b57ab;}</style></head><body><section><h3>本周主打</h3><ul class="list1 clearfix"><li><a href="#" class="imgLink"><img src="images/img_02.jpg"/></a><div><h4><a href="#">妙用性格</a></h4><span>講師：<a href="#">張?jiān)?lt;/a></span><span>技術(shù)：花12集</span><span>類型：生活</span><p>性格 工頂替枯奇才標(biāo)有頂替</p><p class="btn"><a href="#">購(gòu)買(mǎi)</a><a href="#" class="preview">預(yù)覽</a></p></div></li><li class="space"><a href="#" class="imgLink"><img src="images/img_02.jpg"/></a><div><h4><a href="#">妙用性格</a></h4><span>講師：<a href="#">張?jiān)?lt;/a></span><span>技術(shù)：花12集</span><span>類型：生活</span><p>性格 工頂替枯奇才標(biāo)有頂替</p><p class="btn"><a href="#">購(gòu)買(mǎi)</a><a href="#" class="preview">預(yù)覽</a></p></div></li><li><a href="#" class="imgLink"><img src="images/img_02.jpg"/></a><div><h4><a href="#">妙用性格</a></h4><span>講師：<a href="#">張?jiān)?lt;/a></span><span>技術(shù)：花12集</span><span>類型：生活</span><p>性格 工頂替枯奇才標(biāo)有頂替</p><p class="btn"><a href="#">購(gòu)買(mǎi)</a><a href="#" class="preview">預(yù)覽</a></p></div></li></ul><ul class="list2 clearfix"><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li><li><a href="#"><img src="images/img_03.jpg"/></a><h4><a href="#">進(jìn)水屆枯城</a></h4><p>講師：<a href="#">張?jiān)?lt;/a></p><p>類型：生活</p></li></ul></section></body> </html>源碼地址：http://download.csdn.net/detail/baidu_37107022/9840940
總結(jié)
以上是生活随笔為你收集整理的【小练习06】HTML+CSS--教学大讲堂的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【小练习06】HTML+CSS--电影公
- 下一篇： WEB前端：浏览器（IE+Chrome+