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: 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;
}

 

posted @ 2018-06-08 14:47  土豆牛贼烦人  阅读(246)  评论(0)  编辑  收藏  举报