首页 > 代码库 > CSS练习绝对定位于页面宽度自适应

CSS练习绝对定位于页面宽度自适应

2024-09-30 08:32:39   203人阅读

<!DOCTYPE html>
<html>
<head>
    <title>九宫格布局</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
                    var w=$(document.body).width()+"px";
        $(".wrapper").css("width",w);
        $(".header").css("width",w);
        $(".bottom").css("width",w);

        });
    </script>
</head>
<body>
    <div class="wrapper">
    <div class="header">首页</div>
    <div class="nav">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <div class="space"></div>
    <div class="list-item">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
    <div class="bottom">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    width: 100%;
    max-width: 640px;
    width: expression_r(document.body.clientWidth > 640 ? "640px": "auto")
}

ul {
    padding: 0;
}

.wrapper {
    display: block;

    background: #fff;
    font-family: "微软雅黑";
    color: #6c6c6c;
}
.header {
    width: 100%;
    background: #555;
    height: 50px;
    border-bottom: #c6c6c6 solid 1px;
    text-align: center;
    line-height: 50px;
    vertical-align: middle;
    color: #fff;
    top: 0;
    position: fixed;
}

.nav {
    margin-top: 20px;
    background: #f5f5f5;
    width: 100%;
}
.nav ul li{
    margin:10px 0px 0px 0px;
    list-style: none;
    width: 25%;
    float: left;
    text-align: center;
    font-size: 200%;
    color: #fac240;
    line-height: 160px;
    border-bottom: #f5f5f5 solid 1px;


}
.space {
    clear:both;
    width: 100%;
    height: 15px;
    background: #f5f5f5;
}
.list-item ul li {
    list-style: none;
    width: 100%;
    height: 45px;
    border-bottom: #f5f5f5 solid 1px;
    line-height: 45px;
    vertical-align: middle;
    font-size: 200%;
    color: #fac240;
    text-align: center;
}

.bottom {
    height:70px;
    width: 100%;
    background: #f5f5f5;
    bottom: 0;
    position: fixed;
}
.bottom ul li {
    list-style: none;
    width: 25%;
    float: left;
    line-height: 50px;
    vertical-align: middle;
    text-align: center;
    font-size: 200%;
    color: #fac240;
}

 

CSS练习绝对定位于页面宽度自适应


联系
我们