导航栏html文件：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>项目实战 PC端固定布局</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <!-- body nav section 需要h1~h6标题大纲 div header不需要  -->

    <header id="nav">

        <div class="center">

            <!-- 一个页面最好就一个h1 让搜索引擎能更好的抓取关键字 -->

            <h1 class="logo">旅行社</h1>

            <nav class="link">

                <h2 class="none">网站导航</h2>

                <ul>

                    <li class="active"><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>

        </div>

    </header>

    <head>header</head>

    <section>

        <h2>bootstrap</h2>

        <p>一个html5 标准框架</p>

    </section>

    <footer>footer</footer>

</body>

</html>

CSS文件：

@charset "utf-8";

/*本身外边距*/

body, h1, ul {

    margin:;

    padding:;

}

/* 去除ul小圆点 */

ul {

    list-style: outside none none;

}

/* a 标签不需要下划线 */

a {

    text-decoration: none;

}

.none {

    display: none;

}

#nav {

    width: 100%;

    height: 70px;

    background: #333;

}

#nav .center {

    width: 1263px;

    height: 70px;

    margin: 0 auto;

}

#nav .logo {

    width: 240px;

    height: 70px;

    background-image: url(../img/logo.png);

    /* h1中的字向左移动到不能看到 */

    text-indent: -9999px;

    float: left;

}

#nav .link {

    width: 650px;

    height: 70px;

    float: right;

    /* 字体淡灰 */

    color: #eee;

    /* 文字垂直居中 设定高度和 ul高度相同即可 */

    line-height: 70px;

}

#nav .link li {

    width: 120px;

    /* li 文字横向铺平 */

    float: left;

    text-align: center;

}

#nav .link a {

    color: #eee;

    display: block;

}

#nav .link a:hover,

#nav .active a {

    background-color: #000;

}

效果图：

Html5 学习笔记 【PC固定布局】 实战1 导航栏的更多相关文章

  1. CSS学习笔记--Div+Css布局实战(入门)

    基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...

  2. [html5] 学习笔记-响应式布局

    1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...

  3. Bootstrap学习笔记（8）--响应式导航栏

    说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...

  4. amazeui学习笔记--css（布局相关3）--辅助类Utility

    amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...

  5. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  6. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  7. 微信小程序开发：学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  8. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. amazeui学习笔记--css（布局相关2）--等分网格 AVG Grid

    amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...

  10. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

随机推荐

  1. Python自学第二天学习之《字符串与数字》

    一.基本数据类型: 数字:int类型,不可变类型 格式 : a=10 1.其他类型转换成int型 : b=“123” c=int(b) #转换类型 print(c)----- 123 print(ty ...

  2. python学习第六天运算符总结大全

    python学习第六天运算符总结大全,玖乐网络(www.96net.com.cn)列出下面详细 1,算术运算符 + 加 - 减 *乘 / 除 % 求模 ** 乘方 // 取整除 - 返回商的整数部分 ...

  3. Android关于SurfaceView,SurfaceHolder,SurfaceHolder.CallBack详解

    官方的定义: 1.SurfaceView SurfaceView是视图(View)的继承类,这个视图里内嵌了一个专门用于绘制的Surface.你可以控制这个Surface的格式和尺寸.Surfacev ...

  4. HttpGet请求传递数组（集合）

    在HttpGet请求是传递数组(集合)的方法: 1.使用Ajax方法传递 eg: ajax.({ url:/test, data:["], type:"get" }); ...

  5. iconfont图标symbol引用方式，有的图标不能通过设置color样式来修改颜色的解决办法

    现象:iconfont安装后的图标,是通过symbol引用方式,有的图标不能通过color修改颜色的解决办法,有的又可以. <svg class="icon" aria-hi ...

  6. [react-native]react-native填坑笔记

    填坑笔记 开始入坑RN,从最开始的学起难免有不少乱七八糟的问题,记录在这里. 1. 8081端口占用问题 按照官网教程搭建开发环境并按照下面代码运行时候有报错,显示8081端口的问题 react-na ...

  7. STREAM Benchmark及其操作性能分析

    STREAM 是业界广为流行的综合性内存带宽实际性能 测量 工具之一.随着处理器处理核心数量的增多,内存带宽对于提升整个系统性能越发重要,如果某个系统不能够足够迅速地将内存中的数据传输到处理器当中,若 ...

  8. 在linux终端中清空文件

    cat /dev/null > file_name vim file_name 把文件的前10行拷贝到新的文件中 head -n10 file_name1 > file_name2

  9. 分享学做的一个jsp注册页面

    分享一个自己学习时,用bootstrap,多方搜索做的注册页面,包括页面的非空验证.导入相关的bootstrap的js和css文件就可以了.背景很丑,可以自己换一个.后面进一步完善<(￣︶￣)↗ ...

  10. shell编程程序实例

    1.计算器 #!/bin/bash #test #by authors hdc 2018 function add(){ #实现加法 c=$[ $a + $b ] #相加 echo $c } func ...