CSS笔记4-盒子模型案例

最新推荐文章于 2024-03-18 20:33:21 发布

原创最新推荐文章于 2024-03-18 20:33:21 发布 · 538 阅读

5 ·

CC 4.0 BY-SA版权

本文通过三个案例展示了如何使用HTML和CSS实现不同的网页布局效果，包括鼠标悬停效果、盒子模型列表以及图片列表等，同时介绍了如何设置背景图片、边框格式及响应鼠标事件。

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

案例一：
鼠标事件+背景图片+边框格式设置

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	li{
		list-style-type:none;
	}
	body,ul,li,h1{
		margin:0;
		padding:0;
	}
	div ul li a{
		text-decoration:none; /*去除超链接下划线*/
		color:black;
	}
	#GameList{
		/*background-image:url("img/1.png");*/
		border:solid #aabbcc;
		width:170px;
		padding-bottom:10px;
		background-color:lightgray;
		/*外边距居中显示*/
		margin:10px auto;
	}
	#GameList ul li a:hover{  /*hover表示当鼠标悬浮时产生的效果*/
		color:lightgray;
	}
    .title{
	/*	background-image:url("img/1.png") ;*/
		padding-left:25px;
		color:orange;
		line-height:80px; /*行间距*/
	}
	/*注意：不去重背景图片属性是background-image，去重只要background标签*/
	body{
		background:url("img/1.png") 200px 10px no-repeat;
	}
	ul{
		padding-left:25px;
		padding-right:25px;
		line-height:30px;
		font-size:20px;
	}
	li{
		border-top:solid 5px ;
	}
</style>
</head>
<body>
<!-- div扩中的内容说明是一个整体 -->
	<div id="GameList">
		<h1 class="title">游戏列表</h1>
		<ul>
			<li><a href="#">刺客信条</a></li>
			<li><a href="#">侠盗猎车</a></li>
			<li><a href="#">守望先锋</a></li>
			<li><a href="#">黑暗之魂</a></li>
			<li><a href="#">赛博朋克2077</a></li>
		</ul>
	</div>
</body>
</html>

案例二：盒子模型列表：
按行缩进+边框

<html>
<head>
<meta charset="UTF-8">
<title>盒子模型列表</title>
<style type="text/css">
	body,div,he,dl,dt,dd{
		margin:0px;
		padding:0px;
	}
	#gameList{
		background-color:#FFCC66;
		width:350px;
	}
	#gameList>h1{
		color:gray;
		font-size:25;
		font-weight:hold; /*设置字体的粗细*/
		line-height:50px;
	}
	#gameList>dl>dt{
		padding-left:20px;
		line-height:30px;
		font-size:25px;
	}
	#gameList>dl>dd{
		padding-left:20px;
		line-height:30px;
		font-size:15px;
		border-bottom:3px dotted;
	}
	#gameList.dongzuo{
		background-imge:url("img/1.png");
	}
	#gameList.shahe{
		background:url("img/1.png") no-repeat;
	}
</style>
</head>
<body>
<div id="gameList">
	<h1>全部分类</h1>
	<dl>
		<dt class="dongzuo">动作冒险类</dt>
		<dd>巫师3/赛博朋克2077/刺客信条/GTA4<br>
			巫师3/赛博朋克2077/刺客信条/GTA4<br>
			巫师3/赛博朋克2077/刺客信条/GTA4<br>
		</dd>
	</dl>
		<dl>
		<dt class="shahe">沙盒创造类</dt>
		<dd>我的世界/星际边缘/泰拉瑞亚/OutWorld<br>
			我的世界/星际边缘/泰拉瑞亚/OutWorld<br>
			我的世界/星际边缘/泰拉瑞亚/OutWorld<br>
		</dd>
	</dl>
	</div>
</body>
</html>

案例三：图片列表

<html>
<head>
<meta charset="UTF-8">
<title>图片列表</title>
<style type="text/css">
	div,h1,ul,li{
	/*为了防止各个浏览器的内边距、外边距不兼容的情况，一般在开发的第一步将边距全清零*/
		margin:0px;
		padding:0px;
	}
	ul{
		list-style-type:none; /*去除实心点*/
	}
	#dog{
		background-color:rgba(255,144,0,0.5)  /*rgba的第四个元素表示透明度*/
		width:120px;
	}
	#dog>h1{
	 font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;
     padding-left:15px;
     background-color:black;
     color:white;
     width:87px;
	}
	ul li a img{  /*hover表示添加鼠标悬浮事件*/
		border:3px solid orange;
	}
	ul li a:hover img{  /*hover表示添加鼠标悬浮事件*/
		border:3px solid gray;
	}
</style>
</head>
<body>
<div id="dog">
	<h1>DOG</h1>
	<ul>
		<li><a href="#"><img src="img/3.png" title="狗子" alt="替换文字"></a></li>
		<li><a href="#"><img src="img/4.png" title="狗子" alt="替换文字"></a></li>
		<li><a href="#"><img src="img/5.png" title="狗子" alt="替换文字"></a></li>
	</ul>
	</div>
</body>
</html>