<!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: 0; padding: 0; } /* 去除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: 9999; } #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; }