盒子案例

最新推荐文章于 2024-03-10 22:45:15 发布

时松

最新推荐文章于 2024-03-10 22:45:15 发布

阅读量210

点赞数

CC 4.0 BY-SA版权

分类专栏：基础文章标签：盒子案例

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/97903412

基础专栏收录该内容

79 篇文章

订阅专栏

本文深入探讨了CSS盒子模型，包括内容区域、边距、边框和填充的概念，通过实例解析了它们如何影响元素的布局。同时，分享了如何在实际项目中应用盒子模型进行精确布局的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {    /*清空默认的内外边距  几乎是我们写css必须要写的 */
			margin: 0;
			padding: 0;
		}
		ul {
			list-style: none;   /*取消列表自带的小点 默认的列表样式*/
		}
		.searchpic {
			width: 238px;
			height: 294px;
			border: 1px solid #d9e0ee;
			border-top: 3px solid #ff8400;  /* 代码从上往下依次执行  所以这句话要放在border的下面*/
			margin: 100px; 
		}
		.searchpic h3 {
			height: 35px;
			line-height: 35px;   /*让行高等于高度，可以让文字垂直居中*/
			border-bottom: 1px solid #d9e0ee;
			font-size: 16px;
			font-weight: normal;  /*让粗体不变粗*/
			padding-left: 12px;   /*因为这个h3没有给宽度，继承父亲的宽度padd就不会撑开盒子了*/
		}
		.searchpic img {
			margin: 7px 0 0 8px;  /*上右下左*/
		}
		.searchpic ul li a {
			font-size: 12px;
			color: #666;
			text-decoration: none;  /* 取消下划线*/ 
		}
		.searchpic ul {
			margin-left: 8px;
		}
		.searchpic ul li {
			padding-left: 10px;
			height: 26px;
			line-height: 26px;
			background: url(1.png) no-repeat left center;  /*背景设置*/   /*水平 垂直*/
		}
		.searchpic ul li a:hover {
			text-decoration: underline;  /*添加下划线*/
			color: #ff8400;
		}
	</style>
</head>
<body>
	<div class="searchpic">
		<h3>搜索趣图</h3>
		<img src="1.jpg" height="160" width="218" alt="">
		<ul>
				<li><a href="#">魔兽世界新图</a></li>
				<li><a href="#">魔兽世界新图</a></li>
				<li><a href="#">魔兽世界新图</a></li>
			</ul>	
	</div>
</body>
</html>