1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>项目实战 PC端固定布局</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7. </head>
  8. <body>
  9.     <!-- body nav section 需要h1~h6标题大纲 div header不需要  -->
  10.     <header id="header">
  11.         <div class="center">
  12.             <!-- 一个页面最好就一个h1 让搜索引擎能更好的抓取关键字 -->
  13.             <h1 class="logo">旅行社</h1>
  14.             <nav class="link">
  15.                 <h2 class="none">网站导航</h2>
  16.                 <ul>
  17.                     <li class="active"><a href="###">首页</a></li>
  18.                     <li><a href="###">旅游咨询</a></li>
  19.                     <li><a href="###">机票订购</a></li>
  20.                     <li><a href="###">风景欣赏</a></li>
  21.                     <li><a href="###">公司简介</a></li>
  22.                 </ul>
  23.             </nav>
  24.         </div>
  25.     </header>
  26.     <div id="search">
  27.         <div class="center"></div>
  28.         <input type="text" class="search" placeholder="请输入想要去的景点">
  29.         <button class="button">搜索</button>
  30.     </div>
  31. <!--     <head>header</head>
  32.     <section>
  33.         <h2>bootstrap</h2>
  34.         <p>一个html5 标准框架</p>
  35.     </section>
  36.     <footer>footer</footer> -->
  37. </body>
  38. </html>

css文件：

  1. @charset "utf-8";
  2.  
  3. /*------------------------------------第一节导航栏部分------------------------------------*/
  4. /*本身外边距*/
  5. body, h1, ul {
  6.     margin:;
  7.     padding:;
  8. }
  9.  
  10. /* 去除ul小圆点 */
  11. ul {
  12.     list-style: outside none none;
  13. }
  14.  
  15. /* a 标签不需要下划线 */
  16. a {
  17.     text-decoration: none;
  18. }
  19.  
  20. .none {
  21.     display: none;
  22. }
  23.  
  24. #header {
  25.     width: 100%;
  26.     min-width: 1263px;
  27.     height: 70px;
  28.     background: #333;
  29.     /*header做个阴影*/
  30.     box-shadow: 0 5px 10px rgba(0,0,0,0.3);
  31.     position: relative;
  32.     z-index:;
  33. }
  34.  
  35. #header .center {
  36.     width: 1263px;
  37.     height: 70px;
  38.     margin: 0 auto;
  39. }
  40.  
  41. #header .logo {
  42.     width: 240px;
  43.     height: 70px;
  44.     background-image: url(../img/logo.png);
  45.     /* h1中的字向左移动到不能看到 */
  46.     text-indent: -9999px;
  47.     float: left;
  48. }
  49.  
  50. #header .link {
  51.     width: 650px;
  52.     height: 70px;
  53.     float: right;
  54.     /* 字体淡灰 */
  55.     color: #eee;
  56.     /* 文字垂直居中 设定高度和 ul高度相同即可 */
  57.     line-height: 70px;
  58. }
  59.  
  60. #header .link li {
  61.     width: 120px;
  62.     /* li 文字横向铺平 */
  63.     float: left;
  64.     text-align: center;
  65. }
  66.  
  67. #header .link a {
  68.     color: #eee;
  69.     display: block;
  70. }
  71.  
  72. #header .link a:hover,
  73. #header .active a {
  74.     background-color: #000;
  75. }
  76.  
  77. /*--------------------------------第二节 搜索框部分---------------------------------*/
  78. /*search 搜索图片*/
  79. #search {
  80.     width: 100%;
  81.     /*缩小页面滚动条右侧出现白色区域*/
  82.     min-width: 1263px;
  83.     height: 600px;
  84.     background: url(../img/search.jpg) no-repeat center;
  85.     position: relative;
  86. }
  87.  
  88. /*背景色div部分*/
  89. #search .center {
  90.     width: 600px;
  91.     height: 60px;
  92.     background-color: #000;
  93.     position: absolute;
  94.     top: 50%;
  95.     left: 50%;
  96.  
  97.     /*上右下左*/
  98.     margin: -30px 0 0 -300px;
  99.     /*园边框*/
  100.     border-radius: 10px;
  101.     /*透明度*/
  102.     opacity: 0.6;
  103. }
  104.  
  105. /*input 输入框部分*/
  106. #search .search {
  107.     width: 446px;
  108.     height: 54px;
  109.     background-color: #fff;
  110.     position: absolute;
  111.     top: 50%;
  112.     left: 50%;
  113.     /*上右下左*/
  114.     margin: -28px 0 0 -296px;
  115.     color: #666;
  116.     border: 1px solid #666;
  117.     border-radius: 10px;
  118.     font-size: 24px;
  119.     padding: 0 10px;
  120.  
  121.     /*处理某些浏览器点击后出现外边框*/
  122.     outline: none;
  123. }
  124.  
  125. /*搜索按钮部分*/
  126. #search .button {
  127.     width: 120px;
  128.     height: 54px;
  129.     background-color: #fff;
  130.     position: absolute;
  131.     top: 50%;
  132.     left: 50%;
  133.     /*上右下左*/
  134.     margin: -28px 0 0 175px;
  135.     color: #666;
  136.     border: 1px solid #666;
  137.     border-radius: 10px;
  138.     font-size: 24px;
  139.     cursor: pointer;
  140.     /*处理某些浏览器点击后出现外边框*/
  141.     outline: none;
  142.     font-weight: bold;
  143. }

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. golang简介

    GO语言是Google于2009年推出的一门新的系统编程语言 特点: 静态编译 垃圾回收 简洁的符号和语法 平坦的类型系统 基于CSP的并发模型 高效简单的工具链 丰富的标准库 为什么选择go语言 编 ...

  2. stl（set和pair）

    D - 4 Gym - 100989D In this cafeteria, the N tables are all ordered in one line, where table number ...

  3. 线段树（two value）与树状数组（RMQ算法st表）

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进行比 ...

  4. 【JAVA】java中的length和length()

    参考链接: 你注意到Java中的length和length()了吗?外加一个size() java中的求长度length有时有小括号,有时没有小括号,到底什么时候该加小括号呢? 总结: Java中St ...

  5. nodejs,事件轮询总结

    宏任务 script,setTimeoout,setInterval,setlmmediate(node 独有),I/o,render渲染 微任务 process.nextTick(),promise ...

  6. ASE Alpha Sprint - backend scrum 7

    本次scrum于2019.11.12在sky garden进行,持续30分钟. 参与人: Zhikai Chen, Jia Ning, Hao Wang 请假: Xin Kang, Lihao Ran ...

  7. elk系统生成请求数据测试承载量、宕机瓶颈shell

    elk-gen-data.sh: #!/usr/bin/bash#----------------------------------------------------# Comment: to g ...

  8. Linux就该这么学08学习笔记

    参考链接:https://www.linuxprobe.com/chapter-08.html 防火墙管理工具 众所周知,相较于企业内网,外部的公网环境更加恶劣,罪恶丛生.在公网与企业内网之间充当保护 ...

  9. I2C走线技巧

  10. 【LeetCode】BFS（共43题）

    [101]Symmetric Tree 判断一棵树是不是对称. 题解:直接递归判断了,感觉和bfs没有什么强联系,当然如果你一定要用queue改写的话,勉强也能算bfs. // 这个题目的重点是 比较 ...