html开发笔记导航栏样式

最新推荐文章于 2024-06-06 15:17:50 发布
最新推荐文章于 2024-06-06 15:17:50 发布
阅读量796 收藏 1
点赞数
分类专栏： web前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamInTheWorld/article/details/78604440
版权

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>title</title>

<style type="text/css">
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

 html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
 body{margin:0}
 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
 audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
 audio:not([controls]){display:none;height:0}[hidden],template{display:none}
 a{background-color:transparent}
 a:active,a:hover{outline:0}
 abbr[title]{border-bottom:1px dotted}
 b,strong{font-weight:700}
 dfn{font-style:italic}
 h1{margin:.67em 0;font-size:2em}
 mark{color:#000;background:#ff0}
 small{font-size:80%}
 sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
 sup{top:-.5em}
 sub{bottom:-.25em}
 img{border:0}
 svg:not(:root){overflow:hidden}
 figure{margin:1em 40px}
 hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
 pre{overflow:auto}
 code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
 button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}
 button{overflow:visible}
 button,select{text-transform:none}
 button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
 button[disabled],html input[disabled]{cursor:default}
 button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
 input{line-height:normal}
 fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}
 legend{padding:0;border:0}
 textarea{overflow:auto}
 optgroup{font-weight:700}
 table{border-spacing:0;border-collapse:collapse}
 td,th{padding:0}



 body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#FFF}
 button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
 a{color:#337ab7;text-decoration:none}a:focus,a:hover{color:#23527c;text-decoration:underline}
 a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
 figure{margin:0}
 .h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit}
 .h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px}
 .h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px}
 .h1,h1{font-size:36px}
 .h2,h2{font-size:30px}
 .h3,h3{font-size:24px}
 .h4,h4{font-size:18px}
 .h5,h5{font-size:14px}
 .h6,h6{font-size:12px}
 p{margin:0 0 10px}

/*# sourceMappingURL=bootstrap.min.css.map */
</style>

<style type="text/css">
/* background-color 导航栏背景色 这里为蓝绿混色*/
.blog-nav {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
    box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links : color= 非选中状态下文字颜色*/
.blog-nav-item {
  position: relative;
  display: inline-block;
  padding: 10px;
  font-weight: 500;
  color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
  color: #fff;
  text-decoration: none;
}

/* Active state gets a caret at the bottom ， color=选中状态下文字颜色及正三角颜色*/
.blog-nav .active {
  color: #FFF;
}
.blog-nav .active:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  vertical-align: middle;
  content: " ";
  border-right: 5px solid transparent;
  border-bottom: 5px solid;
  border-left: 5px solid transparent;
}

.container {
    margin-top: 48px;
    position: relative;
}
</style>
</head>

<body>
    <nav class="blog-nav">
        <a class="blog-nav-item" href="test1.html">nav01</a>
        <a class="blog-nav-item" href="test2.html">nav02</a>
        <a class="blog-nav-item" href="test3.html">nav03</a>
        <a class="blog-nav-item active" href="#">nav04</a>
    </nav>
    <div align="left">
    <div class="container"align="left" style="background:translate; margin-left: 5%; background : transparent">
        <div id="fileinput-button" ><div>
            <div class="text-left" style="background : transparent"><h4>This is a nav css demo!</h4></div>
            </div>
        </div>
    </div>
    </div>


</body>
</html>

更多样式：
https://bootswatch.com/default/
已经文中用到的css框架normalize.css
http://necolas.github.io/normalize.css/

normalize.css在默认的HTML元素样式上提供的跨浏览器兼容方案
相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案；

_Ataraxia
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS样式学习笔记之四：创建导航条
05-24
在CSS（层叠样式表）的学习中，创建一个吸引人的、功能完善的导航条是至关重要的。这不仅可以提升网站的用户体验，还能为网站增加专业感。本文将深入探讨如何利用CSS来构建一个有效的导航条，主要关注以下几个方面：...
html实现好看的多种风格导航菜单(附源码)
热门推荐
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
06-29 4万+
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，代码独立，可以直接使用，效果酷炫，总有一款你喜欢的。也可直接预览效果。
HTML+CSS制作导航栏
qq_64867440的博客
10-13 4677
1.1效果展示。
利用HTML和CSS实现简易导航栏
weixin_74299972的博客
06-06 900
一个优秀的导航栏设计应该能够清晰、直观地展示网站或应用的结构和内容，帮助用户快速找到所需信息，同时体现品牌或产品的风格和特色。在定制导航栏时，我们可以根据具体需求和目标进行一系列的定制操作，如添加下拉菜单、改变链接样式、添加图标和动画效果等。同时，通过跟踪和分析用户的点击行为，可以不断优化导航栏的设计和布局。本文将指导你如何利用HTML和CSS的基础知识，为你的博客创建一个简易但实用的导航栏。通过合理的配色、字体、图标等元素的设计，可以提升导航栏的吸引力和用户体验。现在，我们已经创建了一个基本的导航栏。
html、css实现导航栏5种常用效果
ZunXin_2580的博客
02-22 8930
开发工具与关键技术：开发工具DW、vs code,关键技术html、css。 实现的效果：鼠标移入按钮时按钮中的内容就会出现，分别展示不同的出现效果。 效果难点：不使用JavaScript，那这个效果的难点就是在于:hover伪类的掌控，以及考验对html的结构掌握。 1、 html布局 在你想要的位置制作出5个导航栏按钮，或者更多。 这就是html结构中的样子，下面来分析这种结构的意义； ·整个导航栏就是一个菜单，表面上的就是一级菜单。 ·一级菜单里的内容就是二级菜单； ·一级菜单复制了多个之后就是导
html+css实现页面顶部导航栏
caterpie_771881的博客
11-03 1万+
利用html+css制作下拉式的导航栏
侧边导航栏（抽屉式设计）界面 (html + css)
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
BootStrap学习笔记之nav导航栏和面包屑导航
08-31
在本篇学习笔记中，我们将深入探讨Bootstrap中的两个重要导航元素：nav导航栏和面包屑导航。 首先，我们来看nav导航栏。Nav导航栏是网页顶部或侧边的主要导航结构，通常包含网站的主要链接或分类。在Bootstrap中，...
8款经典的css网站顶部导航栏样式.zip
09-23
在实际开发中，开发者可以参考这些示例来创建自己的导航栏，或者根据需求对这些样式进行"二次修改"。这不仅可以节省开发时间，还能保证样式的专业性。通过学习和理解这些代码，开发者可以提升自己在CSS布局、jQuery...
bootstrap响应式网页作业ech-1开发笔记
最新发布
06-24
HTML是网页的基础结构语言，Bootstrap提供了许多预定义的HTML组件，如导航条、按钮、表单、卡片等，这些组件已经内置了样式和响应式行为。例如，我们可以使用`<nav class="navbar navbar-expand-lg">`创建一个可折叠...
html5笔记.docx
07-03
- `<nav>`：导航链接集合。 - `<section>`：文档中的独立部分，比如章节、页眉、页脚或文章。 2. **超链接**：`网址" target="_blank">文字</a>`，`target`属性用于指定链接打开的方式，默认为_self（当前窗口）...
多种多样的导航栏样式
01-28
多种多样的导航栏样式，很多款选择，肯定酷炫！
html导航样式模板
11-29
多种导航样式模板集合；其中有生成模板的方式，使用方式。项目主要是为了练手 项目适用于移动端 PC端。有兴趣的可以下载看看
css 导航栏效果
蓝朽的小世界
04-08 7139
html实现导航栏效果
HTML5网页设计小案例：网页导航栏的设计
weixin_63279307的博客
08-02 1万+
HTML5网页设计小案例：网页导航栏的设计
HTML网页入门练习——导航栏布局设计
m0_53156691的博客
01-28 2万+
导航栏布局 首先进行页面需求分析，如图所示导航栏分为三部分，包括标志、导航、用户按钮。为了使结构看起来明显，我们使用色块表示，确保结构正确之后再往里面填充内容。 具体步骤如下：
HTML+CSS伸缩式导航栏
u013430418的博客
08-15 2545
今天制作伸缩式导航栏
HTML导航栏
m0_51700376的博客
09-01 2万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>导航栏</title> <style type="text/css"> *{ margin:0 auto; padding: 0; } .nav { width: 1200px; height: 50px; } ul li { list-style: none
HTML制作导航栏
m0_75264894的博客
06-09 5607
<img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt=""></div><div><img src="./img/西工商.png" alt="">人才济济</li><li>学校简介</li><li>学校领导
写一个html css js es6的笔记
09-13
### 回答1： 好的，我可以回答这个问题。HTML 是一种用于创建网页的标记语言，它可以定义网页的结构和内容。CSS 是一种用于控制网页样式的语言，它可以定义网页的布局、颜色、字体等样式。JavaScript 是一种用于添加交互性和动态效果的编程语言，它可以让网页变得更加生动和有趣。ES6 是 JavaScript 的一个版本，它引入了许多新的语法和特性，使得编写 JavaScript 更加方便和高效。以上就是我对 HTML、CSS、JavaScript 和 ES6 的简要介绍。 ### 回答2： HTML 是超文本标记语言（HyperText Markup Language）的缩写，用于构建网页结构。通过使用标签（tag），可以定义网页的内容、布局和样式。HTML5 是HTML的最新版本，它引入了新的元素和属性，提供了更多的功能和灵活性。 CSS 是层叠样式表（Cascading Style Sheets）的缩写，用于为网页添加样式和布局。通过使用选择器（selector）和属性（property），可以控制网页元素的外观和位置。CSS3 是CSS的最新版本，它引入了新的特性，如过渡效果（transition），动画（animation）和阴影（box-shadow）。 JavaScript 是一种脚本语言，用于为网页添加交互性和动态效果。它可以通过HTML标签的事件（如点击、鼠标悬停等）来触发特定的行为。 JavaScript ES6 是 ECMAScript 6 的缩写，是 JavaScript 最新的标准版本，引入了很多新的语法和特性，如箭头函数（arrow functions）、常量与块级作用域（const 和 let）、模块化（modules）等。 HTML的基本结构如下： ```html <!DOCTYPE html> <html> <head> <title>网页标题</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>页眉</header> <nav>导航栏</nav> <section>内容区域</section> <aside>侧边栏</aside> <footer>页脚</footer> <script src="script.js"></script> </body> </html> ``` 其中，`<!DOCTYPE html>`声明文档类型为HTML5，`<html>`标签包裹整个网页，`<head>`标签用于定义元数据和引入外部样式表和脚本文件，`<title>`标签定义网页标题，`<link>`标签引入外部CSS文件，`<script>`标签引入外部JavaScript文件。 CSS的基本用法如下： ```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; } section { background-color: #fff; color: #333; padding: 20px; } ``` 以上代码设置了背景颜色、字体和间距等样式。 JavaScript的基本语法如下： ```javascript // 变量声明与赋值 let name = 'John'; const age = 25; // 函数定义 function sayHello() { console.log('Hello!'); } // 箭头函数 const greeting = message => { console.log(message); } sayHello(); // 输出：Hello! greeting('Welcome to my website!'); // 输出：Welcome to my website! ``` 以上代码定义了变量和函数，并调用了函数输出信息。 ES6还提供了许多其他的特性，如模板字符串（template literals）、解构赋值（destructuring assignment）、Promise等，用于提供更强大、更简洁的开发工具。使用HTML、CSS和JavaScript开发网页可以创造出丰富多样的用户体验和网页交互效果。 ### 回答3： HTML (超文本标记语言)是用于构建网页结构的标记语言。通过使用不同的标签和属性，可以创建标题、段落、链接、图像等元素。HTML提供了一种简单的方式来将文本、图像和其他内容组织在一起，并以逻辑和结构化的方式呈现。 CSS (层叠样式表)用于控制网页中的布局和外观。它提供了一种样式语言，可以通过选择器和规则来定义网页元素的外观。通过使用CSS，您可以更改字体样式、背景颜色、间距和边框、响应式设计等。 JavaScript (JS) 是一种用于控制网页行为的脚本语言。它可以添加交互性和动态功能，例如验证表单、处理用户输入、创建动画等。通过JavaScript，您可以与用户交互并对网页进行动态更新。 ES6 (ECMAScript 6) 是JavaScript的一个新版本，提供了许多改进和新功能。它引入了let和const关键字来定义变量，箭头函数简化了函数的写法，模板字符串提供了更好的字符串插值，解构赋值方便了对象和数组的处理，扩展操作符可以方便地操作数组和对象等。 在学习这些技术的过程中，以下是一些建议和要点： 1. 使用语义化的HTML标记，清晰地定义网页的结构和内容。 2. 使用外部样式表或内部样式表来管理和组织CSS代码，以增加可维护性。 3. 利用CSS选择器和样式规则来定义元素的外观和布局，使用层叠和继承规则来优化样式。 4. 使用一致的命名约定和组织方式来组织JavaScript代码，以提高代码的可读性和可维护性。 5. 使用函数和事件处理程序来实现交互性和动态行为，避免全局变量的污染。 6. 在ES6中，尽量使用let和const来定义变量，使用箭头函数来简化函数的写法，利用模板字符串和解构赋值来提高代码的可读性。 7. 注意浏览器的兼容性问题，使用polyfills或者转译工具来支持旧版本的浏览器。 8. 通过阅读文档和教程，并实践编写代码来提高技能水平。 通过掌握HTML、CSS、JavaScript和ES6，您可以创建交互式和动态的网页，并为用户提供更好的用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值