Html5 学习笔记 【PC固定布局】 实战2 导航栏搜索区域
<!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 导航栏搜索区域的更多相关文章
- CSS学习笔记--Div+Css布局实战(入门)
基本页面布局 本教程带着大家做一个简单的页面布局 最重效果如下: 1.第一部,先创建上下左右4个DIV <!DOCTYPE html> <html> <head lang ...
- [html5] 学习笔记-响应式布局
1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...
- Bootstrap学习笔记(8)--响应式导航栏
说明: 1. 响应式导航栏,就是右上角的三道杠,点一下下方出现隐藏的导航栏.如果屏幕够大就显示所有的导航选项,如果屏幕小比如手机,就显示部分,剩下的放到三道杠里隐藏. 2. 外面套一个大的div,其实 ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid
amazeui学习笔记--css(布局相关2)--等分网格 AVG Grid 一.总结 1.与grid区别:网格中:am-g + am-u-xx-n 等分网格中只有一个: am-avg-sm-4(在u ...
随机推荐
- TCP协议-流量控制
流量控制是通过滑动窗口来实现控制的.使用了坚持定时器,防止发送失败导致死锁.
- python-批量解压zip、rar文件
这是一个用python写解压大量zip脚本的说明,本人新手一个,希望能对各位有所启发. GitHub:https://github.com/lgf133214/Windows-python3- 首先要 ...
- 洛谷 - P3803 - 【模板】多项式乘法(FFT) - FFT
https://www.luogu.org/problemnew/show/P3803 用反向学习的FFT通过这个东西. #include <bits/stdc++.h> using na ...
- Springboot消除switch-case方法
Springboot消除switch-case方法 背景 最近,在使用springboot开发一个接口的时候,需要根据接收的请求事件类型,去执行不同的操作,返回不同的结果,基本逻辑如下: String ...
- 让 Git Bisect 帮助你
让 Git Bisect 帮助你 英文原文:Letting Git Bisect Help You Git 提供来很多的工具来帮助我们改进工作流程. bisect 命令就是其中之一, 虽然由于使用 ...
- 使用js实现图片轮滑效果
经常在购物网站,看到那种图片轮滑的效果,所以看到有人实现了,所以我也就学习下了. 首先贴出html代码: <!DOCTYPE html> <html lang="en&qu ...
- 各种条码的校验码算法(EAN13,COD128,GTIN,UCC等)
校验码是由编码方案决定的,所以在代码中是否使用校验码和条码基本无关,但商品条码除外.今天给大家介绍几种校验码的计算方法. 一.商品条码: 商品条码中需要计算校验码的有:EAN-8(8位),EAN-13 ...
- python正则表达式 re (二)escape
背景: 在使用python的过程中,你肯定对转义字符的使用苦恼过,因为有的时候我们需要使用一些特殊符号如”$ * . ^”等的原意,有时候需要被转义后的功能,并且转义字符地使用很繁琐,容易出错,那拯救 ...
- Linux数据库还原备份
Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDBHotbackup的一个很好的替代品. https://www.percon ...
- pip安装依赖包
pip install -r requirements.txt setup.py 模块使用 https://blog.csdn.net/neil_pan/article/details/7900129 ...