流体布局仿慕课网首页实战

最新推荐文章于 2024-10-01 23:20:42 发布

究极无敌暴龙战神X

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量65

点赞数

分类专栏： Web前端文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_56101688/article/details/134626796

版权

Web前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

效果：

CSS样式表

0.reset.css(清除默认样式)

        /* css reset */
        *{
            /*box-sizing 属性定义如何计算一个元素的总宽度和总高度，主要设置是否需要加上内边距(padding)和边框等。  */
            /* border-box 不包含 margin。 */
            box-sizing: border-box;
            padding: 0;
            margin: 0;

            /* outline: 0;
            -webkit-tap-highlight-color: transparent; */
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        /* img{
            /* 默认是inline-block，如果多张图片在同一行可以放开 不会换行 但是变成block会换行 */
            /* display: block; */
            /* vertical-align: top;
        } */ 
        /* .box{
            background-color: red;
        } */

1.layout.css(整体布局分为五块区域)

.header-layout{
    position: fixed;
    left: 0;
    top: 0;

    /* width: 320px; */
    width: 100%;
    height: 48px;
    background-color: white;
    border-bottom: 1px solid #e8e8e8;
}
.main-layout{
    padding: 48px 0 48px 0;
}
.slider-layout{
    /* height: 134px;
    background-color: green; */
    margin-bottom: 20px;
}
.course-layout{
    /* height: 382px;
    background-color: blue; */
    margin-bottom: 10px;
}


.tabbar-layout{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 48px;
    background-color: yellow;
    box-shadow: 0 -4px 4px rgba(0,0,0,0.15);
}

2.头部

header.css

.header {
    width: 100%;
    /* height: 48px; */
    background-color: #fff;
    padding: 0 20px;
}

.header-logo{
    float: left;
}
.header-logo-img{
    /* 不要同时设置宽或者高 要让图片等比例缩放 */
   height: 30px;
   /* 居中 */
   margin-top: 9px;
}
.header-toggle{
    float: right;
    padding: 10px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    margin-top: 4px;
}
.header-toggle-bar{
    display: block;
    width: 24px;
    height: 4px;
    background-color: #363636;
    border-radius: 2px;
    /* margin-top: 4px; */
}

.header-toggle-bar+.header-toggle-bar{
    margin-top: 4px;
}

3.幻灯片

slider.css(一张图片铺满整个屏幕)

.slider-layout img{
    width: 100%;
}

4.课程

course.css

.course{
    font-size: 14px;
    /* 清除浮动 */
    overflow: auto;

   }

   .course-title{
    width: 100%;
    padding: 0 0 10px 20px;
    color: #191919;
    font-size: 16px;
   }

   .course-list{
    padding-right: 20px;
    
   }

   .course-item{
    float: left;
    width: 50%;
    padding: 0 0 10px 20px;
   }

   .course-pic{
    margin-bottom: 6px;

   }

   .course-img{
    width: 100%;
   }

   .course-name{
    height: 40px;
    line-height: 20px;
    margin-bottom: 4px;
    color: #333;

    /* 多行文字省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal !important;
    word-wrap: break-word;
   }

   .course-price{
    color:#e93b3b;

   }

5.底部

tabbar.css

/* tabbar */
.tabbar{
    width: 100%;
    height: 100%;
    background-color: #f6f6f6;
    font-size: 14px;
}
.tabbar-item{
    float: left;
    width: 33.333333%;
    height: 100%;
    color: #c2cfcc;
    text-align: center;
    padding: 3px;
}
.tabbar-item-active{
    background-color: #e7f3f0;
    color: #00b38a;
}
.tabbar-item .iconfont{
    display: block;
    font-size: 20px;
}

index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面结构布局</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/layout.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/slider.css">
    <link rel="stylesheet" href="./css/course.css">
    <link rel="stylesheet" href="./icons/iconfont.css">
    <link rel="stylesheet" href="./css/tabbar.css">

    <style>
        
    </style>
</head>

<body>
    <!-- <div class="box"><img src="./1.png" alt=""></div> -->
    <header class="header-layout">
        <div class="header">
            <a href="./index.html" class="header-logo">
                <img src="./images/logo.png" alt="logo" class="header-logo-img">
            </a>

            <button id="header-toggle" class="header-toggle">
                <span class="header-toggle-bar"></span>
                <span class="header-toggle-bar"></span>
                <span class="header-toggle-bar"></span>

            </button>
        </div>
    </header>


    <div class="main-layout">
        <!-- 幻灯片 -->
        <div class="slider-layout">
            <img src="./images/slider/1.jpg" >
            

        </div>
        <!-- 免费课程 -->
        <div class="course-layout">
            <div class="course">
                <h2 class="course-title">免费课程</h2>
                <ul class="course-list">
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_free/1.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_free/2.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_free/3.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_free/4.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
        <!-- 实战课程 -->
        <div class="course-layout">
            <div class="course">
                <h2 class="course-title">实战课程</h2>
                <ul class="course-list">
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/1.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/2.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/3.jpg" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/4.png" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/5.png" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>
                    <li class="course-item">
                        <a href="javascript:;">
                            <p class="course-pic">
                                <img class="course-img" src="./images/course_coding/6.png" alt="">
                            </p>
                            <p class="course-name">
                                初识HTML(5)+CSS(3)-2020升级版
                            </p>
                            <p class="course-price">免费</p>
                        </a>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <!-- 标签栏 -->
    <div class="tabbar-layout">
        <div class="tabbar">
            <a href="./index.html" class="tabbar-item tabbar-item-active">
                <i class="iconfont icon-home"></i>
                <span>首页</span>
            </a>
            <a href="javascript:;" class="tabbar-item">
                <i class="iconfont icon-search"></i>
                <span>搜索</span>
            </a>
            <a href="javascript:;" class="tabbar-item">
                <i class="iconfont icon-personal"></i>
                <span>我的</span>
            </a>
        </div>
    </div>

</body>

</html>