HTML/CSS——float制作页面DEMO
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS——float制作页面DEMO
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果：?
?
代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>float_page</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}img{display: block;}a{text-decoration: none;color:aquamarine}h1,h2,h3{font-size: 16px;}.l{float:left;}.r{float:right;}.claer:after{content:"";display: block;clear: both;}#main{width: 366px;margin: 20px auto;}#main .title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;background:aqua ;}#main ul{overflow: hidden;margin-top: 13px;}#main li{margin-bottom: 22px;}#main .pic{width: 99px;border: 1px solid #c8c4d3;margin-left: 5px;}#main .pic img{margin: 2px;width: 100%;height: 100%;}#main .content{width: 240px;font-size: 12px;margin-left: 13px;}#main .content h2{line-height: 24px;}#main .content p{line-height: 20px;}</style> </head> <body><div id="main"><h2 class="title">測試標題</h2><ul><li class="clear"><div class="l pic"><a href="#"><img src="./image/1.png" alt=""></a></div><div class="l content"><h2>測試標題H2</h2><p>測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落<a href="#">[詳情]</a></p></div></li><li class="clear"><div class="l pic"><a href="#"><img src="./image/1.png" alt=""></a></div><div class="l content"><h2>測試標題H2</h2><p>測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落<a href="#">[詳情]</a></p></div></li><li class="clear"><div class="l pic"><a href="#"><img src="./image/1.png" alt=""></a></div><div class="l content"><h2>測試標題H2</h2><p>測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落測試段落<a href="#">[詳情]</a></p></div></li></ul></div> </body> </html>?
總結
以上是生活随笔為你收集整理的HTML/CSS——float制作页面DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2019牛客暑期多校训练营（第六场）
- 下一篇： 2017年html5行业报告,云适配发布