第四章 浮动 ② 代码

已于 2022-06-13 18:28:47 修改
阅读量339 收藏
点赞数 1
分类专栏： # HTML+CSS 文章标签： css html css3 前端
于 2022-06-08 20:28:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125187599
版权

一、课前小测试

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			.p1{
				border:3px solid red;
				height:200px;
				text-align:center;
				/*行高与高度一致，垂直居中*/
				line-height:200px;
			}
			.xiushi{
				border:2px dashed blue;
				/* 边框 顶部 外边距 */
				margin-top:10px;
				/* 首行缩进 两个字符 详细文本样式用法--->博客：第三章 CSS样式深入 ① 笔记 3.1.3 */
				text-indent:2em;
				height:600px;
				/*背景图片 详细背景样式用法--->博客：第三章 CSS样式深入 ① 笔记 3.3.4*/
				background:url(31.jpg) no-repeat center bottom / 200px 200px;
			}
		</style>
	</head>
	
	<body>
		<div class="p1">欢迎访问我的站点，请先<a href="#">登录</a></div>
		<div class="xiushi">这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容这是网页上的很多内容</div>
	</body>
</html>

运行结果如下：
在这里插入图片描述

二、当当图标 标签类型 块状/行内/行内块

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
		<style>
			/*
			标签类型:
			块状标签: 独霸一行,可以设置宽和高。div,h1-h6,p
			行内标签: 挤在一行显示，不能设置宽和高。a,span,b,u,i
			行内块标签: 可以设置宽和高，挤在一行显示。img,input

			通过display可以改变元素类型
			display:none block inline inline-block

			*/
			.d1{
				border:1px solid red;
				width:400px;
				height:400px;
				background:orange url(ddw.png) no-repeat left top ;
				/*background:背景颜色 url() no-/repeat 位置 / 背景图片大小 */
				/*
				background:orange url(ddw.png) no-repeat left top / 80px 400px ;
				background:orange url(ddw.png) no-repeat left top / 80px 600px ;
				*/
			}

			a{
				border:1px solid gray;
				width:40px;
				height:40px;
				/*通过display设置为行内块*/
				display:inline-block;
				background-color:pink;
			}
			.a1{
				background:pink url(ddw.png) no-repeat  0px -160px; /* 横/纵方位上下移动时 +/-要搞清楚*/
			}

			.a2{
				background:pink url(ddw.png) no-repeat -40px -160px;
				
			}
		</style>
	<body>
		<div class="d1"></div>
		<a href="#" class="a1"></a>
		<a href="#" class="a2"></a>
		<a href="#" class="a3"></a>
		<a href="#" class="a4"></a>
	</body>
</html>

运行结果如下：
在这里插入图片描述

三、改变标签类型

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<!--
		标签分类:
		行内标签: span a b u i sub sup 挤在一行，不能设置宽和高
		块状标签: div p h1-h6 table form ul li ol 独霸一行(宽度100%)，可以设置宽和高
		行内块标签: img input 挤在一行，可以设置宽和高
		-->
		<style type="text/css">
			div{
				border:2px solid red;
				width:100px;
				height:100px;
				/* 用display改造为行内 */
				display:inline-block;
			}
			span{
				border:2px solid red;
				width:100px;
				height:100px;
				/*改为块状
				display:block;
				display:inline-block;*/
				/*隐藏元素*/
				display:none;
			}
			
			h1{
				border:2px solid red;
				width:100px;
				height:100px;
				display:inline;
			}
			a{
				border:2px solid blue;
				width:100px;
				height:100px;				
				display:block;
			}
			img{
				border:2px solid blue;
				width:100px;
				height:100px;
				display:block;
				display:inline-block;
			}
			/*h1-h6*/
			/*a*/
			/*img*/
		</style>
	</head>

	<body>
		<div>DIV1</div>
		<div>DIV2</div>
		<span>SPAN1</span>
		<span>SPAN2</span>

		<h1>H1</h1>
		<h1>H2</h1>
		<a href="#">A1</a>
		<a href="#">A2</a>
		<img src="31.jpg" width="100" height="100">
		<img src="31.jpg" width="100" height="100">
	</body>
</html>

运行结果如下：
在这里插入图片描述

四、网店目录菜单 悬浮变色

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
		<style type="text/css">
			ul{
				/* border:1px solid red; */
				/*清除列表样式*/
				list-style:none;
				/*清除内填充*/
				padding-left:0px;
				/*清除外边距*/
				margin:0px;
				width:140px;
				/*设置ul背景*/
				background-color:black;
				
			}
			li{
				/*border:2px solid blue;*/
			}
			a{
				/* border:1px solid green; */
				display:block;
				height:40px;
				text-align:center;
				/*清除下划线*/
				text-decoration:none;   /* 注意 */
				line-height:40px;
				/*字体白色*/
				color:white;
				font-weight:bold;
			}
			li:hover {
				background-color:red;
			}
		</style>
	</head>
		
	<body>
		<ul>
			<li>
				<a href="#">这是菜单1</a>
			</li>
			<li>
				<a href="#">这是菜单2</a>
			</li>
			<li>
				<a href="#">这是菜单3</a>
			</li>
			<li>
				<a href="#">这是菜单4</a>
			</li>
			<li>
				<a href="#">这是菜单5</a>
			</li>
			<li>
				<a href="#">这是菜单6</a>
			</li>
		</ul>
	</body>
</html>

运行结果如下：
在这里插入图片描述
当鼠标悬浮在菜单上之后：
在这里插入图片描述

五、CSS选择器进阶 全局/并集/交集选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*全局选择器:匹配所有元素，一般用于重置样式
			*{
				margin:0px;
				padding:0px;
				list-style:none;
				border:2px solid green;
			}*/

			/*并集选择器用逗号分隔多个选择器
			h1,p,.xx{
				color:red;
			}*/

			/*请让li的第二个元素变为红色*/
			/*交集选择器:多个条件同时满足。通过标签选择器和类选择器,id选择器进行组合*/
			li.xx{
				color:red;
			}

			.xx{

			}

			li#d1{
				color:red;
			}
		</style>
	</head>

	<body>
		<h1>这是H1</h1>
		<p class="xx">这是P这是P</p>
			<ul>
			<li>这是一个LI1</li>
			<li class="xx">这是一个LI2</li>
			<li>这是一个LI3</li>
			<li id="d1">这是一个LI4</li>
		</ul>
 </body>
</html>

运行结果如下：
在这里插入图片描述

六、儿子/后代/孙子选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*让所有的b变红
			b{
				color:red;
			}*/

			/*后代选择器: 用空格表示*/
			/*让div中的b变红
			div b{
				color:red;
			}*/

			/*子级选择器: 用大于号表示*/
			/*让div的儿子b变红
			div > b{
				color:red;
			}*/

			/*让div的孙子b变红*/
			div > span > b{
				color:red;
			}
		</style>
	</head>

	<body>
		<b>这是body下的b</b>
		<div>
			<b>这是DIV下的b</b>
			<span>
				<b>这是span下的b</b>
			</span>
		</div>
	</body>
</html>

运行结果如下：
在这里插入图片描述

七、属性选择器

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*属性选择器:用中括号表示*/
			/*让姓名框变红*/
			input[type='text']{
				border:1px solid red;
			}
			/*让密码框变绿，背景变黄*/
			[type="password"]{
				border:2px solid green;
				background-color:yellow;
			}
			/*让手机框变蓝，文字变红*/
			[name='sj']{
				border:2px solid blue;
				color:red;
			}
		</style>
	</head>

	<body>
		姓名:
		<input type="text" name="xm"/><br/>
		密码:
		<input type="password" name="mm"/><br/>
		手机:
		<input type="phone" name="sj"/><br/>
	</body>
</html>

运行结果如下：
在这里插入图片描述

八、伪类选择器 默认/访问过/浮动/点击（之后的样式）

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*默认的链接样式*/
			a:link{
				color:red;
				font-size:20px;
			}
			/*访问过链接之后的样式*/
			a:visited{
				color:blue;
				font-size:30px;
			}

			/*鼠标悬浮到a上时的样式*/
			a:hover{
				color:green;
				font-size:40px;
				background-color:pink;
			}

			/*鼠标点击时的样式*/
			a:active{
				color:yellow;
				font-size:50px;
				background-color:#ff66ff;
			}

			div{
				color:red;
				border:2px solid black;
			}
		</style>
	</head>

	<body>
		<a href="#">这一个会变色的菜单</a>
		<div>
			这是一个div内容
			<span>
				这是一个span
			</span>
		</div>
	</body>
</html>

运行结果如下：
在这里插入图片描述
当鼠标悬浮在链接上边时显示：
在这里插入图片描述
当鼠标悬浮点击链接时显示：
在这里插入图片描述

九、文字缠绕

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width:100px;
				height:100px;
				background-color:red;
				float:left;
				/*float:right;
				float:none;*/
			}
		</style>
	</head>

	<body>
		<div>内容</div>环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字vvv
	</body>
</html>

运行结果如下：
在这里插入图片描述

十、浮动

代码如下：

<!DOCTYPE html >
<html>
 <head>
	<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			span{
				border:1px solid red;
			}

			.s2{
				float:left;
				width:100px;
				height:100px;
			}
			.s3{
				float:left;
			}
			.s1{
				float:left;
			}
		</style>
	</head>

	<body>
		<span class="s1">SPAN1</span>
		<span class="s2">SPAN2</span>
		<span class="s3">SPAN3</span>
	</body>
</html>

运行结果如下：
在这里插入图片描述

十一、浮动塌陷

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*
			元素浮动之后，高度变为0，底部空虚。后面元素趁虚而入，会挤上来
			*/
			.d1{
				width:100px;
				height:100px;
				border:1px solid red;
				float:left;
			}
			.d2{
				width:150px;
				height:150px;
				border:1px solid blue;
				float:left;
			}
			.d3{
				width:200px;
				height:200px;
				border:1px solid black;
				float:left;
			}
		</style>
	</head>

	<body>
		<div class="d1">这是DIV1这是DIV1这是DIV1这是DIV1</div>
		<div class="d2">这是DIV2这是DIV2这是DIV2这是DIV2</div>
		<div class="d3">这是DIV3这是DIV3这是DIV3这是DIV3</div>
	</body>
</html>

运行结果如下：
在这里插入图片描述

十二、浮动塌陷 解决

代码如下：

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			/*浮动塌陷产生的原因，以及解决方案*/
			/*
			浮动塌陷原因:
			1.父容器没有高度
			2.父容器中所有的子元素都浮动
			此时导致父容器塌陷，父容器高度为0
			浮动塌陷的解决方法：
			1.父容器设置高度
			2.通过overflow设置hidden/auto,
			让父容器自动包裹子元素，解决塌陷问题(最常用的方法)
			3.在浮动元素的后面，添加一个新元素，
			设置元素的样式属性clear:both。会清除浮动元素的影响
			解决塌陷问题（额外添加标签，不常用）
			4.使用after伪类解决塌陷问题
			*/
			ul{
				border:5px solid red;
				list-style:none;
				padding:0px;
				/*height:100px;
				overflow:hidden;*/
			}
			/*通过after清除塌陷*/
			ul:after{
				/*在ul后面添加空字符串*/
				content:"";
				/*设置内容块状显示*/
				display:block;
				/*设置内容清除两边的浮动效果*/
				clear:both;
			}
			li{
				width:200px;
				border:3px solid blue;
			}
			.x1{
				height:50px;
				float:left;
			}
			.x2{
				height:30px;
				float:left;
			}
			.x3{
				height:80px;
				float:left;
			}
			.x4{
				/*清除浮动元素的影响
				clear:left
				clear:right
				clear:both
				clear:none
				*/
				clear:both
			}
			.d1{
				border:3px solid black;
				height:30px;
				background-color:yellow;
			}
			/*:after伪类可以在元素内部追加内容*/
			.mydiv:after{
				/*添加的内容*/
				content:"这是动态添加的内容";
				/*对添加的内容修饰*/
				color:red;
			}
		</style>
	</head>
	<body>
		<div class="mydiv">这是我的原始内容</div>
		<ul>
			<li class="x1">子元素1</li>
			<li class="x2">子元素2</li>
			<li class="x3">子元素3</li>
			<!-- <li class="x4"></li> -->
		</ul>
		<div class="d1"></div>
	</body>
</html>

运行结果如下：
在这里插入图片描述

小丫头爱打盹
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机网站的顶部或者底部固定浮动代码
myde520的专栏
12-05 9250
现在很多手机网站打开都会把网站的LOGO顶部导航什么或者底部的固定到网页顶部或者底部不动，有点像APP的样子，那样能更方便浏览者操作，这个其实很简单就能实现，它主要是用到position属性的fixed值。 大家在学习CSS的时候接触到position属性值： 值 描述 static 默认。位置设置为 static 的元素，它始终会处于页面
网页页面浮动窗口示例代码（JavaScript Code）
热门推荐
::: 移动互联网时代开发者 :::
01-16 3万+
      这个页面效果比较酷。小窗口浮动于主页面之上，您可以最小化、还原、关闭这些小窗口，或者将其拖动到主页面的任何位置。示例界面如下：            具体使用方法，看下面的这个完整的页面代码应该就知道了。//可以打包为js文件;var x0=0,y0=0,x1=0,y1=0;var offx=6,offy=6;var moveable=false;var hover=orange,
详述HTML浮动（float）
飞翔的企鹅的博客
10-05 1万+
为什么需要浮动 假设我们现在需要在页面上放置“黄、绿、蓝”三个颜色的色块，我们可以创建三个<div>标签显示三色快放入一个大的<div>标签中，效果如下图： （为便于说明，给外层的div加上了红色边框） 那么问题来了，每个div模块都要占用一整行来显示，显然右边大部分的空白区域无法显示其它内容被浪费掉；或者说现在你想让这三个色块连成一排紧密无缝地显示出来，那样该...
CSS浮动
super码力的博客
09-30 4758
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
关于CSS浮动的代码实践
hhhh
03-30 540
浮动是为了实现文字围绕元素排列的效果，浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。 这就会引发容器折叠：一个容器内的浮动元素可能会占据另一个容器的面积，这样两个容器的文档流都围绕浮动元素排列。 对主容器的末尾元素设置clear属性，会扩展主容器的大小至涵盖整个浮动元素。 伪元素：：after可以快速在DOM中在容器末尾添加一个元素，而不需要在HTML中添加标记 清除浮动有很多方法 双容器模式：将网页内容居中 通过将内容放置到两个嵌套的容器中，然后给内层的容器设置外边距，让它在外层容器中居
左侧浮动可折叠的QQ在线客服代码
06-10
本资源"左侧浮动可折叠的QQ在线客服代码"正是为实现这一目标而设计的。它将客服对话框置于网页左侧，并且支持折叠，既不占用过多屏幕空间，又能随时调出，确保用户在浏览页面时能轻松联系到客服。 首先，我们来深入...
jQuery基于Bootstrap顶部浮动导航菜单代码
06-05
本示例中的“jQuery基于Bootstrap顶部浮动导航菜单代码”是一个高效且实用的设计方案，它结合了jQuery的动态效果和Bootstrap的简洁布局，为用户提供了一种交互性强且易于使用的导航体验。 首先，我们来看Bootstrap...
float ad浮动广告代码
10-31
浮动广告代码，通常用于网页设计中，以创建一种在用户滚动页面时仍能保持在屏幕某一位置的广告效果。这种类型的广告能够持续吸引用户的注意力，提高广告的可见度。以下是对`float ad`浮动广告代码的详细解释： 首先...
jQuery浮动广告横幅代码
04-02
最后，关于"压缩包子文件的文件名称列表"中的`jiaoben6520`，这可能是指一个包含示例代码、CSS样式文件、图片资源等的压缩包文件。在实际应用中，你需要将这些文件解压并正确引用到HTML、CSS和JavaScript文件中，...
duilian.rar_浮动代码
09-20
实现对联浮动广告的代码主要涉及CSS（层叠样式表）和JavaScript。CSS用于定义广告元素的样式，包括位置、大小等；JavaScript则用于监听窗口的滚动事件，以及根据分辨率动态调整广告的显示状态。 在"duilian.txt...
左侧浮动html网页模板
12-01
左侧浮动html网页模板是一款左侧导航菜单随网页滚动的html网站模板。
html浮动布局
小白
10-19 1万+
html浮动布局 浮动布局：         之所以要使用到浮动布局，只要是像div等块标签，在网页显示时，无论其宽的大小，都是独占一行。而在网页布局中，我们常常需要将两个或者是多个div并排放置。由于div独占一行，并排是不可能实现的。所以我们需要采用浮动布局，所谓的浮动布局，可以这么来理解，将网页当作游泳池，游泳池分为水底和水面，一般的网页布局就是将标签贴在水池地面上，固定着，而浮动布局就
HTML-浮动与清除浮动
小头Sophia
12-10 1万+
1.浮动：float：left；right；none 2.浮动的模块是不占用位置的，如下： 如果给上面的div1和div2加上左浮动，则div3就会上移，出现如下所示效果： 为了让div1和div2占有它原来的位置，让div3显示在它们下面，则要清除浮动。 关于浮动的清除有以下几种： 1）clear 2）添加额外的标签 3）伪元素 3.开发工具：WebSto
浅谈css中浮动和清除浮动带来的影响
weixin_30631587的博客
10-27 550
有很多时候，我们都会用到浮动，而我们有时候对浮动只是一知半解，却不是太清楚它到底是怎么回事，不知道各位有没有和我一样的感觉，只知道用它，却不知道它到底是怎么回事，所以，在学习的过程中，就要把一个概念不是很清晰的问题把它弄清楚了，便于我们以后的使用。早些时候，W3C规定出来的浮动实际并不是为了布局所用，当时是为了做文字环绕才使用到浮动，后来有人发现用它来做布局也挺不错啊，但是，用到了...
25.html设置浮动（float属性）
越努力越幸运的博客
04-24 9786
文章目录html设置浮动（float属性）浮动的简介浮动其他的特点1.不会盖住文字2.脱离文档流特点 html设置浮动（float属性） 浮动的简介 float属性：通过浮动可以使一个元素向父元素的左侧或右侧移动 可选值（部分）： ①none；默认值，不浮动 ②left；元素向左浮动 ③right；元素向右浮动 注意： 1.元素设置浮动以后，水平布局的等式便不需要强制成立了。 2.元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，因此，元素下边还在文档流中的元素会自动向上移动。 3.浮动元素向
网页设计图片向上浮动_网页浮动图片代码
weixin_31919471的博客
12-29 887
var widths = 865;/*显示高度,自行调整*/var heights = 255;/*显示宽度,自行调整*/var counts = 5;img1 = new Image();img1.src = 'images/flash_07.jpg';img2 = new Image();img2.src = 'images/flash_071.jpg';img3 = new Image();...
在php中怎样左浮动,div css float浮动用法(left right)
weixin_39678531的博客
03-24 300
div+css中float认识及css float用法，DIV CSS float浮动知识用法与float浮动教程篇Css样式的float浮动属性，用于设置标签对象(如：标签盒子、标签、标签、标签等html标签)的浮动布局，浮动也就是我们所说标签对象浮动居左靠左(float:left)和浮动居右靠右(float:right)。float是什么意思？float是浮动，翻译成中文也是浮动意思。进入对应...
HTML5作业：美食网站设计(浮动的使用)
coding加油站
06-21 9749
美食网站作业，适合练习浮动布局的时候使用
浮动代码
最新发布
05-24
浮动代码指的是可以让网页元素（如图片、文字等）在页面中浮动的 CSS 属性。浮动元素会脱离文档流，可以左右移动，并且可以让其他元素环绕在其周围。 以下是一个简单的浮动代码示例： ```html ; width: 200px; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值