前端边框练习

最新推荐文章于 2024-05-12 14:29:20 发布

夏天吹雪

最新推荐文章于 2024-05-12 14:29:20 发布

阅读量261

点赞数

分类专栏：随手记

随手记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

边距练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*设置外边距 先把外边框置零*/
			* {
				margin: 0;
				padding: 0;
			}
			.box{
				margin: 10px auto ; /*设置顶边距 auto*/
				width:260px ;
				height: 327px;
				background-image: url(bg.gif);
				/*background: url(bg.gif);*/
				border: solid 1px #009900;  /*加边框线*/
			}
			.title {
				height: 23px;
				margin-top: 10px;  /*顶部边距*/
				margin-left: 10px;  /*设置左边距 整块到外部的距离*/
				border-left: 4px solid #C9E143; /*左边画实线*/
				padding-left: 11px;  /*内边距字体到实线的距离*/
				line-height: 23px;  /*行高 包括字体和上下的距离一起的总和*/
				font:  16px "微软雅黑";
				color: #FFFFFF;
			}
			ul li {
				list-style: none; /*去掉无序列表样式 实心圆，空心圆等*/
			}
			.list {
				width: 240px;
				height:280px;
				background-color: white;
				margin-left: 10px;
				margin-top: 5px; /*外边距顶部*/
				/*overflow: hidden;*/
			}
			
			.list ul {
				margin-left: 10px;
				margin-right: 10px;
			}
			.list li {
				height: 30px;
				border-bottom: 1px dashed #666666;
				line-height: 30px;
				background: url(tb.gif) no-repeat left center;  /*no-repeat 平铺  left center 靠左居中*/
				padding-left: 15px;
			}
			a {
				text-decoration: none; /*去掉A标签样式*/
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="title">爱宠知识</div>
			<div class="list">
				<ul >
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
					<li><a href="#">养狗比养猫更健康</a></li>
				</ul>	
			</div>
		</div>
		
	</body>
</html>

夏天吹雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端边框练习

边距练习&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; /*设置外边距先把外边框置零*/ * { margin: 0; padding: 0;
复制链接

扫一扫