<!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="header">

        <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>

    <div id="search">

        <div class="center"></div>

        <input type="text" class="search" placeholder="请输入想要去的景点">

        <button class="button">搜索</button>

    </div>

<!--     <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;

}

#header {

    width: 100%;

    min-width: 1263px;

    height: 70px;

    background: #333;

    /*header做个阴影*/

    box-shadow: 0 5px 10px rgba(0,0,0,0.3);

    position: relative;

    z-index:;

}

#header .center {

    width: 1263px;

    height: 70px;

    margin: 0 auto;

}

#header .logo {

    width: 240px;

    height: 70px;

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

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

    text-indent: -9999px;

    float: left;

}

#header .link {

    width: 650px;

    height: 70px;

    float: right;

    /* 字体淡灰 */

    color: #eee;

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

    line-height: 70px;

}

#header .link li {

    width: 120px;

    /* li 文字横向铺平 */

    float: left;

    text-align: center;

}

#header .link a {

    color: #eee;

    display: block;

}

#header .link a:hover,

#header .active a {

    background-color: #000;

}

/*--------------------------------第二节 搜索框部分---------------------------------*/

/*search 搜索图片*/

#search {

    width: 100%;

    /*缩小页面滚动条右侧出现白色区域*/

    min-width: 1263px;

    height: 600px;

    background: url(../img/search.jpg) no-repeat center;

    position: relative;

}

/*背景色div部分*/

#search .center {

    width: 600px;

    height: 60px;

    background-color: #000;

    position: absolute;

    top: 50%;

    left: 50%;

    /*上右下左*/

    margin: -30px 0 0 -300px;

    /*园边框*/

    border-radius: 10px;

    /*透明度*/

    opacity: 0.6;

}

/*input 输入框部分*/

#search .search {

    width: 446px;

    height: 54px;

    background-color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    /*上右下左*/

    margin: -28px 0 0 -296px;

    color: #666;

    border: 1px solid #666;

    border-radius: 10px;

    font-size: 24px;

    padding: 0 10px;

    /*处理某些浏览器点击后出现外边框*/

    outline: none;

}

/*搜索按钮部分*/

#search .button {

    width: 120px;

    height: 54px;

    background-color: #fff;

    position: absolute;

    top: 50%;

    left: 50%;

    /*上右下左*/

    margin: -28px 0 0 175px;

    color: #666;

    border: 1px solid #666;

    border-radius: 10px;

    font-size: 24px;

    cursor: pointer;

    /*处理某些浏览器点击后出现外边框*/

    outline: none;

    font-weight: bold;

}

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

  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 ...

随机推荐

  1. Redis进行数据同步

    数据库中的数据一般都涉及到需要对数据进行备份的,这样可以保证数据的安全性,并且如果将一个主设备的数据同步到多个从设备上,允许用户访问数据时可以从多个从设备进行读取, 这样还可以缓解主设备的压力,Red ...

  2. BZOJ 3331 （Tarjan缩点+树上差分）

    题面 传送门 分析 用Tarjan求出割点,对点-双连通分量(v-DCC)进行缩点,图会变成一棵树 注意v-DCC的缩点和e-DCC不同,因为一个割点可能属于多个v-DCC 设图中共有p个割点和t个v ...

  3. hdu 4453 约会安排(线段树区间合并)

    约会安排 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  4. POJ 3764 The xor-longest Path (01字典树)

    <题目链接> 题目大意: 给定一颗$n$个节点$(n\leq10^5)$,有边权的树,其边权$(0\leq w < 2^{31})$.让你求出这棵树上任意两个节点之间的异或最大值. ...

  5. ubuntu 系统类似QQ截图工具：DeepinScrot，flameshot

    经过一番探索! Ubuntu16.04 就用DeepinScrot 好用!不支持flameshot,反正我是半天没装成功 教程:https://blog.csdn.net/qq_19339041/ar ...

  6. 【问题解决方案】在Markdown中生成可以跳转到正文的目录的方法

    背景: 一篇博文比较长时,有目录会更方便更一目了然 这里介绍一下使用生成跳转目录的格式 注:GFM即github flavoured markdown 格式 <!-- GFM-TOC --> ...

  7. ES6——字符串

    1.多了两个方法       1)startsWith       2)endsWith 2.模板字符串(`..`)—— 方便字符串连接   `反单引号        1)可以直接把表达式塞进去 &a ...

  8. Linux学习笔记1-在CentOS 7中安装配置JDK8

    说明: 参考博客:http://blog.csdn.net/czmchen/article/details/41047187系统环境:CentOS 7安装方式:rpm安装JDK地址:http://ww ...

  9. python 从csv文件插入mysql数据库

    一个工作遇到的问题,将excel文件的内容插入到mysql数据库中. 总体思路是 excel文件-->转换成csv文件-->csv文件读取-->读取数据插入mysql数据库 用到py ...

  10. vue,一路走来（3）--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...