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

相关推荐
ssshooter23 分钟前
VSCode 自带的 TS 版本可能跟项目TS 版本不一样
前端·面试·typescript
Jerry1 小时前
Jetpack Compose 中的状态
前端
dae bal2 小时前
关于RSA和AES加密
前端·vue.js
柳杉2 小时前
使用three.js搭建3d隧道监测-2
前端·javascript·数据可视化
lynn8570_blog2 小时前
低端设备加载webp ANR
前端·算法
LKAI.2 小时前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy3 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
前端工作日常3 小时前
我对eslint的进一步学习
前端·eslint
禁止摆烂_才浅4 小时前
VsCode 概览尺、装订线、代码块高亮设置
前端·visual studio code
程序员猫哥4 小时前
vue跳转页面的几种方法(推荐)
前端