web前端小作业样式----实现商场公告

1，实现如题样式
2，实验代码
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商场公告</title>
		<style type="text/css">
			.outerbord{/* 包裹公告div */
				width: 425px;/* 父类文本框宽度 */
				height: 355px;/*父类文本框高度*/
				overflow: hidden;/* 超出部分隐藏 */
				border: 1px solid #ccc;/*父类边框*/
			    }
			.head{width: 455px;/* 包裹头部div */
			      height: 50px;
				  border: 1px solid #ccc;
				  overflow: hidden;
				  padding-top: 5px;
				  position: relative;/* 设置相对位置 */
				  right: 30px;
				  }
			.head ol li{/* 头部内容 */
				width: 100px;
				line-height: 1px;/*设置行高*/
				list-style: none;/* 去掉前导符 */
				font-size: 25px;/*字体大小*/
				padding-top: 7px;
			}
			
			
			.content{width: 450px;/* 包裹内容div */
			      height: 195px;
				  position: relative;
				  right: 30px;
				  }
				  
			.buttom{/* 包裹底部标签 */
				  width: 450px;
				  height: 50px;	
				  margin-top: 40px;/* 上边距 */
				  position: relative;
				  right: 30px;
				  }	  
			.content ol li{
				  font-size: 20px;
				  list-style: none;
			}
			.buttom ol li{
					width: 100px;
					height: 35px;
					float: left;
					list-style: none;
					font-size: 20px;	
					text-align: center;
					border: 1px solid #ccc;/* 设置边框 */
					padding-top: 5px;
					}		
			a{text-decoration:none;color: #000;}/* 去掉下划线和修改文字颜色 */
			a:hover{color: red;}/* 设置鼠标点到链接文字时,改变文字颜色 */
			.buttom ol li:hover{border-top:solid #FF0000;}设置鼠标点击到链接文字时,文字下方出现顶部边框
		</style>
	</head>
	<body>
		
		<div class="outerbord"><!-- 盒子-->
			<div class="head"><!-- 头部部分-->
                 <ol>
					 <li style="float: left;">商场公告</li>
					 <a href="#" style="float: right;""><li>更多&gt;</li></a>
				 </ol>				
			</div >
				
			<div class="content"><!-- content内容部分 -->
                   <ol>
					   <li><a href="#"><b>[特惠]</b> Apple Watch Sendes 2新品预约</a></li><br />
					   <li><a href="#"><b>[公告]</b> 浙江地区订单配送可能延迟</a></li><br />
					   <li><a href="#"><b>[特惠]</b> LG超级品牌日 满1000减100</a></li><br />
					   <li><a href="#"><b>[公告]</b> 贵州扶贫馆 高原香茗邀你赏</a></li><br />
					   <li><a href="#"><b>[特惠]</b> 好奇纸尿裤，99元任选3件</a></li><br />
				   </ol>
			</div>
			
			<div class="buttom"><!--底部标签-->
			    <ol>
					<li><a href="#" >话费</a></li>
					<li><a href="#">机票</a></li>
					<li><a href="#">电影票</a></li>
					<li><a href="#">游戏</a></li>
				</ol>
			</div>
		</div>
		
	</body>
</html>
3，实验结果
4，具体样式大小可以自己调