前端基础之布局技巧_前端划分区域技巧-CSDN博客

本文链接：https://blog.csdn.net/weixin_47481936/article/details/111407401

margin负值巧妙运用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul li{
				position: relative;
				list-style: none;
				float: left;
				width: 150px;
				height: 200px;
				margin-left: -1px;
				border: 1px solid red;
			}
			ul li:hover{
	/* 			1. 如果盒子没有定位,则鼠标经过添加相对定位即可
				position: relative; */
				z-index: 1;
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

文字围绕浮动元素

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 300px;
				height: 70px;
				background-color: #BBFFAA;
				margin: 0 auto;
				padding: 5px;
			}
			.pic{
				float: left;
				width: 120px;
				height: 60px;
				margin-right: 5px;
			}
			.pic img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="pic">
				<img src="img/img.png" >
			</div>
			<p>【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场</p>
		</div>
	</body>
</html>

行内块的巧妙运用(页码)

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				text-align: center;
			}
			.box a{
				display: inline-block;
				width: 36px;
				height: 36px;
				background-color: #F7F7F7;
				border: 1px solid #CCCCCC;
				text-align: center;
				line-height: 36px;
				text-decoration: none;
				color: #333333;
				font-size: 14px;
			}
			.box .prev,
			.box .next{
				width: 85px;
			}
			.box .current,
			.box .elp{
				background-color: #FFFFFF;
				border: none;
			}
			.box input{
				width: 45px;
				height: 36px;
				border: 1px solid #CCCCCC;
				outline: none;
			}
			.box button{
				width: 60px;
				height: 36px;
				background-color: #F7F7F7;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<a href="#" class="prev">&lt;&lt;上一页</a>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#" class="elp">...</a>
			<a href="#" class="next">&gt;&gt;下一页</a>
			到第
			<input type="text">页
			<button type="button">确定</button>
		</div>
	</body>
</html>

css三角强化的巧妙运用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 0;
				height: 0;
				/* 把上边框宽度调大
				border-top: 100px solid transparent;
				border-right: 50px solid skyblue;
				左边和下边框宽度设置为0
				border-bottom: 0px solid blue;
				border-left: 0px solid green; */
				/* 1.只保留右边的边框有颜色 */
				border-color: transparent red transparent transparent;
				/* 2.样式都是solid */
				border-style: solid;
				/* 3.上边框宽度要大,右边框宽度稍小,其余的边框改为0 */
				border-width: 100px 50px 0 0;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 0;
				height: 0;
				/* 把上边框宽度调大
				border-top: 100px solid transparent;
				border-right: 50px solid skyblue;
				左边和下边框宽度设置为0
				border-bottom: 0px solid blue;
				border-left: 0px solid green; */
				/* 1.只保留右边的边框有颜色 */
				border-color: transparent red transparent transparent;
				/* 2.样式都是solid */
				border-style: solid;
				/* 3.上边框宽度要大,右边框宽度稍小,其余的边框改为0 */
				border-width: 100px 50px 0 0;
			}
			.price{
				width: 160px;
				height: 24px;
				border: 1px solid red;
				margin: 0 auto;
				line-height: 24px;

			}
			.miaosha{
				position: relative;
				float: left;
				width: 90px;
				height: 100%;
				background-color: #FF0000;
				text-align: center;
				color: #FFF;
				font-weight: 700;
				margin-right: 8px;
			}
			.miaosha i{
				position: absolute;
				right: 0;
				top: 0;
				width: 0;
				height: 0;
				border-color: transparent #FFFFFF transparent transparent;
				border-style: solid;
				border-width: 24px 12px 0 0;
			}
			.origin{
				font-size: 12px;
				color: gray;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="price">
			<span class="miaosha">
				￥1650
				<i></i>
				</span>
			<span class="origin">￥5650</span>
		</div>
	</body>
</html>