第一部分 网页修饰

最新推荐文章于 2024-10-09 09:17:59 发布
最新推荐文章于 2024-10-09 09:17:59 发布
阅读量428 收藏
点赞数 19
分类专栏： Web前端基础笔记 文章标签： css css3 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71027798/article/details/134763970
版权
本文介绍了CSSSprites（雪碧图）的原理与应用，探讨了宽度自适应、浮动元素下父元素高度自适应的方法，以及如何实现窗口自适应和常见的两栏、三栏布局示例。通过HTML和CSS代码展示，帮助开发者提升页面性能和布局效果。
摘要由CSDN通过智能技术生成

目录

0087 锚点

示例代码：

0088 精灵图

CSS Sprites的原理 (图片整合技术)(CSS精灵)/雪碧图

图片整合的优势:

示例代码：

0089 宽高自适应

示例代码1：

示例代码2：

示例代码3：

0090 浮动元素之父元素高度自适应1

示例代码：

0091 浮动元素之父元素高度自适应2

示例代码：

示例代码：

0092 窗口自适应

示例代码：

0093 两栏布局

示例代码1：

示例代码2：

0094 三栏布局

示例代码1：

示例代码2：

示例代码：

0087 锚点

示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
				position: fixed;
				right: 0;
				top: 100px;
			}
			li{
				width: 100px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border: 1px solid black;
			}
			div{
				height: 600px;
				border: 1px solid #cccccc;
			}
			
			/* 锚点作用:页面不同区域的跳转,使用a链接 
			<a href="#锚点名字"></a>
			
			<div id="锚点名字"></div>
			*/
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#a">京东秒杀</a></li>
			<li><a href="#b">双11</a></li>
			<li><a href="#c">频道优选</a></li>
			<li><a href="#d">特色广场</a></li>
		</ul>
		<div id="a">
			京东秒杀
		</div>
		<div id="b">
			双11
		</div>
		<div id="c">
			频道优选
		</div>
		<div id="d">
			特色广场
		</div>
	</body>
</html>

0088 精灵图

CSS Sprites的原理 (图片整合技术)(CSS精灵)/雪碧图

  • 将导航背景图片，按钮背景图片等有规则的合并成一张背景图，即将多张图片合为一张整图，然后用background-position”来实现背景图片的定位技术。

  • 图片整合的优势:

  1. 通过图片整合来减少对服务器的请求次数，从而提高页面的加载速度
  2. 通过整合图片来减小图片的体积
示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			div{
				width: 103px;
				height: 32px;
				float: left;
				margin: 10px;
				background: yellow url(图片路径);
			}
			
			.box1{
				background-position: -205px -111px;
			}
			.box2{
				background-position: -205px -74px;
			}
			.box3{
				background-position: -205px -37px;
			}
			
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="box5"></div>
		<div class="box6"></div>
	</body>
</html>

0089 宽高自适应

示例代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			div{
				/* width: 100px; */
				width: auto;/* 不写或auto即为自适应 */
				/* width: 100%; */
				height: 100px;
				padding-left: 100px;
				background: yellow;
			}
			
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>
示例代码2：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header,.footer{
				width: 100%;
				height: 50px;
				background: yellow;
			}
			.body{
				min-height: 500px;
				background: red;
			}
			li{
				height: 100px;
			}
			/* 
			min-height 最小高度
			max-height
			min-width
			max-width
			 */
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="body">
			<ul>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
			</ul>
		</div>
		<div class="footer"></div>
	</body>
</html>
示例代码3：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header,.footer{
				width: 100%;
				height: 50px;
				background: yellow;
			}
			.body{
				min-height: 500px;
				background: red;
			}
			li{
				height: 100px;
				max-width: 500px;
				margin: 0 auto;
				background: blue;
			}
			/* 
			min-height 最小高度
			max-height
			min-width
			max-width
			 */
		</style>
	</head>
	<body>
		<div class="header"></div>
		<div class="body">
			<ul>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
				<li>111111111</li>
			</ul>
		</div>
		<div class="footer"></div>
	</body>
</html>

0090 浮动元素之父元素高度自适应1

示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.left,.right{
				width: 100px;
				height: 100px;
				float: left;
			}
			.left{
				background: yellow;
			}
			.right{
				background: red;
			}
			.content{
				width: 200px;
				height: 200px;
				background: green;
			}
			/* .box{
				height: 100px;/* 如果浮动过多,换行就出现问题 */
			} */
			.box{
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="right"></div>
			<!-- <div style="clear: both;"></div> -->
			
			<!-- 2. 增加空标签，不利于代码可读性 -->
		</div>
		
		<div class="content"></div>
	</body>
</html>

0091 浮动元素之父元素高度自适应2

示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			/* 伪元素 */
			div::first-letter{
				font-size: 30px;
				color: red;
			}
			div::first-line{
				/* font-size: 30px; */
				background: yellow;
			}
			div::before{
				content: "aaaaa";
			}
			div::after{
				content: "bbbbbb";
			}
		</style>
	</head>
	<body>
		<div>
		Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
		Voluptatibus quod officiis vel delectus nesciunt consectetur 
		obcaecati, odit vitae repellat quaerat iste quidem illum quos 
		assumenda consequuntur placeat omnis ab blanditiis.
		</div>
	</body>
</html>
示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box1{
				width: 100px;
				height: 100px;
				background: yellow;
				/* display: none; */
				/* 不占位的隐藏 */
				
				visibility: hidden;
				/* 占位隐藏 */
			}
			.box2{
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

0092 窗口自适应

示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100%;
				height: 100%;
				background: yellow;
			}
			html,body{
				height: 100%;
			}
			.child1{
				background: blue;
				height: 50%;
			}
			.child2{
				background: red;
				height: 50%;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="child1"></div>
			<div class="child2"></div>
		</div>
	</body>
</html>

0093 两栏布局

示例代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.box1{
				width: 200px;
				height: 100%;
				background: red;
				float: left;
			}
			.box2{
				height: 100%;
				background: yellow;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

示例代码2：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.box1{
				width: 200px;
				height: 100%;
				background: red;
				float: left;
			}
			.box2{
				width: calc(100% - 200px);
				height: 100%;
				background: yellow;
				/* margin-left: 200px; */
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

0094 三栏布局

示例代码1：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.left,.right{
				width: 200px;
				height: 100%;
			}
			.left{
				background: yellow;
				float: left;
			}
			.right{
				background: red;
				float: right;
			}
			.center{
				height: 100%;
				background: blue;
				margin-left: 200px;
				margin-right: 200px;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</body>
</html>
示例代码2：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.left,.right{
				width: 200px;
				height: 100%;
			}
			.left{
				background: yellow;
				float: left;
			}
			.right{
				background: red;
				float: right;
			}
			.center{
				width: calc(100% - 400px);
				height: 100%;
				background: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</body>
</html>
示例代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
			}
			.top,.bottom{
				width: 100%;
				height: 50px;
				background: grey;
			}
			.middle{
				height: calc(100% - 100px);
				background: yellow;
			}
			.left,.right{
				width: 100px;
				height: 100px;
				background: red;
				float: left;
			}
			.center{
				width: calc(100% - 200px);
				height: 100%;
				background: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="top"></div>
		<div class="middle">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
		<div class="bottom"></div>
	</body>
</html>

猛女永不落泪
关注
专栏目录
第一章：网页开发基础
m0_55689562的博客
11-20 2801
学习目标： 1.HTML技术 2.CSS技术 3.Java Spcript基础 学习内容： 1.HTML技术 HTML简介：HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的资源Internet连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音等。 超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（www）盛行的原因之一，其主要特点如下： 简易性：超
图片轮播代码，制作网页，修饰网页
09-08
接下来，我们要使用CSS来隐藏除第一张外的所有图片，设置轮播容器的样式，以及定义按钮或导航点（如果有的话）。 ```css #slider { position: relative; width: 100%; height: 400px; /* 自定义高度 */ } #...
网页的修饰
张俊红的个人博客
04-15 292
总第61篇上一篇推送了网页的基本构成，链接地址：网页是怎么构成的？，这篇来讲讲网页的修饰，正如字面意思一般，本篇分享的内容是用来修饰网页的，是让网页变得更加好看。本文只是介绍一些基本的C...
第一章网页的基础知识
2301_81997535的博客
09-12 1324
1.4.1初识Wed前端Weh 前满开发是从网页镇空而来的，名称上有明显的时代特征。随着用户体验要水越来趁高，前端开发的技木难度越来越大，web 前端开发这个职业也从设计和制作不分的局面中独立出米早期的的瑞其实就是 Tabel 布局，后来发展到 Div+Css 网站重构，再到 JavaSeript逐镜成为web 前瑞开发的语言以及 web 2.0 的出现，每个阶段都涌现出相应的产品，如5N5博客、微博等1.4.2Wed前端开发的三大核心技术。
第一章 网页制作的基础知识
2401_87174676的博客
09-13 1353
HTML（HyperText Markup Language）：HTML是一种标记语言，用于描述网页的结构和内容。学习HTML可以了解网页的基本元素、标签和属性，以及如何编写语义化的网页结构。CSS（Cascading Style Sheets）：CSS是一种样式表语言，用于控制网页的样式和布局。学习CSS可以了解如何设计网页的外观、字体、颜色、布局和响应式设计等。JavaScript：JavaScript是一种脚本语言，用于为网页添加交互和动态效果。
第一章 网页制作的基础知识1
Y191793的博客
09-11 576
Web前端即指平常上网浏览的网页1.4.2 WEB前端开发的三大核心技术1.HTML：控制页面结构，是制作网页的标准语言2.CSS：控制页面样式、静态修饰网页，还可以配合脚本语言动态地对网页元素格式化，并拥有对网页对象和模型样式进行编辑的能力3.JavaScript：是一种属于网络的脚本语言，常用来为网页添加动态功能，属于浏览器的一部分由浏览器边解释边执行，通常Javascript脚本通过嵌入HTML中的方式来实现自身功能1.语言2.超文本3.标记。
续第一章网页的基础知识
2401_87136665的博客
09-11 1259
1.4.1 初识Web前端Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面对Web前端的相关概念进行详细讲解。Web前端开发是从网页演变而来的，名称上有明显的时代特征。随着用户体验要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
第一章 网页制作基础知识
2301_81136803的博客
09-11 668
1·HTML:是制作网页的标准语言。超文本标记语言的结构包括“头部”和“主体”两部分，“头部”提供关于网页的信息，“主体”提供网页的具体内容。2·CSS语言：用来表现HTML或XML等文件样式的计算机语言。不仅可以静态地地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，并拥有对网页对象和模型样式进行编辑的能力。
第一部分 web前端课程
S788977SS的博客
10-20 1696
两种编程语言，通常配合使用，是网站开发的基础语言:定义列表:定义专业术语或名词:对名词进行解释和描述。
第一部分 Word练习题
qq_44089890的博客
01-05 4918
第一部分 Word练习题 1.按要求编辑以下文字： 祖国为你们骄傲 祖国为你们骄傲。 我们有理由骄傲，因为我国体育健儿实现了历史性超越，他们不畏强手，奋勇当先，表现出顽强的拼搏精神、精湛的运动技术和良好的体育道德。他们为祖国夺得28枚金牌、16枚银牌、15枚铜牌。以奖牌总数59块列本届奥运会第三名。这是我国运动员在奥运会上取得的最好成绩，这是体育健儿为国庆献上的厚礼，这是祖国欣欣向荣的有力证明。 摘自《人民日报》2000年
《HTML+CSS网页前端设计》第一期期末试卷.pdf
12-17
8. 网页主体：`<body>` 标签内的内容是网页的主体部分，显示在浏览器中。 9. 换行：` ` 标签用于单行换行，而 `<p>` 标签创建段落，它们在视觉效果上有所不同。直接在代码中回车不会在网页上换行。 10. 超链接...
第5章Dreamweaver网页设计软件.pptx
12-04
Dreamweaver 软件是一个功能强大、功能丰富的网页设计软件，主要用于设计和编辑网页程序文件。该软件提供了交互式插入网页元素、自动产生标记、在线提示标记选项等功能，能够满足不同用户的需求。 Dreamweaver 软件...
js处理表格对table进行修饰
10-25
首先，我们来看第一种技巧——行颜色间隔显示。这个功能可以通过CSS和JavaScript联合实现。在CSS部分，定义两个类`.one`和`.two`，分别设置不同的背景颜色。例如，`.one`设置为淡绿色，`.two`设置为淡黄色。接着，在...
Dreamweaver CS4网站制作从入门到精通视频教程下载第8章 用CSS样式修饰页面.zip
04-13
在本《Dreamweaver CS4网站制作从入门到精通视频教程》的第8章中，我们将深入探讨如何利用CSS（层叠样式表）样式来修饰网页，从而提升网站的视觉效果和用户体验。CSS是Web设计中不可或缺的一部分，它允许设计师将...
CSS实现文本超出隐藏并显示省略号
everfoot的博客
10-02 550
通过结合使用和这三个CSS属性，我们可以轻松地在CSS中实现文本超出隐藏并显示省略号的效果。这一技巧在处理长文本、保持页面整洁和美观方面非常有用。希望本文的介绍和示例能帮助你更好地理解和应用这一技术。
CSS中的flex概述
学无止境
10-02 333
例如，当容器空间小于子元素的总宽度（或高度）时，子元素将按照。（默认值，当子元素未设置交叉轴方向的尺寸时）：子元素沿交叉轴方向拉伸，填满容器。：行（列）沿交叉轴均匀分布，每行（列）之间以及与容器边缘的间隔都相等。：子元素沿主轴均匀分布，每个子元素之间以及与容器边缘的间隔都相等。：行（列）沿交叉轴均匀分布，两端的行（列）与容器边缘对齐。：行（列）沿交叉轴均匀分布，每行（列）两侧都有相等的间隔。：子元素沿主轴均匀分布，每个子元素两侧都有相等的间隔。：子元素沿主轴均匀分布，两端的子元素与容器边缘对齐。
【CSS】水平垂直居中
小秀的博客
10-02 546
容器设置position: relative。子元素设置 position: absolute;left: 50%;需要给子元素设置 position: absolute;设置固定宽度和高度;top、left、bottom、right都设置为0;margin设置为auto；给容器设置 display: flex;子项设置 margin: auto;给父盒子设置属性 flex。给父盒子和子盒子设置属性。flex:1 的作用。
【CSS】flex: 1； 的意思
最新发布
小秀的博客
10-09 165
flex: 1;是的简写。它表示元素可以根据容器的剩余空间进行扩展（或缩小），并且在布局中按比例分配空间。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值