【重学前端】常用CSS样式

最新推荐文章于 2024-06-12 13:42:10 发布

时小浅

最新推荐文章于 2024-06-12 13:42:10 发布

阅读量87

点赞数

分类专栏：重学前端文章标签： css3

本文链接：https://blog.csdn.net/qq_36194388/article/details/118958644

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

本文介绍了CSS的一些实用技巧，包括如何使用CSS制作三角符号，理解CSS精灵技术以减少加载时间，掌握CSS定位方法实现元素精确定位，以及创建两列和三列布局的方法。这些技巧对于前端开发者优化网页性能和布局设计至关重要。

摘要由CSDN通过智能技术生成

CSS制作三角符号

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<title>标题</title>
	<style type="text/css">
		h3{width:200px;background:#ccc;overflow:hidden;}

		h3 span{
			width:0;height:0;overflow:hidden;
			border-width:8px;
			border-color:#000 transparent transparent;
			border-style:solid;
			float:left;
			margin:6px 0 0 0;
		}
		h3 strong{float:left;}
	</style>
</head>
<body>
	<h3><strong>产品分类</strong><span></span></h3>
</body>
</html>

CSS 精灵（sprites）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<title>CSS精灵</title>
	<style type="text/css">
		/*
		CSS精灵：利用一张图片实现多个背景图片的显示效果
		使用：减少图片数量，提高加载速度，增强服务器性能
		作法：
			1. 将页面上会用到的小图标放置在一个图片文件中，构造一个包含很多小图标的图片文件。
			2. 利用背景图的位置控制，实现将不同的小图标显示在对应的位置上。
		*/
		h3{background:url(images/icons.png) no-repeat;padding-left:20px;border-bottom:1px solid #ccc;}
		.product{background-position:left -1192px;}
		.share{background-position:left -68px;}
		.book{background-position:left -104px;}
	</style>
</head>
<body>
	<h3 class="product">产品分类</h3>
	<p>此处省略一万字...</p>
	<h3 class="share">连接分享</h3>
	<p>此处省略一万字...</p>
	<h3 class="book">留言板</h3>
	<p>此处省略一万字...</p>
</body>
</html>

CSS的定位技巧（子绝父相）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<title>定位</title>
	<style type="text/css">
		html,body{margin:0;padding:0;}
		.searchform{width:480px;margin:10px auto;padding:0;position:relative;}
		.keywords{border:2px solid #888;height:34px;position:absolute;z-index:1;width:376px; background:url(images/input_bg.jpg) no-repeat 350px center;font:24px/34px arial;}
		.search_btn{position:absolute;z-index:2;left:376px;}
	</style>
</head>
<body>
	<form action="" method="post" class="searchform">
		<input type="text" name="keywords" class="keywords"/>
		<input type="image" src="images/search_btn.jpg" title="搜索" class="search_btn"/>
	</form>
</body>
</html>

CSS布局（两列，三列）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<title>布局</title>
	<style type="text/css">
		html,body{margin:0;padding:0;}
		/* 左右布局 */
		#content1{width:1000px;margin:10px auto;overflow:hidden;}
		/*
		#content1_left{width:200px;height:100px;float:left;background:#0a0;}
		#content1_right{width:790px;height:100px;float:right;background:#0a0;}
		*/
		#content1_left{width:790px;height:100px;float:left;background:#0a0;}
		#content1_right{width:200px;height:100px;float:right;background:#0a0;}

		/* 左中右布局 */
		#content2{width:1000px;margin:10px auto;}
		#content2_left,#content2_right{width:200px;height:200px;float:left;background:#f0f;}
		#content2_left{margin-right:10px;padding:10px 20px;width:160px;}
		#content2_right{float:right;}
		#content2_main{background:#f00;height:200px;float:left;width:580px;}
	</style>
</head>
<body>

	<!--左右布局-->
	<div id="content1">
		<h3>左右布局</h3>
		<div id="content1_left">
			左边主体
		</div>
		<div id="content1_right">
			右边栏
		</div>
	</div>

	<!--左中右布局-->
	<div id="content2">
		<h3>左中右布局</h3>
		<div id="content2_left">
			左边栏
		</div>
		<div id="content2_main">
			中间主体
		</div>
		<div id="content2_right">
			右边栏
		</div>
	</div>
</body>
</html>

CSS2实现圆角矩形

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8"/>
	<title>布局</title>
	<style type="text/css">
		html,body{margin:0;padding:0;}
		/* CSS2实现圆角矩形 */
		#box{background:#ee4315;width:300px;margin:20px auto;overflow:hidden;}
		#box span{background:url(images/1.png) no-repeat;width:10px;height:10px;}
		#box .lt{float:left;}
		#box .rt{float:right;background-position:-10px 0;}
		#box .lb{float:left;background-position:0 -10px;}
		#box .rb{float:right;background-position:-10px -10px;}
		.mainbox{clear:both;}
	</style>
</head>
<body>
	<div id="box">
		<span class="lt">&nbsp;</span>
		<span class="rt">&nbsp;</span>
		<div class="mainbox">		box1box1box1box1<br/>box1box1box1box1<br/>box1box1box1box1<br/>box1box1box1box1<br/>box1box1box1box1<br/>
		</div>
		<span class="lb">&nbsp;</span>
		<span class="rb">&nbsp;</span>
	</div>
</body>
</html>