lesson3--html-css基础主要知识点

最新推荐文章于 2022-09-24 14:30:42 发布
最新推荐文章于 2022-09-24 14:30:42 发布
阅读量213 收藏
点赞数
分类专栏： html-css 文章标签： html-css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wywywy_/article/details/90261900
版权

1.用定位实现两栏布局
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两栏布局</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	.right{
		position:absolute;
		right:0;
		width:100px;
		height:50px;
		background-color:#f66;
		opacity:0.5;
	}

	.left{
		margin-right:100px;
		height:50px;
		background-color:#ff3;
	}

	</style>
</head>
<body>
<div class="right"></div>
<div class="left"></div>
</body>
</html>

注意：一定要先写right，先出生，不然定义了位置之后他会在出生时的位置进行定位
在这里插入图片描述2.两个bug(margin塌陷和margin合并)
margin塌陷：父子嵌套的两个或多个元素的margin-top属性，会取最大的那个值，而且全部元素会一起动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin塌陷</title>
	<style>
	*{
		margin:0;
		padding:0;
	}

	.wrapper{
		width:100px;
		height:100px;
		background-color:black;
		margin-top:100px;
	}
	
	.contern{
		width:50px;
		height:50px;
		background-color:green;
		/*会取这个值并且带着父级一起动*/
		margin-top:150px;
	}
	</style>
</head>
<body>
<div class="wrapper">
	<div class="contern"></div>
</div>
</body>
</html>

*解决margin塌陷的方法====bfc*
1.如何出发一个盒子的bfc
①position:absolute
②display:inline-block
③float:left/right
④overflow：hidden//溢出盒子的部分要隐藏起来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>解决margin塌陷</title>
	<style>
	*{
		margin:0;
		padding:0;
	}

	.wrapper{
		width:100px;
		height:100px;
		background-color:black;
		margin-top:100px;
		/*超出盒子的部分会被隐藏，让这个大盒子变成bfc，
		假如要他超出的部分隐藏了，就用overflow:hidden*/
		/*overflow:hidden;*/
		/*display:inline-block;*/
		/*position:absolute;*/
		/*float:left;*/
		float:right;
	}
	
	.contern{
		width:50px;
		height:50px;
		background-color:green;
	    margin-top:40px;
	}
	
	</style>
</head>
<body>
<div class="wrapper">
	<div class="contern"></div>
</div>
</body>
</html>

margin合并

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin合并</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    .wrapper{
          height:10px;
          background-color:red;
          /*和margin-top合并了，两个div的距离只有500px，
          如果margin-top:600px那么两个div的距离只有600px，
          就像是两个两个国家不能同时共用同一个领地，但是margin
          合并可以*/
          margin-bottom:500px;
     }
    .wrapper1{
    	 height:10px;
    	 background-color:green;
    	 margin-top:400px;
    }
	
	</style>
</head>
<body>
<div class="wrapper"></div>
<div class="wrapper1"></div>
</body>
</html>

如何解决margin合并的bug，触发bfc（但是在现实开发中，不需要解决合并问题）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin合并</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    .wrapper{
          height:10px;
          background-color:red;
          margin-bottom:500px;
     }
    .wrapper1{
    	 height:10px;
    	 background-color:green;
    	 margin-top:400px;
    }
	/*让他在一个bfc里面*/
	.wwwww{
		overflow: hidden;
	    }
	</style>
</head>
<body>
<!-- ① -->
<!-- <div class="wwwww">
<div class="wrapper"></div>
</div>
<div class="wwwww">
<div class="wrapper1"></div>
</div> -->

<!-- ② -->
<!-- <div class="wrapper"></div>
<div class="wwwww">
<div class="wrapper1"></div>
</div> -->

<!-- ③ -->
<div class="wrapper1"></div>
<div class="wwwww">
<div class="wrapper"></div>
</div>
</body>
</html>

3.浮动元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动元素float</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    
    .wrapper{
    	width:350px;
    	height:300px;
    	border:1px solid black;
    }	
    .contern{
    	/*浮动元素*/
    	float:left;
    	height:100px;
    	width:100px;
    	color:#fff;
    	background-color:black;
    }
	</style>
</head>
<body>
<div class="wrapper">
	<div class="contern">1</div>
	<div class="contern">2</div>
	<div class="contern">3</div>
	<div class="contern">4</div>
	<div class="contern">5</div>
	<div class="contern">6</div>
	<div class="contern">7</div>
</div>
</body>
</html>

在这里插入图片描述

3.浮动元素产生浮动流
①所有产生浮动流的元素，块级元素看不见他们，所以如下例子demo就会跑上去。
②但是产生了bfc的元素和文本类属性的元素inline以及文本 都能看到浮动属性，就不会跑上 去，而是在box后面展示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动元素float</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    
    .box{
    	float:left;
    	height:100px;
    	width:100px;
    	background-color:red;
    	opacity:0.5;
    }

    .demo{
    	height:150px;
    	width:150px;
    	background-color:green;
    }
	</style>
</head>
<body>
<div class="box"></div>
<div class="demo"></div>
</body>
</html>

在这里插入图片描述
4.用伪元素清除浮动流

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用伪元素清除浮动元素</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    
    .wrapper{
    	border:1px solid black;
    }	
    .contern{
    	/*浮动元素，产生了浮动流，wrapper元素变成行级标签*/
    	float:left;
    	height:100px;
    	width:100px;
    	color:#fff;
    	background-color:black;
    }
    .wrapper::after{
    	/*因为clear属性只能由块级元素调配所以让wrapper元素变成块级元素*/
    	clear:both;
    	display:block;
    	/*content一定要加*/
    	content:"";
    }
	</style>
</head>
<body>
<div class="wrapper">
	<div class="contern">1</div>
	<div class="contern">2</div>
	<div class="contern">3</div>
</div>
</body>
</html>

浮动作用
1、用浮动实现文字环绕图片的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>用浮动实现文字环绕图片的效果</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
    
    img{
    	float:left;
    	height:100px;
    	width:100px;
    }
    
	</style>
</head>
<body>
<img src="捕获.png" alt="">
<span>文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是一个句子（Sentence）、一个段落（Paragraph）或者一个篇章（Discourse）。广义“文本”：任何由书写所固定下来的任何话语。（利科尔） 狭义“文本”：由语言文字组成的文学实体，代指“作品”，相对于作者、世界构成一个独立、自足的系统。文本，是指书面语言的表现形式，从文学角度说，通常是具有完整、系统含义（Message）的一个句子或多个句子的组合。一个文本可以是 </span>
</body>
</html>

2.制作导航栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航栏</title>
	<style>
	*{
		margin:0;
		padding:0;
		color:#424242;
		font-family: arial;
	}
     .nav{
     	list-style: none;
     }
     /*清除浮动流*/
     .nav::after{
     	content:"";
     	display:block;
     	clear:both;
     }
     /*产生浮动流*/
     .nav .List-item{
     	float:left;
     	margin-left: 5px;
     	height:30px;
     	line-height: 30px;
     }
     
     a{
     	text-decoration: none;
     }
     .nav .List-item a{
     	display: block;
     	height:30px;
     	color:#f40;
     	padding:0 5px;
     	border-radius: 15px;
     }
     /*鼠标移上去的效果*/
      .nav .List-item a:hover{
       background-color: #f40;
       color:#fff;
      }
	</style>
</head>
<body>
<ul class="nav">
	<li class="List-item"><a href="#">天猫</a></li>
	<li class="List-item"><a href="#">聚划算</a></li>
	<li class="List-item"><a href="#">天猫超市</a></li>
</ul>
</body>
</html>
�H�
关注
专栏目录
Lesson7-bien-kieuDuLieu-toanTu
04-10
在本课程"Lesson7-bien-kieuDuLieu-toanTu"中，我们将...通过学习这些知识点，你将能够创建更复杂、更动态的网页，进一步提升你的前端开发技能。在实践中不断探索和实验，你会发现自己在HTML领域的知识逐渐丰富和深入。
htm-css-lesson
03-21
【标题】：“htm-css-lesson”是一个关于HTML和CSS的学习资源包，可能包含了从基础到进阶的课程或教程。 【描述】：“htm-css-lesson”这个描述简单直接，暗示了内容主要围绕HTML（超文本标记语言）和CSS（层叠样式...
2021.3.3作业
m0_51767687的博客
03-03 617
工程课系列-Level3-Web应用课
violet的博客
09-24 284
Web
index.html代表用户名,index.html
weixin_34522296的博客
06-04 1244
Tiny SDPM登陆body{font-family:'Microsoft Yahei'; margin:0 auto;background:#6d2a7f; background-image:url(/login/images/light.png) no-repeat center top;}ul,li{display:block;margin:0;padding:0;list-style:n...
第三章：3.1 在 index.html 文件中，编写一个登录表单
刚——博客之路
07-19 1513
1. 在sign/templates/index.html 文件中，开发一个简单的 登录表单       2. 启动：Django服务，访问 ： http://127.0.0.1:8000/index/
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程
夜飘凌的博客
05-14 8958
总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程 文章目录总结Vue中index.html、main.js、App.vue、index.js之间关系以及Vue项目加载流程1 vue中index.html、main.js、App.vue、index.js关系简介1.1 项目的运行入口index.html1.2 入口文件main.js1.3 根组件App.vue1.4 控制路由index.js2 Vue项目加载流程 1 vue中index.html
lesson4--html-css基础主要知识点
wywywy_的博客
05-18 167
一、文字溢出处理 1.单行文本溢出处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单行文本溢出处理方法</title> <style> *{ margin:0; padding:0; } .text...
Lesson10-Forms
04-04
在"Lesson10-Forms-main"文件中，可能包含示例代码、CSS样式表和注释，供学习者实践和理解以上知识点。通过这个课程，你可以掌握如何使用CSS来实现美观、功能完善且易于访问的HTML表格，提升你的网页设计技能。
Lesson9-responsive
04-02
在"Lesson9-responsive"中，你可能会学习到以下关键知识点： 1. **流式布局**：流式布局是响应式设计的基础，它允许元素根据屏幕大小自动调整其宽度，保持内容的连续性和可读性。 2. **媒体查询**：CSS3引入了媒体...
COMP397-W2021-Lesson6a-Builds
03-12
在"Lesson6a-Builds"中，我们可能会学习到以下关于HTML的知识点： 1. **基础语法**：理解HTML的基本结构，包括文档类型声明`<!DOCTYPE html>`，以及如何使用`<html>`、`<head>`和`<body>`标签来组织整个文档。 2. ...
Express教程02：使用中间件处理静态文件和数据请求
weixin_34237596的博客
04-24 204
阅读更多系列文章请访问我的GitHub博客，示例代码请访问这里。 static中间件 static是Express自带的中间件，主要用于处理客户端对于静态文件的请求，用法如下： 示例代码：/lesson02/server.js server.use(express.static('./static/')) 复制代码打开http://localhost:8080/index.html，即可看到页...
计算机
weixin_45746803的博客
10-13 328
## 标题我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会我不会...
代驾应用系统 SSM毕业设计 附带论文.zip
11-15
代驾应用系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
线上书籍查阅系统 SSM毕业设计 附带论文.zip
11-15
线上书籍查阅系统 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
c语言教工工资管理系统.rar
11-15
c语言教工工资管理系统
绘制数论中的涡旋图，用html，css，javascript实现
最新发布
11-15
可保存图片，开源，绘制奇妙美丽的图片
(源码)基于XilinxFPGA加速的面部评分系统.zip
11-15
# 基于Xilinx FPGA加速的面部评分系统 ## 项目简介 本项目是一个基于Xilinx FPGA加速的面部识别和评分系统，名为FaceScore。该项目在国际夏季学校中作为案例研究完成，旨在展示如何在嵌入式系统中高效部署深度学习应用。通过利用Xilinx的硬件加速技术，系统能够实现快速且高效的面部识别与评分功能。 ## 项目的主要特性和功能 1. 面部检测利用深度学习模型从视频流中识别出人脸，并输出人脸的坐标。 2. 硬件加速通过Xilinx FPGA加速深度学习模型的计算密集型部分，如卷积操作。 3. 面部评分对检测到的人脸进行特征提取，并通过图像分类CNN模型进行评分。 4. 整体架构项目包含ARM处理器（用于视频流和图像处理）、面部检测模块、DPU（FPGA上的软核）和面部评分模块。 ## 安装与使用步骤 假设用户已经下载了本项目的源码文件。 1. 环境准备 安装Xilinx提供的开发环境及相关工具链。
PHP学生成绩查询(源代码+论文).rar
11-15
PHP学生成绩查询(源代码+论文)
新概念英语第二册Lesson1-10知识点与练习解析
"新概念英语第二册的前10课涵盖了重要的语言知识点，包括词汇、短语、句型和语法。这些课程旨在帮助学习者提升英语听说读写能力，特别是理解和运用一般过去时态。" 在《新概念英语第二册》的前10课中，Lesson1 "A ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值