div/css居中页面不变尺寸

来源：互联网发布：牛仔衬衫知乎编辑：程序博客网时间：2024/05/22 18:27

1、项目目录：

2、test.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Test</title>    <link href="css/style.css" type="text/css" rel="stylesheet" />    <link href="css/customfont.css" type="text/css" rel="stylesheet"/>    <script src="js/jquery-3.1.1.slim.js"></script></head><body class="backbround">    <div class="all-div">        <div class="navigation-list">            <div class="navigation-list-title">                <img src="img/navigation-title.jpg" style="margin: 55px">            </div>            <div class="navigation-list-column">                <p class="navigation-list-font">Page1</p>            </div>            <div class="navigation-list-column">                <p class="navigation-list-font">Page2</p>            </div>            <div class="navigation-list-column">                <p class="navigation-list-font">Page3</p>            </div>            <div class="navigation-list-column">                <p class="navigation-list-font">Page4</p>            </div>        </div>        <div class="auto-resize-left"></div>        <div class="navigation-div"></div>        <div class="auto-resize-right"></div>    </div>    <script>        $(".navigation-list").css("width",document.body.scrollWidth+"px");        $(".backbround").css("height",screen.height+"px");        $(".all-div").css("width",document.body.scrollWidth+"px")        $(".navigation-div").css("width",document.body.scrollWidth-300+"px");    </script></body></html>

3、customfont.css

.navigation-list-font {    height: 30px;    text-align: center;    font-size: 20px;    font-weight: bolder;    color: darkorange;    margin: 60px;    padding: 10px;}

4、style.css

.backbround {    background-image: url('../img/driver.png');    background-attachment:fixed;    background-repeat:no-repeat;    background-size:cover;    -moz-background-size:cover;    -webkit-background-size:cover;    margin:0;    padding:0;    height: 2000px;}.all-div {    height: 2000px;}.auto-resize-left {    width: 150px;    height: 2000px;    float: left;}.auto-resize-right {    width: 150px;    height: 2000px;    float: right;}.navigation-div {    height: 2000px;    float: left;}.navigation-list {    height:170px;    background-color: black;    filter:alpha(opacity=40);    -moz-opacity:0.4;    -khtml-opacity: 0.4;    opacity: 0.4;}.navigation-list-title {    width: 30%;    height: 170px;    background-color: black;    float: left;}.navigation-list-column {    width: 15%;    height: 170px;    background-color: black;    float: left;}

0 0