Python全栈开发学习--HTML--CSS导航栏练习--Day5

最新推荐文章于 2023-06-06 11:08:51 发布
最新推荐文章于 2023-06-06 11:08:51 发布
阅读量420 收藏 2
点赞数 1
分类专栏： 学习 入门 记录 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mnioc/article/details/104460506
版权
记录 同时被 3 个专栏收录
19 篇文章 0 订阅
订阅专栏
学习
18 篇文章 0 订阅
订阅专栏
入门
16 篇文章 0 订阅
订阅专栏

前言

回顾前面几天学习的内容，一共学了标签，css样式，盒模型，以及定位，下面将使用之前学习到的内容做几个小案例。从而巩固所学知识。

一、竖向导航栏

1.1 方法：用无序列表构建表单
<ul>
	<li><a href="#">主页</a></li>
	<li><a href="#">新闻</a></li>
	......
</ul>
1.2 步骤：
  1. 先将导航条的主体元素写完。
<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
   <meta charset="utf-8" > 
   <title>竖向导航条</title>
</head>
<body>
   <nav>
   	<ul>
   		<li><a href="#">主页</a></li>
   		<li><a href="#">新闻</a></li>
   		<li><a href="#">学习</a></li>
   		<li><a href="#">登录</a></li>
   		<li><a href="#">注册</a></li>
   	</ul>
   </nav>
</body>
</html>
  1. 为导航条添加样式
/*清除浏览器默认的 marging 与 padding*/
/*设置字体大小与颜色*/
*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}

发现a默认自带的下划线有点影响美观

/*清除超链接默认的自带的下划线*/
a {
	text-decoration:none;
}

由于无序列表前面默认自带小圆点，不太好看，将其去掉

ul {
		list-style:none;   /*去掉小圆点*/
		width:120px;    /*为导航条整体设置宽度，高度我们采用默认文本高度*/
		background-color:#ffcccc;  /*背景颜色*/
		text-align:center;    /*设置文本居中对齐*/
		}

li{
	height:30px;    /*设置导航条每个条目的高度*/
	border-bottom: 1px dashed #ffffff; /*为了更好看，设置边框底部虚线条*/
	}

到这里导航条已经制作差不多，看一下效果
在这里插入图片描述
最后可以通过设置伪类，方便提醒用户选中的条目

li:hover{
	background-color:#ccffff;  /*鼠标悬停时，设置背景颜色*/
	}

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>竖向导航条</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
	}
	ul {
		list-style:none;
		width:120px;
		background-color:#ffcccc;
		text-align:center;
		}
	li{
		height:30px;
		border-bottom: 1px dashed #ffffff;
	}
	li:hover{
		background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">学习</a></li>
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</nav>
</body>
</html>

在这里插入图片描述
到这里我发现有一个bug，这样写的话，a超链接可点击的范围小于整个条目框，用户必须要对a超链接的范围点击才能跳转。由于a标签是内联元素，无法对齐设置宽度。
在这里插入图片描述
解决办法：
可以通过display将a标签变成块级元素，然后对其进行设置宽高即可。

a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
		border-bottom: 1px dashed #ffffff;
	}

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>竖向导航条</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
		border-bottom: 1px dashed #ffffff;
	}
	ul {
		list-style:none;
		}
	a:hover{
	background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">学习</a></li>
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</nav>
</body>
</html>

在这里插入图片描述
一个最简单，最基础的竖直导航条就实现了。当然在实际开发中不会有这么简单的需求，那就在此基础上不断完善就行了，正所谓千里之行，始于足下。

二、横向导航栏

横向导航栏内容跟竖直导航栏一样，只需求修改部分的CSS属性即可实现，ul、li都是块级元素，我们知道块级元素都是独占一行，那么该通过什么样的方式让所有的块级元素占一行呢？

回顾之前学的内容，发现有两种做法可以解决：

（1）使用float浮动定位

	li{
		float:left;
	}

在这里插入图片描述
（2）使用display修改元素类型

li{
		display:inline-block
	}

在这里插入图片描述
第二种做法中间会有空隙，不知道是为什么，还没解决。。。

<!DOCTYPE> 
<html lang="ZH-cn"> 
<head>
    <meta charset="utf-8" > 
    <title>竖向导航条</title>
	<style>
	*{
		marging:0;
		padding:0;
		font-size:20px;
		color:#000000;
	}
	a{
		text-decoration:none;
		background-color:#ffcccc;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
	}
	ul {
		list-style:none;
		}
	
	li{
		display:inline-block
		/*float: left*/
	}
	a:hover{
	background-color:#ccffff;
	}
	</style>
</head>
<body>
	<nav class="nav">
		<ul class="item">
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">学习</a></li>
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</nav>
</body>
</html>

三、下拉菜单

下拉菜单是导航中常用的一种形式，当鼠标悬停在某一目录的时候，其二级目录会显示。

还是使用ul来做，我们的下拉菜单由两部分组成，第一部分是标题部分，第二部分是该标题下对应的选项，使用列表构造。我们想要实现的功能是当用户鼠标悬停至学习编程的时候，显示其二级目录 HTML、python、java。

<div class="nav">
    <div class="title">学习编程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
3.1 思路

（1）默认页面，使用display：none属性将ul列表下的所有条目隐藏。
（2）当鼠标悬停至title处，使用伪类：hover设置display：block即可。
（3）使用：hover控制其他元素的样式有三种方式

  • parent控制子元素 son：
<div class="parent">
	<div class="son"></div>
</div>

/*鼠标悬停在parent处时， 改变son的背景颜色为蓝色*/
.parent:hover .son {
        background-color:blue;
    }
  • son1控制兄弟元素 son2：
<div class="parent">
	<div class="son1"></div>
	<div class="son2"></div>
</div>

/*鼠标悬停在son1处时， 改变son2的背景颜色为蓝色*/
.son1:hover + .son2 {
        background-color:blue;
    }
  • firend1控制就近元素 firend2：
<div class="firend1"></div>
<div class="firend2"></div>


/*鼠标悬停在firend1处时， 改变firend2的背景颜色为蓝色*/
.firend1:hover ~ .firend2 {
        background-color:blue;
    }

（4）使用：hover控制其他元素时，必须对需要隐藏的条目元素设置父级元素，否则当鼠标移开兄弟或者就近元素时，显示属性会失效，造成无法移开鼠标去点击条目的bug。

所以我们给标题和条目放在同一个div中，内容如下

<div class="nav">
    <div class="title">学习编程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
3.2 步骤

（1）元素内容如上所示
（2）设置CSS样式

（2.1）万能第一步

  *{
     padding: 0;
     margin: 0;		
 }

（2.2）给标题和选项添加css样式

.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
}
		
a{
	text-decoration:none;
	background-color:#f1f1f1;
	width:120px;
	height:31px;
	text-align:center;
	display:block;
}

（2.3）设置鼠标悬停时选项的背景颜色

a:hover{
		background-color:#ccffff;
		}

（2.4）ul设置默认隐藏

.plat{
      display: none;
}

（2.5）鼠标悬停显示

/*通过父元素改变子元素的属性*/
 .nav:hover .plat{
            display: block;
            clear: both;
        }

默认效果：
在这里插入图片描述
悬停时：
在这里插入图片描述
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;
			
        }
		.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
		}
        a{
		text-decoration:none;
		background-color:#f1f1f1;
		width:120px;
		height:31px;
		text-align:center;
		display:block;
        }
		
		a:hover{
		background-color:#ccffff;
		}

        .plat{
            display: none;
        }
        .nav:hover .plat{
            display: block;
        }
 
    </style>
</head>
<body>
<div class="nav">
    <div class="title">学习编程</div>
    <ul class="plat">
        <li><a href="#">HTML</a></li>
        <li><a href="#">python</a></li>
        <li><a href="#">java</a></li>
    </ul>
</div>
</body>
</html>

四、带下拉菜单的导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	/*清除padding、margin*/
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;	
        }
		
		/*清除列表前的小圆点*/
		ul{
			list-style:none;
		}
		
		/*全局a标签基本属性，设置为块元素*/
		a{
			text-decoration:none;
			background-color:#ffcccc;
			width:120px;
			height:31px;
			text-align:center;
			display:block;
			border-bottom: 1px dashed #ffffff;
		}
	/*设置标题样式，否则下拉选项会变成横向排列*/
		.title{
		background-color:#ffcccc;
		width:120px;
		text-align:center;
		border-bottom: 1px dashed #ffffff;
		}
		
       /*下拉选项的背景颜色*/
        .plat li a{
		background-color:#f1f1f1;
        }
		
		   /*鼠标悬停的背景颜色*/
		a:hover, .plat li a:hover{
			background-color:#ccffff;
		}
	
	  /*隐藏内容*/
        .plat{
            display: none;
        }
		
		 /*显示内容*/
        .title:hover .plat{
            display: block;
        }
 
    </style>
</head>
<body>
<nav>
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li class="title">
				<a href="#">学习编程</a>
				<ul class="plat">
					<li><a href="#">HTML</a></li>
					<li><a href="#">python</a></li>
					<li><a href="#">java</a></li>
				</ul>
			</li>
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</nav>

</body>
</html>

效果：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
	/*清除padding、margin*/
        *{
            padding: 0;
            margin: 0;
			font-size: 20px;
			color:#000000;	
        }
		
		/*清除列表前的小圆点*/
		ul{
			list-style:none;
		}
		
		/*全局a标签基本属性，设置为块元素*/
		a{
			text-decoration:none;
			background-color:#ffcccc;
			width:120px;
			height:30px;
			text-align:center;
			display:block;
		}
	
		.title{
		background-color:#ffcccc;
		width:120px;
		height:30px;
		text-align:center;
		}
		
        .plat li a{
		background-color:#f1f1f1;
        }
		
		a:hover, .plat li a:hover{
			background-color:#ccffff;
		}

        .plat{
            display: none;
        }
		
        .title:hover .plat{
            display: block;
        }
		
		li{
		float:left;
		}
 
    </style>
</head>
<body>
<nav>
		<ul>
			<li><a href="#">主页</a></li>
			<li><a href="#">新闻</a></li>
			<li class="title">
			<a href="#">学习编程</a>
				<ul class="plat">
					<li><a href="#">HTML</a></li>
					<li><a href="#">python</a></li>
					<li><a href="#">java</a></li>
				</ul>
			</li>
			<li><a href="#">登录</a></li>
			<li><a href="#">注册</a></li>
		</ul>
	</nav>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

初步实现导航栏最基本的功能，具体CSS样式设计有待加强。本文主要实现功能，美观另说。

Mnioc
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图灵Python全栈开发工程师-视频教程网盘链接提取码下载.txt
09-23
图灵Python全栈开发工程师课程是一门深入学习Python编程语言和全栈开发技术的实践性课程。通过该课程，学员将学会使用Python进行Web开发、数据库设计与操作、前后端框架使用等技能。课程注重实际项目案例，让学员...
html下拉菜单怎么竖直,导航条（垂直/水平/下拉菜单）
weixin_36374843的博客
06-03 3680
homeaboutServiceWorkNewsContactTelephMailToAddress1.准备。导航条的制作，不管是水平还是垂直，首先必须要有结构清晰的html代码。常用的一般是无序列表，list标签中包含标签；而下拉列表则是在list列表中嵌套一个新的无序列表。2.css的设定//清除自带格式-取消列表样式；//水平导航条需要list浮动，致使其内容不占据空间；//清除浮动的方法有...
适用于网站后台的竖向二级下拉导航菜单
IT技术学习的园地
05-06 1378
中国站长天空-网页特效-导航菜单-适用于网站后台的竖向二级下拉导航菜单与之间-->/*reset CSS*/body, div, ul, li, h3 { margin:0; padding:0}li { list-style:none;}body { font-size:12px; line-height:1.25; f
html-更多的样式选择器（伪元素选择器）--伪元素（first-letter\first-line\before\after）---ul-li无序列表 让鼠标放到菜单栏时候会出现一个跟随的下划线
weixin_47295886的博客
07-12 352
伪元素（first-letter\first-line\before\after）---ul-li无序列表 让鼠标放到菜单栏时候会出现一个跟随的下划线 position: absolute; //position: relative; // line-height: 50px; 设置行间距//float: left;*表示盒子是否浮动*/ list-style: none;/*清除单元格样式*/...
JavaScript DOM案例 点击按钮实现显示相应列表 多种方法
modao的博客
06-06 1241
本文通过不同方法实现一个小的点击触发事件按例，主要注意的是排他思想的使用和、let和var关键字的区别，希望以后能够收益，作为自己经验的积累
CSS笔记
wang544831183的博客
08-01 428
Css样式（cascading style sheet）层叠样式表 Body  a  .box{  } Css的目的：给html加各种各样的样式----html结构和css样式样式分离---便于维护更新 Css语法 选择器{属性名:属性值; 属性名:属性值; } 说明： 一个css样式包括选择器和格式声明语句 选择器就是选择给哪个html标签加样式 格式声明
HTML语言入门
ZQ_abc的博客
09-26 1332
HTML5语言入门 在接触HTML时，很多人可能会有一个疑问到底什么是HTML呢？HTML是用来描述网页的一种语言，它是一种超文本标记语言，也就是说，HTML不是一种编程语言，仅是一种标记语言。HTML在开发时遵循的是W3C标准，下面我们就来了解一下HTML。 HTML的发展史 （1）超文本标记语言——1993年6月发布； （2）HTML2.0——1995年11月发布； （3）HTML3.2——1...
无序列表简介
king220022的博客
04-12 2286
无序列表，很好理解，有序列表的列表项是有一定顺序的，而无序列表的列表项是没有顺序的。注意，ul标签和li标签也是配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。在该语法中，使用标签表示一个无序列表的开始和结束，表示这是一个列表项。跟有序列表一样，对于无序列表的列表项符号，等学了CSS之后，我们可以放弃type属性，而使用list-style-type属性。上面代码是错误的，因为ul元素的子元素只能是li元素，不能是其他元素。
Python全栈日记-UDP编程
02-24
本文来自于csdn，先了解一下网络的基础知识和UDP编程。本文很有意思哦，最后模拟了微信聊天。第一部分：网络基础（1）电信网络（电话网），负责话音通信，也就是打电话、接听电话。（2）有线电视网络，主要提供视频...
高效Ambari部署Python3脚本资源 - umx-deploy-script
最新发布
03-25
项目概述：本项目名为umx-deploy-script，旨在提供一种高效的Ambari部署方式，专门为Python 3...简而言之，umx-deploy-script是一个基于Python 3开发的Ambari部署脚本集，旨在简化集群管理和配置过程，提高运维效率。
HTML+css+jQuery实现导航栏效果--pc端
06-15
HTML+css+jQuery实现导航栏效果--pc端 适合前端，下载即可使用。 $(function(){ // 鼠标移入事件 $('.nav>li').mousemove(function(){ $(this).addClass('active').siblings('li').removeClass('active') // 为li添加名为active的class，并移除兄弟元素（li）上的名为active的class名 $(this).children('.level').css("display","block"); // 使li的子元素level显示 }) // 鼠标移出事件 $('.nav>li').mouseleave(function(){ $(this).children('.level').css("display","none"); //使li的子元素level显示 }) })
Python深度学习实战-源代码和数据集.rar
10-25
Python深度学习实战-源代码和数据集
HTML+CSS实现导航条
道阻且长，行则将至。
12-26 4282
HTML+CSS实现导航条： 1、HTML部分源代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>编译遇见未来</title> <link rel="stylesheet" href="css/style.css" > </head> <body> <ul> &l
Python学习第二十天——HTML、CSS选择器
m0_43424160的博客
05-13 246
HTTP协议 超文本传输协议 用来规定服务端和浏览器之间的数据交互的格式… 该协议你可以不遵循 但是你写的服务端就不能被浏览器正常访问 你就自己跟自己玩 你就自己写客户端 用户想要使用 就下载你专门的app即可 四大特性 1.基于请求响应 2.基于TCP/IP作用于应用层之上的协议 3.无状态 不保存用户的信息 eg:一个人来了一千次 你都记不住 每次都当他如初见 由于HTTP协议是无状态的 所以出现了一些专门用来记录用户状态的技术 cookie、session、token... 4.无/短链接
python 导航栏_python3.6+Flask+BootStrap--开发一个最基本网页导航栏
weixin_36032446的博客
01-28 915
最近学习了一下Python中的Flask框架，用了BootStrap和JS做了一个最基本的网页导航栏。先看一下目录：右键app.py运行结果如下：点击这个链接，得到网页显示效果：接下来看详细步骤，在pycharm中新建Flask项目，然后创建static文件夹，主要用来放css和img和js这些渲染网页的样式文件。创建templates文件夹，用来存放网页。BootStrap目前是主流的web框架...
html鼠星导航条,导航 - 组件 - H-ui前端框架官方网站
weixin_33049919的博客
06-07 348
导航4.2.1 导航条鼠标经过状态a:hover，当前选中状态li.current。下拉菜单效果，请参考4.3 下拉菜单。navbar-black 是黑色导航风格，自己使用时候，可以去掉这个类名，定制自己的风格。在navbar div上追加 navbar-fixed-top 样式，可以将导航条固定在网页顶部。HTML代码H-ui前端框架H-ui简单 · 免费 · 适合中国网站首页核心扩展一级导...
Python_day21--div、西开的网站重构、左侧、水平导航栏
Biu_Biu_0329的博客
07-05 538
一、div简介1、定义&lt;div&gt; 可定义文档中的分区或节（division/section）。&lt;div&gt; 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 &lt;div&gt;，那么该标签的作用会变得更加有效。2、用法&lt;div&gt; 是一个块级元素。这意味着它的内容自动地开始一个新行...
python如何设置工具栏_Python GUI教程二：菜单和工具栏
weixin_39929793的博客
11-21 790
Python GUI 教程二：菜单和工具栏摘要：这篇文章是Python GUI教程系列的第二篇，将介绍如何给界面添加菜单栏和工具栏作者：yooongchun微信公众号：yooongchun小屋STEP 1：状态栏：状态栏是程序中用来显示状态信息的部件。将以下内容保存为statusbar.py# -*- coding: utf-8 -*-"""这个程序展示一个状态栏Author:yooongchun...
纯html+css导航栏
qq_41212530的博客
04-17 2105
运行结果 导航栏代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
lnh-课件代码python全栈3期
07-26
### 回答1： lnh-课件代码python...总之，lnh-课件代码python全栈3期是一门集中教授Python全栈开发技术的课程，通过系统地学习，学员能够掌握使用Python开发全栈应用程序的能力，并在实践中不断提升自己的技术水平。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值