先贴代码:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>0322css做一张信息表</title> </head> <style type="text/css"> *{margin:0;padding:0;} .main{width:600px;margin:0 auto;} ul{background: #dfe4e6} ul:after{content: "";display:block;clear: both;} .maintitle{text-align: center;margin: 20px 0;} .newslist{width: 100%} ul li{height:150px;padding:10px;list-style: none;background: rgba(255,255,255,0.5);margin: 10px 0} .newslist img{width:200px;height:150px;float: left;border-radius:5%;box-shadow: 5px 5px 5px #333} .newslist .content{float: left;width:360px;margin-left: 20px} .newslist .title{margin:10px 0;} .newslist .disc p{text-indent: 2em} </style> <body> <div class="main"> <div class="maintitle"> <h2>DIV+CSS信息表</h2> </div> <div class="newslist"> <ul> <li> <img src="images/1.jpg"> <div class="content"> <div class="title"> <h3>如果不能喝奶茶,我要这皮囊还有何用?</h3> </div> <div class="disc"> <p>时代姐妹花一起逛街,可以不买衣服,但不能不买奶茶;去电影院可以不吃爆米花,但不能不买奶茶;减肥的时候可以放弃五花肉和小蛋糕,但不能不买奶茶。</p> </div> </div> </li> <li> <img src="images/1.jpg"> <div class="content"> <div class="title"> <h3>如果不能喝奶茶,我要这皮囊还有何用?</h3> </div> <div class="disc"> <p>时代姐妹花一起逛街,可以不买衣服,但不能不买奶茶;去电影院可以不吃爆米花,但不能不买奶茶;减肥的时候可以放弃五花肉和小蛋糕,但不能不买奶茶。</p> </div> </div> </li> <li> <img src="images/1.jpg"> <div class="content"> <div class="title"> <h3>如果不能喝奶茶,我要这皮囊还有何用?</h3> </div> <div class="disc"> <p>时代姐妹花一起逛街,可以不买衣服,但不能不买奶茶;去电影院可以不吃爆米花,但不能不买奶茶;减肥的时候可以放弃五花肉和小蛋糕,但不能不买奶茶。</p> </div> </div> </li> <li> <img src="images/1.jpg"> <div class="content"> <div class="title"> <h3>如果不能喝奶茶,我要这皮囊还有何用?</h3> </div> <div class="disc"> <p>时代姐妹花一起逛街,可以不买衣服,但不能不买奶茶;去电影院可以不吃爆米花,但不能不买奶茶;减肥的时候可以放弃五花肉和小蛋糕,但不能不买奶茶。</p> </div> </div> </li> </ul> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄下午传...