目录

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,具体样式大小可以自己调

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
小付同学呀8 分钟前
前端快速入门——JavaScript变量、控制语句
开发语言·前端·javascript
BillKu2 小时前
js前端对时间进行格式处理
前端
小满zs3 小时前
React-router v7 第三章(路由)
前端·react.js
Kx…………6 小时前
Day2:前端项目uniapp壁纸实战
前端·学习·uni-app·实战·项目
gqkmiss7 小时前
Git Cherry-pick:核心命令、实践详解
前端·git·前端框架·commit·cherry-pick
不想上班只想要钱7 小时前
vue面试题
前端·javascript·vue.js
拉不动的猪8 小时前
简单回顾下es6增数组方法
前端·javascript·面试
Alkaid:8 小时前
解决Long类型前端精度丢失和正常传回后端问题
java·前端·javascript·vue.js
Code额8 小时前
Vue 框架组件间通信方式
前端·vue.js·前端框架