8.综合案例：爱宠知识

最新推荐文章于 2024-07-11 17:20:26 发布

neilro

最新推荐文章于 2024-07-11 17:20:26 发布

阅读量2.6k

点赞数 2

分类专栏： Div+Css 文章标签：综合列表

本文链接：https://blog.csdn.net/neilro/article/details/79103433

版权

Div+Css 专栏收录该内容

22 篇文章 2 订阅

订阅专栏

目标：将效果图转换为html界面。

截图：

素材：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body,ul,li{
		/*清除默认的内外边距属性*/
		margin: 0;
		padding: 0;
	}
	ul{
		background-color: #fff;
		height: 279px;
		width: 210px;
		margin-left: 10px;
		/*爱宠知识白色部分完整宽度为240px,其中两边的内边距为15x2=30px*/
		padding: 0 15px;
	}
	li{
		height: 30px;
		/*下边虚线*/
		border-bottom: 1px dashed #666;
		line-height: 30px;
		/*图标*/
		background: url("images/tb.gif") no-repeat left center;
		/*图标和文字的位置*/
		padding-left: 16px;
		/*去除列表的默认样式*/
		list-style: none;

	}
	li a{
		text-decoration: none;
	}
	 .box{
	 	/*定义整体界面宽高*/
	 	width: 260px;
	 	height: 327px;
	 	/*边框*/
	 	border: 1px solid #009900;
	 	/*盒子居中,div块相对整体body块居中*/
	 	margin: 10px auto;
	 	/*插入背景图片*/
	 	background: url("images/bg.gif");
	 }
	 .box .title{
	 	height: 23px;
	 	/*标题的外边距设置*/
	 	margin:10px 0 5px 10px ;
	 	/*爱宠知识左边的绿色小边:左边框*/
	 	border-left: 4px solid #C9E143;
	 	font: 16px/23px 微软雅黑;
	 	color: #fff;
	 	/*内边距缩进*/
	 	padding-left: 11px;

	 }
	</style>
</head>
<body>
	<div class="box">
		<div class="title">爱宠知识</div>
		<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>
</body>
</html>

neilro

关注

2
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
8.综合案例：爱宠知识

目标：将效果图转换为html界面。截图：素材：代码： Document body,ul,li{ /*清除默认的内外边距属性*/ margin: 0; padding: 0; } ul{ background-color: #fff; height: 279px; width: 210px; margin-left: 10px; /*爱宠知识白色部
复制链接

扫一扫