02.css创建导航栏

最新推荐文章于 2024-08-22 11:40:47 发布
最新推荐文章于 2024-08-22 11:40:47 发布
阅读量371 收藏 7
点赞数 4
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Z533121237/article/details/140308889
版权
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>作业2.1</title>
  8.     <style>
  9.      *{
  10.         margin:0px;
  11.     }

  12.  
  13.         .box{
  14.             width: 800px;
  15.             height:50px;
  16.             background-color: black;
  17.             margin: auto;
  18.             text-align: center;
  19.             border-radius: 15%;
  21.         }
  22.          
  23.         .kong1{
  24.             display: inline;
  25.             width: 100px;
  26.         }
  27.         li{
  28.             list-style:none;
  29.             display:inline-block;
  30.             border: 1px soldred;
  31.             background-color:black;
  32.             box-shadow: 10px 10px 10px gray;
  33.             text-align: center;
  34.             color: aliceblue;
  35.             margin-top: 10px;
  36.             }
  37.        
  38.     </style>
  39. </head>
  40. <body>
  41.    
  42.     <div class="box">
  43.         <div class="kong1"></div>
  44.     <li class="li1">游戏1</li>
  45.     <li class="li2">游戏2</li>
  46.     <li class="li3">游戏3</li>
  47.     <li class="li4">游戏4</li>
  48.     <li class="li5">游戏5</li>
  49.     <li class="li6">游戏6</li>
  50.     <li class="li7">游戏7</li>
  51.     <li class="li8">游戏8</li>
  52.     <li class="li9">游戏9</li>
  53.     <div class="kong2"></div>
  54. </div>
  55. </body>
  56.  </html>

红豆子不相思
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用css做导航栏,利用CSS制作导航栏
weixin_31090341的博客
08-03 9448
导航栏是一个网站不可或缺的一部分,它可以让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。基于初学者对css各种属性的综合运用还不是很熟练，小编今天就教大家怎样利用CSS各种属性制作导航栏。首先我们来看一些简单的导航栏效果:一、导航栏的基础代码导航栏基本上是一个链接列表，因此使用ul和li元素是非常合适的。我们先看一下基础代码:运行效果...
css定义导航栏加框,使用CSS在导航栏中显示边框三角形
weixin_39901332的博客
08-03 720
我正在试图创建一个导航栏，并在其上悬停了该项目下的箭头。这里就是我试图让：使用CSS在导航栏中显示边框三角形 因为我已经使用了伪元素before和after箭头。下面是一些代码：body {background: #FFFFFF;color: #FFFFFF;margin: 0px;padding: 0px;height: 100%;}.clear {clear: both;}.page-wrap...
使用 CSS 创建下拉导航栏
allway2的博客
02-06 5295
下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 HTML 元素和 CSS 创建一个下拉列表。所以，让我们学习创建一个下拉菜单。 创建下拉列表 可以使用<div>容器和<button>标签来创建下拉菜单以切换下拉菜单。该<a>标签用于在 <div> 中创建链接列表。 使用position:absolute下拉菜单和position:relative下拉内容，以便下拉菜单位于按钮下方。 使用box-shadow属性像卡片一样自定义下拉菜单。 当用
html+css创建侧边导航栏
m0_73905735的博客
11-04 4546
html+css，导航栏
CSS【导航栏】
随便写写
07-09 3964
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 和 元素非常有意义： 从列表中删除边距和填充： 创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色： 在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中： 可以在 or 上添加text-align:center 样式来让链接居中。可以在 border 上添加 borde............
CSS 导航栏
梁辰兴的博客
09-20 2341
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
CSS 水平导航栏
CyberPlayer的博客
02-22 2760
有两种创建水平导航栏的方法：使用行内或浮动列表项。 行内列表项 构建水平导航栏的一种方法是，将 <li> 元素指定为 inline： li { display: inline; } display: inline; 默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。 浮动列表项 创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接规定布局： 注释：背景色被添加到链接以显示链接区域
利用HTML和CSS实现简易导航栏
weixin_74299972的博客
06-06 882
一个优秀的导航栏设计应该能够清晰、直观地展示网站或应用的结构和内容，帮助用户快速找到所需信息，同时体现品牌或产品的风格和特色。在定制导航栏时，我们可以根据具体需求和目标进行一系列的定制操作，如添加下拉菜单、改变链接样式、添加图标和动画效果等。同时，通过跟踪和分析用户的点击行为，可以不断优化导航栏的设计和布局。本文将指导你如何利用HTML和CSS的基础知识，为你的博客创建一个简易但实用的导航栏。通过合理的配色、字体、图标等元素的设计，可以提升导航栏的吸引力和用户体验。现在，我们已经创建了一个基本的导航栏。
制作导航栏并使用CSS美化,CSS3样式创建一个漂亮简洁的导航栏
weixin_42464553的博客
08-03 1950
本教程旨在教大家结合CSS3样式创建一个漂亮，简洁的导航栏。而在过去，我们只能借助图片，JavaScript和div层进行创作。注意：下面所有的示例都是在Mozilla Firefox，Safari和Chrome中进行测试。你也可以再IE等非上述浏览器中测试一下实际效果。准备工作在网页设计的早期，外观漂亮，设计精美的导航栏就是保持网站条理清晰，结构良好的强有力元素之一。在过去，一个好的设计所用到的...
CSS导航栏
weixin_43535265的博客
03-11 1478
易用的导航对于任何网站都很重要。 通过使用 CSS，您可以将无聊的 HTML 菜单转换为美观的导航栏。 导航栏 = 链接列表 导航栏需要标准 HTML 作为基础。 在我们的实例中，将用标准的 HTML 列表构建导航栏。 导航栏基本上就是链接列表，因此使用 <ul> 和 <li> 元素会很有意义。 一、垂直导航栏 创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色： 代码如下： <!DOCTYPE html> <html> <he
html+css侧边伸缩导航栏
01-26
总结起来，创建一个 HTML+CSS 侧边伸缩导航栏涉及以下几个步骤： 1. 设计 HTML 结构，包括导航栏链接、子菜单和控制按钮。 2. 使用 CSS 设置导航栏的基础样式，如颜色、宽度等。 3. 添加过渡效果以实现平滑的伸缩...
纯CSS实现导航栏下划线跟随滑动效果
09-27
在网页设计中，创建动态且交互性强的用户体验是至关重要的，纯CSS实现导航栏下划线跟随滑动效果就是这样一个例子。这种效果能够增加用户对导航栏的感知，提升网站的交互性。通过CSS，我们可以避免使用JavaScript，...
纯CSS实现导航栏Tab切换效果
09-27
例如，创建两个列表项，并且每个列表项内部包含一个链接，这些链接的锚点指向对应的显示内容的ID。同时，每个内容区域初始时是隐藏的，通过CSS设置为display:none，当对应的锚点被激活时（即:target伪类适用），则该...
css动感导航栏特效代码
03-20
在创建动感导航栏时，我们需要了解以下几个CSS关键概念： 1. **盒模型**：每个HTML元素都可以视为一个盒子，包含内容、内边距、边框和外边距。理解盒模型对于精确控制元素尺寸和间距至关重要。 2. **选择器与属性**...
HTML+CSS 实现伸缩式导航栏.zip
05-09
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
CSS的:placeholder-shown伪类：精确控制输入框占位符样式
2402_85758349的博客
08-17 906
伪类代表的是一个输入字段（或元素）在其内显示占位符文本的状态。当输入框为空且占位符可见时，这个伪类就生效。这对于创建更丰富的表单样式和交互效果非常有用。
探索tailwindcss多主题切换
xuefeng11111的博客
08-18 430
探索tailwind+css变量切换主题
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
最新发布
lulei5153的博客
08-22 110
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
DOM CSS: Understanding the Intersection of HTML and Style
lly202406的博客
08-22 370
The Document Object Model (DOM) and Cascading Style Sheets (CSS) are two fundamental components of web development. DOM provides a structured representation of HTML documents, allowing scripts to dynamically interact with the content, structure, and style
html5和css3导航栏
12-16
在创建导航栏的过程中，我们可以使用HTML5来定义导航栏的结构，例如使用元素来表示导航栏，使用和元素来创建导航栏的列表和单独的导航项。此外，我们还可以使用元素来创建超链接，从而实现导航栏中不同菜单项的跳转...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值