学习前端第四天
html–Day04 案例练习
一、练习1
效果图:
实现代码:
-
结构代码
<h3>腾讯新闻</h3> <ul> <li><a href="#" title="财经 |债转股17年后再度启动 如何演绎旧瓶装新酒?"> <span>财经 |</span> 债转股17年后再度启动 如何演绎旧瓶装新酒? </a></li> <li><a href="#"> <span>汽车 | </span>别克全新GL8:28.99万起 男子科目三考过后猝死 </a></li> <li><a href="#"> <span>财经 |</span> 债转股17年后再度启动 如何演绎旧瓶装新酒? </a></li> <li><a href="#"> <span>热点 |</span> 广告:新浪签到拿好礼 广告:精选新闻app </a></li> <li><a href="#"> <span>关注 | </span>广告:教育公益APP 广告:指尖上娱乐圈 </a></li> </ul> </div>
-
css样式
*{ margin:0; padding:0; } body{ background:#ccc; font-size:12px; } a{ text-decoration:none; color:#06c; } div{ width:350px; /* height:200px; */ margin:50px auto; background:#fff; padding-bottom:10px; } h3{ background:#ddd; /* width:350px; */ /* padding:3px 0 3px 16px; */ /* padding-left:16px; */ text-indent:16px;/*首行缩进*/ line-height:30px;/*行高*/ border:1px solid #ccc; color:#f60; margin-bottom:10px; } li{ list-style:none; padding-left:20px; line-height:30px; } span{ color:#f60; }
二丶练习2
效果图:
实现代码:
-
结构代码
<div class="box"> <ul> <li> <div class="text"> <a href="#">大家电年度盛典</a> <p>疯抢300元优惠券</p> </div> <img src="demo1/1.jpg" width="150" alt="" /> </li> <li> <div class="text"> <a href="#">冬季孕妇毛衣专场</a> <p>时尚潮流温暖舒适</p> </div> <img src="demo1/2.jpg" width="150" alt="" /> </li> <li> <div class="text"> <a href="#">乔丹童鞋跑鞋</a> <p>释放双脚跑起来</p> </div> <img src="demo1/3.jpg" width="150" alt="" /> </li> <li> <div class="text"> <a href="#">双12整车特卖啦</a> <p>贷款买车24期0利率</p> </div> <img src="demo1/4.jpg" width="150" alt="" /> </li> <li> <div class="text"> <a href="#">品牌岁末疯抢</a> <p>分期免息</p> </div> <img src="demo1/5.jpg" width="150" alt="" /> </li> </ul> </div>
-
css样式
*{ margin:0; padding:0; } body{ background:#eee; } .box{ width:1200px; height:221px; background:#eee; margin:50px auto; } li{ display:inline-block; text-align:right; list-style:none; width:211px; height:221px; background:#fff; padding:15px 0 0 15px; } .text{ text-align:left; } a{ text-decoration:none; color:#000; } p{ color:#3f6; }
三丶练习3
效果图
-
结构代码
<div class="box"> <div class="nav"> <a href="#">鲜城</a> <a href="#">美食</a> <a href="#">休闲</a> </div> <div class="img"> <img src="demo2/food.png" width="100%" alt="" /> <p>美食| 藤椒红油烫出火辣成都味 橘洲美妙空间</p> <p>美食| 人气卤味店的秘制羊肉火锅 涮串铁板烧</p> <p>休闲| 冲上云霄品世界各地美酒 吃吃喝喝</p> </div> </div>
-
css样式
*{ margin:0; padding:0; } body{ background:#eee; } a{ text-decoration:none; color:#000; margin:0 5px; } .box{ width:360px; height:360px; background:#fff; margin:50px auto; } .box .nav{ height:40px; line-height:40px; background:#ddd; } .box .img{ padding:10px; } p{ font-size:14px; color:#666; line-height:25px; }