前端系列之CSS（布局案例）

最新推荐文章于 2023-07-03 13:54:11 发布

众拾达人

最新推荐文章于 2023-07-03 13:54:11 发布

阅读量875

点赞数

分类专栏：前端文章标签： css 布局前端

本文链接：https://blog.csdn.net/wtdask/article/details/79128395

版权

前端专栏收录该内容

58 篇文章 5 订阅

订阅专栏

效果图：

这里写图片描述

hmtl文件

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>CSS网页布局</title>
        <link href="css/index.css" rel="stylesheet">
    </head>

    <body>
        <!--头部-->
        <div class="header">
            <div class="logo">
                <img src="image/logo.png" alt="logo">
            </div>
            <div class="nav">
                <ul>
                    <li>首页</li>
                    <li>图片</li>
                    <li>视频</li>
                    <li>手记</li>
                </ul>
            </div>
        </div>
        <!--主体-->
        <div class="main">
            <div class="top">
                <img src="image/1.png">
                <!--遮罩层-->
                <div class="topLayer"></div>
                <div class="topLayer-top">
                    <div class="word">MY BEAUTIFUL LIFE</div>
                    <button>LOOK MORE ></button>
                </div>
            </div>
            <div class="middle">
                <div class="m-top">
                    <div class="commImg weiImg">
                        <img src="image/wb.png">
                        <div class="comm">MACROLOGY</div>
                    </div>

                    <div class="commImg chart">
                        <img src="image/wx.png">
                        <div class="comm">WCHAR</div>
                    </div>
                    <div class="commImg qq">
                        <img src="image/qq.png">
                        <div class="comm">QQ</div>
                    </div>
                </div>
                <div class="clear"></div>
                <div class="m-middle">
                    "I want to give goods things to record down,<br> after the recall will be very beautiful."
                </div>
                <div class="m-bottom">
                    <div class="m-com">
                        <img src="image/03-01.png">
                        <div class="des1">Cool Image</div>
                        <div class="des2">Record The Picture</div>
                    </div>
                    <div class="m-com">
                        <img src="image/03-02.png">
                        <div class="des1">Cool Image</div>
                        <div class="des2">Record The Picture</div>
                    </div>
                    <div class="m-com">
                        <img src="image/03-03.png">
                        <div class="des1">Cool Image</div>
                        <div class="des2">Record The Picture</div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
            <!--中间的底部部分-->
            <div class="bottom">
                <div class="content">
                    <div class="title">FROM THE PHOTO ALBUM</div>
                    <div class="pic-content">
                        <dl>
                            <dt><img src="image/04-01.png"></dt>
                            <dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.</dd>
                        </dl>
                        <dl>
                            <dt><img src="image/04-02.png"></dt>
                            <dd class="word">Life is like a cup of tea,let people lead a preson to endless aftertastes.You agagin good taste,it will always have a different taste, different people will have different taste more.</dd>
                        </dl>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div class="footer"></div>
    </body>

</html>

index.css文件

* {
    padding: 0;
    margin: 0;
}

.header {
    width: 100%;
    height: 50px;
}

.header img {
    width: 150px;
    height: 42px;
    padding-left: 50px;
    padding-top: 8px;
}

.header .logo {
    float: left;
}

.header .nav {
    float: right;
}

.header .nav ul {
    padding-right: 50px;
}

.header .nav ul li {
    float: left;
    list-style: none;
    width: 40px;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    font-weight: bolder;
    color: #7d7d7d;
}

.main .top {
    width: 100%;
    height: 300px;
}

.main .top img {
    width: 100%;
    height: 300px;
}

.main .topLayer {
    position: absolute;
    /*绝对定位*/
    top: 54px;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 300px;
    opacity: 0.5;
    /*透明度*/
}

.main .topLayer-top {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 200px;
    margin-top: -95px;
    z-index: 2;
    /*因为遮罩层也是脱离文档流的，所以要在这里设置相对高一些的层级*/
    right: 50%;
    margin-right: -250px;
}

.main .topLayer-top .word {
    padding-top: 50px;
    color: #ffffff;
    font-size: 45px;
    font-weight: bolder;
    /*字体加粗*/
    text-align: center;
    font-family: "Microsoft Sans Serif";
}

.main .topLayer-top button {
    width: 200px;
    height: 30px;
    margin-top: 25px;
    color: #ffffff;
    background-color: #f5704f;
    font-family: "Microsoft Sans Serif";
    text-align: center;
    font-weight: bolder;
    font-size: 14px;
    border-radius: 8px;
    margin-left: 150px;
}

.main .middle {
    width: 1000px;
    margin: 0 auto;
}

.main .middle .m-top .commImg {
    float: left;
    width: 33.3%;
    padding-top: 50px;
    text-align: center;
}

.main .middle .m-top .commImg img {
    width: 100px;
    height: 100px;
}

.main .middle .m-top .commImg .comm {
    font-size: 20px;
    color: #7d7c7f;
    font-weight: bold;
    padding-top: 20px;
}

.main .middle .m-middle {
    font-size: 22px;
    color: #e19796;
    font-weight: bold;
    padding-top: 50px;
    font-style: italic;
    text-align: center;
    padding-bottom: 50px;
}

.clear {
    clear: both;
}

.main .middle .m-bottom .m-com {
    float: left;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    font-size: 20px;
}

.main .middle .m-bottom .m-com img {
    width: 310px;
    height: 260px;
}

.main .middle .m-bottom .m-com .des1 {
    color: #7D7C7F;
    padding-top: 20px;
}

.main .middle .m-bottom .m-com .des2 {

    padding-top: 10px;
    color: #bdbdbc;
}

.main .bottom{
    background-color: #F9F9F9;
}

.main .bottom .content{
    width: 1000px;
    margin: 0 auto;
}

.main .bottom .content .title{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    font-family: "微软雅黑";
    padding-top: 50px;
    padding-bottom: 50px;
}

.main .bottom .content .pic-content dl{
    float: left;
    width: 470px;
    margin: 10px 12px;
}

.main .bottom .content .pic-content dl img{
    width: 470px;
    height: 460px;
}

.main .bottom .content .pic-content dl .word{
    padding-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #7D7C7F;
    padding-bottom: 50px;
}

众拾达人

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端系列之CSS（布局案例）

效果图：hmtl文件<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS网页布局</title> <link href="css/index.css" rel="stylesheet"> </head> <body> <!-
复制链接

扫一扫