学习前端第四天

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;
  		}