【小练习06】HTML+CSS--电影公告
生活随笔
收集整理的這篇文章主要介紹了
【小练习06】HTML+CSS--电影公告
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要求實現如下效果圖：
代碼演示
<!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;}.clearfix:after{content: '';display: block;clear: both;}section{width: 310px;}section h3{height: 28px;background: url(images/head_bg.gif);font: bold 12px/28px '宋體';color: #4c5354;padding-left: 38px;}.imgWrap{height: 131px;margin: 14px 0;}.imgLink{float: left;}.imgWrap img{padding: 2px;margin-right: 12px;border: 1px solid #c8c4d3;}.imgWrap div{float: left;width: 176px;}.imgWrap div h4{height: 27px;line-height: 27px;}.imgWrap div h4 a{font-size: 12px;color: #333;}.imgWrap div span,.imgWrap div p{font: 12px/20px "宋體";display: block;color: #666;}section li{height: 22px;font: 12px/22px "宋體";background: url(images/ico_01.gif) no-repeat 17px 9px;padding: 0 18px 0 31px;}section li a{color: #333;}section li span{color: #888;float: right;}</style></head><body><!--劃分結構1、看邊框2、看距離3、看顏色塊4、看背景圖片結構書寫的順序：從上到下，從左往右h1 首先，一個頁面中只能有一個h1標簽，整個頁面中找到大標題。如果沒有的話，可以選擇給logo浮動1、如果想讓兩個元素在一行中顯示，就用浮動2、用完了必需要清，給父級加清除浮動一行中所有的元素都浮動了，如果換行的話，那就是父級的寬度不夠了--><section><h3>明星薦片</h3><div class="imgWrap clearfix"><a href="#" class="imgLink"><img src="images/img_01.jpg" alt="" /></a><div><h4><a href="#">讓子彈飛一會</a></h4><span>導演：姜文</span><span>主演：姜文 姜文 姜文</span><p>點評：我最近喜歡的要算我最近喜歡的要算我最近喜歡的要</p></div></div><ul><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li><li><a href="#">好的故事引人深思故事引</a><span>阿朵</span></li></ul></section></body> </html>源碼地址：http://download.csdn.net/detail/baidu_37107022/9840935
總結
以上是生活随笔為你收集整理的【小练习06】HTML+CSS--电影公告的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【小练习05】HTML+CSS--淘宝商
- 下一篇： 【小练习06】HTML+CSS--教学大