css练习之导航条

最新推荐文章于 2023-12-18 20:24:10 发布
最新推荐文章于 2023-12-18 20:24:10 发布
阅读量411 收藏 1
点赞数
分类专栏： HTML&&CSS 文章标签： CSS flow 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/november_chopin/article/details/75805476
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;				
			}
			.nav{
				/*去除项目符号*/
				list-style: none;
				background-color: grey;
				width: 1000px;
				margin: 50px auto;
				/*解决高度塌陷问题*/
				overflow: hidden;
			}
			.nav li{
				float: left;
				/*占父元素的25%*/
				width: 25%;
			}
			.nav a{
				/*将a转化为块元素*/
				display: block;				
				width: 100%;
				text-align: center;
				padding: 5px 0px;
				/*去除下划线*/
				text-decoration: none;
				color: white;
				font-weight: bold;
			}
			/*设置鼠标移入的效果*/
			.nav a:hover{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">联系</a></li>
			<li><a href="#">关于</a></li>
		</ul>
	</body>
</html>

效果：


jsfantasy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css常用demo练习
SundayGoG的博客
05-30 1677
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
前端技术——4——CSS练习
kaoa000的专栏——非淡泊无以明志，非宁静无以致远
03-01 1842
仿抽屉新热榜界面： 写一个类似的页面，练习CSS的使用。 整个页面分为两大部分，一是蓝色的页头，然后是页体 头部，即蓝色一行的设置，是页面的头部： <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; pad
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1689
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
CSS简单练习案例
sokoooo的博客
02-17 3927
CSS简单练习案例 目录 CSS简单练习案例 1. 新闻 2. 小米侧边栏（简易） 3. 五彩导航栏 4. 产品模块 5. 新浪导航栏 6. 排行榜 7. 模块 #END（素材源于pink老师分享） 1. 新闻 1.1 css代码： body { font: 16px/28px 'Microsoft YaHei'; } h1 { font-weight: 400; ..
css 习题练习
一个字，学
04-27 280
css 习题练习 style样式代码可以单独放在新的.css脚本中，也可以直接写在.html脚本里: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=de
京东导航条.zip csshtml练习
07-28
css html
HTML+CSS大学生作业作品练习
最新发布
01-30
HTML+CSS大学生作业作品练习 作品组成 1.网址名称及宣传词 2.导航条，点击导航条内文字可跳转网页对应位置 3.景点、餐厅、酒店、民宿、攻略等网页内容 4.固定在左上角的导航器，点击导航器内文字可跳转网页对应位置
css练习示例.rar
03-07
css练习示例.rarcss练习示例.rarcss练习示例.rarcss练习示例.rar
HTML+CSS极简大学生作业作品练习
01-29
HTML+CSS极简大学生作业作品练习 作品组成 1.网址名称及宣传词 2.导航条，点击导航条内文字可跳转网页对应位置 3.景点、餐厅、酒店、民宿、攻略等网页内容
模仿京东首页顶部导航条涉及到的图标
12-18
图标下载于阿里巴巴iconfont网站，网址是：https://www.iconfont.cn/；该网站的图标字体数量比较多，适合自己练习使用，如果商用最好提前练习作者，确认版权之后在使用。
仿美图导航栏
03-30
仿美图导航栏可用于自己项目
CSS导航条菜单之带小三角形的实现代码
09-22
主要介绍了CSS导航条菜单之带小三角形的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
42道CSS高频题整理(附答案背诵版)
帅地
12-18 1115
初始化 CSS 样式的方法通常是在你的 CSS 文件的开始部分，添加一段 CSS 代码，明确设置所有元素的一些基本样式，例如外边距，内边距，字体大小等。媒体查询是 CSS3 的一个重要特性，它允许我们根据设备的特性，如视窗宽度，像素密度等，来应用不同的 CSS 规则。因此，编写简单、高效的 CSS 选择器是很重要的。总结一下，Padding 是元素的内部空间，它会影响元素的尺寸，并且会显示元素的背景。Margin 是元素的外部空间，它不影响元素的尺寸，只影响元素与其他元素的距离，并且不显示元素的背景。
css布局 flex布局 grid网格布局 布局练习
好好学习天天向上
06-04 1822
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。主轴：弹性元素的排列方式为主轴 侧轴：与主轴垂直方向为侧轴justify开头表示与主轴相关 align开头表示侧轴相关指定容器中弹性元素的排列方式，设置主轴方向 row 默认值，弹性元素在容器中水平排列 从左向右 row-reverse 默认值，弹性元素在容器中水平排列 从右向左 column 弹性元素纵向排列 自上向下 column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行 nowrap:默认值
DAY34-CSS练习
qq_42775808的博客
04-09 75
不同盒模型如果没有设置，则默认位IE盒子模型//IE盒子设定BFC（Block Formatting Context）叫做“格式化上下文"BFC 触发条件（1）float的属性不为none；（2）position为absolute或fixed；（3）display为inline-block，table-cell，table-caption，flex；（4）overflow不为visibleIFC（inline Formatting Context）叫做“格式化上下”
css高级篇学习two
m0_71774042的博客
07-26 54
定义变量需要两步，首先用选择器选择变量可以调用的范围，如:root{} 就是在整个元素中都可以调用调用使用var（自己定义的值的名字，备选值当找不到变量时使用);为什么要使用变量直接指定不是更方便吗？方便变量的调整，只需要修改一个地方就可以。方便局部变量修改，例如当你想要改变局部运用的全局变量中的颜色值mycolor时，只需要在该局部的选择器用相同的属性名覆盖即可，范围越精确优先级越高。例子，图方便还是用之前的div<style>:root {
html+css网页练习二
qq_52108058的博客
02-04 1672
这是某茶叶公司的官网，以下效果图是商品展示页。 该项目包含prolist.html、css文件夹、img文件夹，其中，css文件夹包含include.css文件；img文件夹包含所用到的图片。分析： 4、include.css 二、电商网站页面 1、要求 这是某电商网页其中的页面，以下效果图是购物车模块。 该项目包含index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含所用到的图片。分析： 4、index.css 三、顶部信息栏页面 1、要求 项
CSS3练习
weixin_40794404的博客
07-09 352
CSS3练习 教材：CSS设计指南 文章目录CSS3练习思路1. 为盒模型添加阴影2. 将边界赋予圆角效果：3. 居中没有宽度的元素4.关于inline-block：5.过渡动画6.文本阴影7.CSS3 transform结果 思路 确定网页的布局与结构，将它们分割开来，先写出各个主要的结构化标记。 为包含整体的<body>标记等先添加一些基础的CSS，如font-family，background，margin等等，确定一个基准。 逐步对每个结构添加内容并进行样式化。 1. 为盒模型
CSS导航条练习
一李
10-16 339
首先清楚清除浏览器吗，默认的格式 设置ul的格式 子元素到父元素 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0...
css网页布局导航条
10-25
CSS网页布局导航条是网页设计中常用的一种元素，它通常位于页面的顶部或侧边，用于导航网站的各个页面或功能。导航条通常由多个链接组成，这些链接可以是文本、图标或按钮等形式。在CSS中，我们可以使用盒子模型来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值