第一阶段：CSS初步探讨

最新推荐文章于 2022-09-29 09:25:47 发布
最新推荐文章于 2022-09-29 09:25:47 发布
阅读量87 收藏
点赞数
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44501440/article/details/98040777
版权

关于float和clear元素的初步认识

1、css鼠标悬浮显示不同内容

html代码：

<div class="showRed">显示红盒</div>
	<div class="showBlue">显示蓝盒</div>
	<div class="box1"></div>
	<div class="box2"></div>

css代码：

box1, .box2{
		height: 150px;
		width: 150px;
		display: none;
	}
	.box1{
		float: left;
		background-color: red;
	}
	.box2{
		background-color: blue;
	}
	.showRed:hover{
		cursor: pointer;
		background-color: red;
	}
	.showRed:hover ~ .box1{
		/*使用兄弟选择器 */
		display: block;

	}
	.showBlue:hover{
		cursor: pointer;
		background-color: blue;
	}
	 .showBlue:hover ~ .box2{  
	 	/*使用兄弟选择器 */
		display: block;
		}

效果图：

省略。。。

2、二级菜单

1、二级菜单一：使用：：after

html代码：

		<ul>
			<!-- 一级导航 -->
			<li>
				<p>JavaEE</p>
				<!-- 二级导航 -->
				<ul>
					<li>CoreJava</li>
					<li>Linux</li>
					<li>XML</li>
					<li>Oracle</li>
				</ul>
			</li>
			<!-- 一级导航 -->
			<li>
				<p>WebUI</p>
				<ul>
					<li>Html</li>
					<li>CSS</li>
					<li>Javascript</li>
				</ul>
			</li>
			<!-- 一级导航 -->
			<li>
				<p>IOT</p>
			</li>
		</ul>
	</div>
	<!-- 导航结束 -->

css代码：

		/*重置*/
		body,ul ,p{
			margin: 0;
		}
		ul {
			padding: 0;
			list-style: none;
		}
		/*导航*/
		.nav {
			background:#333;
			color: #ededed;
		}
		.nav > ul::after {
			content: "";
			display: block;
			clear: both;
		}
		.nav li {
			line-height: 3em;
		}
		.nav > ul  > li {
			float: left;
			width: 100px;
			text-align: center;
			position: relative;
		}
		.nav > ul > li:hover {
			background-color: #ededed;
			color: #333;
		}
		/* 二级导航容器 */
		.nav > ul > li > ul {
			display: none;
			position: absolute;
			background-color: #ededed;
			color: #333;
			width: 100%;
		}

		.nav > ul > li:hover > ul  {
			display: block;
		}
	
	</style>

2、不使用，给nav设置一个固定高度

html代码

<p>给nav设置一个高度的二级导航菜单</p>
	<div class="nav">
		<ul>
			<li>Java
				<ul>
					<li>coreJava</li>
					<li>linux</li>
					<li>XML</li>
				</ul>
			</li>
			<li>WebUI
				<ul>
					<li>html</li>
					<li>css</li>
					<li>javascript</li>
				</ul>
			</li>
			<li>BigData</li>
		</ul>
	</div>


css代码

body,ul{
		margin: 0;
	}
	ul{
		padding: 0;
		list-style: none;
	}
	.nav{
		background-color: #888;
		height: 32px;
		/*给nav加一个固定高度*/
		color: lightblue;

	}
	.nav  ul li{
		float: left;
		width: 100px;
		text-align: center;
		position: relative;
		z-index: 999;
	}
	.nav li{
		line-height: 2em;
	}
	.nav>ul>li>ul{
		display: none;
		background-color: #333;
		position: absolute;
	}
	.nav >ul >li:hover{
		background-color: #333;
	}
	.nav >ul>li:hover>ul{
		display: block;
		/* position: absolute; */
	}

3、完整练习

代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>选择器</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
	body,ul{
		margin: 0;
	}
	ul{
		padding: 0;
		list-style: none;
	}
	.nav{
		background-color: #888;
		height: 32px;
		/*给nav加一个固定高度*/
		color: lightblue;

	}
	.nav  ul li{
		float: left;
		width: 100px;
		text-align: center;
		position: relative;
		z-index: 999;
	}
	.nav li{
		line-height: 2em;
	}
	.nav>ul>li>ul{
		display: none;
		background-color: #333;
		position: absolute;
	}
	.nav >ul >li:hover{
		background-color: #333;
	}
	.nav >ul>li:hover>ul{
		display: block;
		/* position: absolute; */
	}



	/* 使用伪元素实现二级菜单 */
	.head{
		background-color: green;
		color: gray;
	}
	.head ul{
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.head li{
		line-height: 3em;
	}
	.head>ul>li{
		float: left;
		position: relative;
		width: 100px;
		text-align: center;
	}
	.head>ul::after{
		content: "";
		display: block;
		clear: both;
	}
	.head>ul>li:hover{
		background-color: #ccc;
	}
	.head>ul>li:hover>ul{
		display: block;
	}
	.head>ul>li>ul{
		display: none;
		width: 100%;
		position: absolute;
		background-color: #ccc;
	}




	/* .. 作业二*/
	.box1, .box2{
		height: 150px;
		width: 150px;
		display: none;
	}
	.box1{
		float: left;
		background-color: red;
	}
	.box2{
		background-color: blue;
		position: absolute;
	}
	.showRed:hover{
		cursor: pointer;
		background-color: red;
	}
	.showRed:hover ~ .box1{
		/*使用兄弟选择器 */
		display: block;

	}
	.showBlue:hover{
		cursor: pointer;
		background-color: blue;
	}
	 .showBlue:hover ~ .box2{  
	 	/*使用兄弟选择器 */
		display: block;

	}



	.float1, .float2, .float3, .float4{
		width: 150px;
		height: 150px;
	}
	.float1{
		background-color: red;
	}
	.float2{
		background-color: green;
	}
	.float3{
		background-color: pink;
	}
	.float4{
		background-color: black;
	}


	.float2{
		float: left;
		display: none;
	}
	.float3{
		float: left;
		display: none;
	}
	.float{
		clear: left;
	}
	</style>
</head>
<body>

	<p>给nav设置一个高度的二级导航菜单</p>
	<div class="nav">
		<ul>
			<li>Java
				<ul>
					<li>coreJava</li>
					<li>linux</li>
					<li>XML</li>
				</ul>
			</li>
			<li>WebUI
				<ul>
					<li>html</li>
					<li>css</li>
					<li>javascript</li>
				</ul>
			</li>
			<li>BigData</li>
		</ul>
	</div>

	<p>不给nav设置高度，使用伪元素的二级导航菜单</p>

	<div class="head">
		<ul>
			<li>文学
				<ul>
					<li>西游记</li>
					<li>红楼梦</li>
					<li>水浒传</li>
				</ul>
			</li>
			<li>故事
				<ul>
					<li>一千零一夜</li>
					<li>阿里巴巴与40大盗</li>
				</ul>
			</li>
			<li>科技</li>
			
		</ul>
	</div>


	<br><br><br>
	<div class="showRed">显示红盒</div>
	<div class="showBlue">显示蓝盒</div>
	<div class="box1"></div>
	<div class="box2"></div>
	<br><br><br><br><br><br><br><br><br><br>

	<div class="float1">11</div>
	<div class="float2">22</div>
	<div class="float3">33</div>
	<div class="float4">44</div>
</body>
</html>

图片

在这里插入图片描述
引用大佬博客:float和clear讲解

weixin_44501440
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大语言模型应用指南：AutoGPT
禅与计算机程序设计艺术
06-30 319
大语言模型应用指南：AutoGPT 作者：禅与计算机程序设计艺术 / Zen and the Art of Computer Programming / TextGenWebUILLM 大语言模型应用指南：AutoGPT
第一阶段：CSS的初步探讨
weixin_44501440的博客
08-07 86
水平垂直居中的三种方法
css 重构_如何重构CSS –指南
cune1359的博客
06-28 435
编者注：本文是我们的代码优化系列的一部分，我们在其中探讨如何优化编码以提高效率，以期成为更好的编码人员。 如果我们要拥有可管理和优化的代码库，那么CSS重构就必须成为前端开发工作流程的重要组成部分。 重构CSS时，我们会清理并重新组织现有代码，而无需添加任何新功能或修复错误。 重构有助于防止CSS爆炸，提高代码的可读性和可重用性 ， 并使CSS更时尚，更快速地执行 。 通常需要一段...
基于HTML5+CSS+JacaScript和Java实现的校园校友APP前后台实现
毕业作品网站
09-29 782
主要目标是设计与实现成工校园APP，首先探讨APP的支撑技术，之后分析学生的功能需求和网络环境方面的需求，再进行总体需求分析和功能等需求分析，在这个基础上对成工校园APP进行设计和相关功能的实现，满足学生对于移动信息服务的需求，丰富校园文化，构建数字化移动成都工业学院学生信息服务平台，结合移动门户“随身、随时、随地”的特点，借助统一的移动端的表现形式为成都工业学院的学生提供：查看校园新闻，查看校园历史，查看校园风景，校友模糊查找等功能，让全体高校学生能够得到移动信息服务。
HTML第1~13章 阶段总复习 代码练习 CSS.ACCP6.0
05-10
在这个"HTML第1~13章 阶段总复习 代码练习 CSS.ACCP6.0"的学习资料中，我们可以深入探讨HTML的各个核心概念和实际应用。 在HTML的前13个章节中，通常会涵盖以下内容： 1. HTML基础：学习HTML的基本结构，包括文档...
v1：我的网站的第一个版本
02-16
在“v1：我的网站的第一个版本”中，我们看到的是一个Web开发项目的第一阶段成果，通常称为初始原型或基础版本。这个项目被称为“Web Portfolio”，表明它是一个展示个人或专业技能、作品和经历的在线平台。这个“v1...
projeto_1:训练
04-18
"project_1"可能是一个系列项目中的第一个，这意味着它可能是更大项目的一部分，或者是针对特定问题的初步尝试。训练阶段可能涉及到对新技术的学习，团队协作的磨合，以及为后续项目打下基础。 提到"CSS"标签，我们...
notary_project:公证项目第二天
05-22
这个项目的第二天可能涉及到项目启动后的初步工作和规划。让我们深入探讨一下这个项目可能涉及的IT知识，特别是与HTML相关的部分。 首先，HTML（HyperText Markup Language）是网页内容的基础语言，用于构建和设计...
使用html5+css3创建优雅的网站
01-14
在探讨如何运用HTML5与CSS3来构建一个优雅的网站之前，我们首先应当明确何为HTML5与CSS3，以及它们为何能够成为现代网站设计的关键技术。 ### HTML5：下一代的网页标准 HTML5是超文本标记语言（HyperText Markup ...
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
开题报告创权法律服务系统 已通过开题答辩的.doc
07-25
进入20世纪80年代，我国加快了改革开放的步伐，市场经济体制已逐步形成，我国的经济发展受世人所瞩目，但法律法规的置后，使经济发展不规范问题暴露的相当严重，特别是社会整体信用的缺失，使消费环境不断恶化。而如今随着城镇化的高速推进，精神追求远不及物质发展迅速，维权问题也越来越成为人们十分关注的社会话题。 维权是指维护个人或群体的合法权益，范围包括人身损害、土地纠纷、 医疗事故、婚姻、家庭、继承等民事纠纷所进行的行政及司法诉讼。维护消费者合法权益关系着全社会每个人的利益，群众利益无小事。维护消费者合法权益正体现着“权为民所用，利为民所谋”。而现如今由于法律规则的不完善加上自身对法律知识的不了解，导致很多公民的权益问题在复杂的社会情况下无法得到妥善的解决，使得公民的财产和心理受到难以弥补的损失，严重威胁到社会的安全与稳定，公民之间的诚信与统一。因此更便捷、迅速地维护公民的合法权益，已经成为了一个刻不容缓去解决的社会问题。
Matlab实现豪猪优化算法CPO-TCN-Multihead-Attention多输入单输出回归预测算法研究.rar
07-25
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
人力资源-6 团结一致共创未来新员工座谈会.pptx
07-25
人力资源-6 团结一致共创未来新员工座谈会.pptx
《AI大模型应用》--基于PepperBot，可以保留上下文的LLM群聊机器人实现.zip
07-25
上接OpenAI、文心一言，下接QQ、微信、Telegram 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！ 个人深耕AI大模型应用领域积累的成果，希望对您有所帮助。有大模型账号、环境问题、AI大模型技术应用落地方案等相关问题，欢迎详聊，能为您解决问题是我的荣幸！
开题报告传统糕点 已通过开题答辩的.docx
07-25
理论意义： 1、网页设计是信息传播的重要手段，通过合理的布局、图文搭配等设计元素，可以更好地传递传统糕点的信息。理论上，这涉及到传播学、信息传递模型等方面的理论研究，确保信息能够被受众准确、清晰地接收。 2、用户体验理论强调用户与网页之间的交互和感知。在传统糕点推广网页设计中，理论上的考虑应该包括用户友好的界面、易于导航的网站结构，以及引导用户深入了解传统糕点的设计元素。
GBT 2423.1-2008-试验A-低温
最新发布
07-25
GBT 2423.1-2008-试验A-低温
2500多个AI工具合集包括视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等待
07-25
概述： 在这个数字化时代，人工智能（AI）工具正迅速成为创意和生产力的强大推动力。我们的AI工具合集汇集了超过2500个工具，覆盖视频自动剪辑、AI视频生成、AI教程、视频换脸、图片生成等多个领域，为创意专业人士和爱好者提供了一个全面的解决方案。 特点： 视频自动剪辑： 利用先进的AI算法，自动识别并剪辑视频内容，节省编辑时间，提高效率。 AI视频生成： 创造全新的视频内容，无需实际拍摄，AI可以根据脚本或概念生成逼真的视频。 AI教程： 提供各种AI工具的使用教程，帮助用户快速掌握工具的使用技巧。 视频换脸： 通过深度学习技术，实现视频中人物面部的替换，为视频制作增添更多可能性。 图片生成： 根据用户输入的描述自动生成图片，为设计和创意工作提供灵感。 应用领域： 电影和电视制作 广告和营销 社交媒体内容创作 游戏开发 教育和培训 优势： 高效率： AI工具可以大幅度提高工作流程的速度。 易用性： 即使是初学者也能快速上手使用这些工具。 创新性： AI的创造力可以帮助用户实现前所未有的创意效果。 成本效益： 相比传统方法，AI工具可以降低生产成本。
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包
07-25
毕业设计javajsp高校科研项目管理系统sqlserver-qr源码含文档工具包 页面是jsp，数据库sqlserver，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 教师科研与论文信息交流平台 课题申报 感研申报 修改个人信息 查询成果申报 查询课题申报 未入库课题/成果 已入库课题成果 研审批 信息统计 查看用户信息 添加用户信息 按作者查询 信息查询 按日期查询 按关键字查询 按类型查动 包含：源码、数据库脚本、论文、答辩ppt、开题报告、环境工具包、相同框架项目的安装教程（在说明文档中）
第1关：CSS 类选择器
03-31
CSS类选择器是一种选择器，用于选择指定类名的HTML元素。它以点号（.）开头，后跟类名。 例如，要选择具有类名“myclass”的所有元素，可以使用以下代码： ``` .myclass { /* CSS样式规则 */ } ``` 在HTML中，可以将类名添加到元素的class属性中，如下所示： ``` <div class="myclass">这是一个有类名“myclass”的div元素</div> ``` 注意，一个元素可以同时拥有多个类名，以空格分隔。在CSS中，可以使用多个类选择器来选择这样的元素。 例如，要选择同时具有类名“myclass”和“otherclass”的所有元素，可以使用以下代码： ``` .myclass.otherclass { /* CSS样式规则 */ } ``` 这将只选择同时具有这两个类名的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值