备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

实训-利用HTML+CSS做响应式项目网页

2022-12-30 120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实训-利用HTML+CSS做响应式项目网页

项目介绍

本次我们学习一种新的网页设计方式，响应式布局。即写一套CSS样式可以适用多种不同屏幕大小的设备，比如PC，ipad，手机端等。看一下本次最终的效果图：


PC端




iPad 端


M端（手机）



项目框架流程

1.导航

先写我们的HTML框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/mike.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
</head>
<body>
    <!-- 导航开始 -->
    <div class="nav">
        <div class="wrap">
            <div class="logo"></div>
            <div class="search">
                <form>
                    <input class="text-input" type="text" placeholder="查找课程">
                    <button class="iconfont">&#xe64d;</button>
                </form>
            </div>
            <div class="nav-bar">
                <ul>
                    <li><a href="#" class="nav-bar-active">首页</a></li>
                    <li><a href="#" >课程</a></li>
                    <li><a href="#" >公告</a></li>
                    <li><a href="#" >登录</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
</body>
</html>


接着写CSS样式

/* 导航样式开始 */
.nav{
    width: 100%;
    height: 66px;
    background-color: #88c5e1;
    border-bottom: 5px solid #54abd4;
}
.wrap{
    width: 87%;
    margin: 0 auto;
}
.logo,.search,.nav-bar{
    float: left;
    height: 66px;
}
.logo{
    width: 25%;
    background: url("../media/Brand.png") no-repeat left;
    background-size: 183px;
}
.search{
    width: 40%;
    position: relative;
}
.text-input{
    width: 100%;
    height: 40px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    box-sizing: border-box;
    border-radius: 2px;
    outline: none;
    margin-top: 13px;
    padding-left: 10px;
    transition: all .2s;
}
.search button{
    width: 40px;
    height: 34px;
    color: #54abd4;
    font-weight: 900;
    position: absolute;
    right: 2px;
    top: 16px;
}
.text-input:hover{
    background-color: #fff;
    border-color: #54abd4;
}
.nav-bar{
    width: 35%;
}
.nav-bar ul{
    float: right;
}
.nav-bar ul li{
    float: left;
}
.nav-bar ul li a{
    color: #fff;
    padding: 10px;
    display: block;
    margin-left: 8px;
    margin-top: 12.5px;
}
.nav-bar-active{
    border-bottom: 2px solid #fff;
}
.nav-bar ul li:hover>a{
    border-bottom: 2px solid #fff;
}
/* 导航样式结束 */


看一下最后效果



2.导航响应式设计

随着页面的不断缩放，我们将页面分为PC端、PAD端和M端（手机），现在只需要将要改变的css样式写到相应的位置下，并改变其相应的大小。在M端中，还有一个字体图标，它只存在M端，所有我们要在PC和PAD里面加上display:none属性。

<div class="btn">
    <i class="iconfont">&#xe66c;</i>
</div>

用CSS写响应式设计

/*******响应式设计******* */
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../media/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
}
/* PAD端 */
@media screen and (min-width:768px) and (max-width:992px){
    .logo{
        width: 18%;
        background: url("../media/Brand-M.png") no-repeat left;
        background-size: 86px;
    }
    .search{
        width: 42%;
        position: relative;
    }
    .nav-bar{
        width: 40%;
    }
    .btn{
        display: none;
    }
}
/* M端 */
@media screen and (max-width:768px) {
    .logo{
        width: 16%;
        background: url("../media/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    .btn{
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }
    .btn i{
        font-size: 20px;
    }
}


看一下最后效果


PC端还是跟上图一样不变


PAD端



 M端



3.登录

先写我们的HTML框架

    <!-- 登录开始 -->
    <div class="login">
        <div class="wrap">
            <div class="login-logo">
                <img src="../media/MiLogo.png" alt="">
                <br>
                <img src="../media/miTitle.png" alt="">
            </div>
            <div class="form">
                <form>
                    <ul>
                        <li><a href="#" class="nav-bar-active">登录米课</a></li>
                        <li><a href="#">注册·加入米课</a></li>
                    </ul>
                    <input type="text" class="text-input" placeholder="邮箱">
                    <input type="text" class="text-input" placeholder="密码">
                    <div class="rem">
                        <input type="checkbox" checked>
                        <span>记住密码</span>
                        <a href="#">忘记密码</a>
                    </div>
                    <button>登录</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 登录结束 -->


接着写CSS样式

/* 登录样式开始 */
.login{
    width: 100%;
    height: 445px;
    padding-top: 75px;
    background-image: url("../media/homeImg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
}
.login-logo,.form{
    float: left;
}
.login-logo{
    width: 70%;
}
.form{
    width: 30%;
}
.form li{
    float: left;
}
.form li a{
    color: #fff;
    padding: 10px 0 3px;
    margin-right: 15px;
    display: block;
}
.rem{
    margin: 15px 0;
    text-align: left;
    color: #fff;
    font-size: 12px;
}
.rem a{
    float: right;
    color: #fff;
}
.form button{
    width: 100%;
    height: 44px;
    background-color: #88c5e1;
    color: #fff;
    font-size: 16px;
    border-radius: 6px;
    box-shadow: 0 8px #54abd4;
}
.form button:hover{
    transform: translateY(3px);
    box-shadow: 0 5px #54abd4;
}
/* 登录样式结束 */


看一下最后效果



看着还不错，继续！


4.登录响应式设计

这里我们只需要在CSS里面把随着页面缩放，要变化的内容进行修改即可

/*******响应式设计******* */
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../media/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 445px;
        padding-top: 75px;
    }
    .login-logo{
        width: 70%;
    }
    .form{
        width: 30%;
    }
}
/* PAD端 */
@media screen and (min-width:768px) and (max-width:992px){
    .logo{
        width: 18%;
        background: url("../media/Brand-M.png") no-repeat left;
        background-size: 86px;
    }
    .search{
        width: 42%;
        position: relative;
    }
    .nav-bar{
        width: 40%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        width: 57%;
    }
    .form{
        width: 43%;
    }
}
/* M端 */
@media screen and (max-width:768px) {
    .logo{
        width: 16%;
        background: url("../media/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    .btn{
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }
    .btn i{
        font-size: 20px;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        display: none;
    }
    .form{
        width: 100%;
    }
}

5.新课速递与响应式设计

先写我们的HTML框架

    <!-- 主体部分开始 -->
    <div class="content">
        <div class="wrap">
            <!-- 新课速递开始 -->
            <div class="new-course">
                <div class="container">
                    <h3 class="title">新课速递</h3>
                    <div class="new-course-box">
                        <div>
                            <div>
                                <a href="#">
                                    <img src="../media/film.jpg" alt="">
                                    <p>感受文学与电影交融之魅力</p>
                                </a>
                            </div>
                        </div>
                        <div>
                            <div>
                                <a href="#">
                                    <img src="../media/film.jpg" alt="">
                                    <p>感受文学与电影交融之魅力</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 新课速递结束 -->
        </div>
    </div>
    <!-- 主体部分结束 -->


接着写CSS样式以及响应式设计


/* 主体开始 */
.content{
    padding-top: 40px;
}
/* 主体结束 */
/* 新课速递开始 */
.new-course{
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 14px 10px -10px rgba(0, 0, 0, .1);
    overflow: hidden;
    padding-bottom: 60px;
}
.container{
    width: 93%;
    margin: 0 auto;
}
.title{
    font-weight: 400;
    font-size: 18px;
    text-align: left;
    padding: 8px 0 8px 16px;
    border-left: 3px solid #54abd4;
    margin: 40px 0 36px;
}
.new-course-box>div{
    width: 50%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
}
.new-course-box>div>div{
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border-radius: 0 0 4px 4px;
    box-shadow: 1px 1px 2px #ddd;
}
.new-course-box img{
    width: 100%;
}
.new-course-box p{
    color: #999;
    line-height: 80px;
}
/* 新课速递结束 */
/*******响应式设计******* */
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../media/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 445px;
        padding-top: 75px;
    }
    .login-logo{
        width: 70%;
    }
    .form{
        width: 30%;
    }
    /* 新课速递 */
    .new-course{
        width: 64%;
    }
}
/* PAD端 */
@media screen and (min-width:768px) and (max-width:992px){
    .logo{
        width: 18%;
        background: url("../media/Brand-M.png") no-repeat left;
        background-size: 86px;
    }
    .search{
        width: 42%;
        position: relative;
    }
    .nav-bar{
        width: 40%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        width: 57%;
    }
    .form{
        width: 43%;
    }
    /* 新课速递 */
     .new-course{
        width: 100%;
    }
}
/* M端 */
@media screen and (max-width:768px) {
    .logo{
        width: 16%;
        background: url("../media/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    .btn{
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }
    .btn i{
        font-size: 20px;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        display: none;
    }
    .form{
        width: 100%;
    }
    /* 新课速递 */
    .new-course{
        width: 100%;
    }
}

6.热门课程榜单与响应式设计

先写我们的HTML框架

            <!-- 热门课程榜单开始 -->
            <div class="hot-course">
                <div class="container">
                    <h3 class="title">热门课程榜</h3>
                    <div class="hot-course-box">
                        <div>
                            <div>
                                <img class="goods-img" src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img class="goods-img" src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img class="goods-img"  src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img class="goods-img"  src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img class="goods-img"  src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div>
                                <img class="goods-img"  src="../media/music.png" alt="">
                                <a href="#" class="name">俄罗斯文学经典的当代意义</a>
                                <div class="message">
                                    <a href="#" class="link">文学院</a>
                                    <a href="#" class="link">东晓</a>
                                </div>
                                <div class="score">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <img src="../media/star.png" alt="">
                                    <span>4.8分</span>
                                </div>
                                <div class="comment">
                                    <span>3学分</span>
                                    <a href="#">68评论</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 热门课程榜单结束 -->


接着写我们的CSS样式及响应式设计

/* 热门课程榜单开始 */
.hot-course {
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 14px 10px -10px rgb(0 0 0 / 10%);
    overflow: hidden;
    padding-bottom: 60px;
}
.hot-course-box>div {
    float: left;
    padding: 5px;
    box-sizing: border-box;
}
.hot-course-box>div>div {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    padding: 52px 16px;
    box-sizing: border-box;
}
.goods-img {
    width: 46px;
}
.name {
    display: block;
    color: #333;
    font-size: 18px;
    font-weight: 700;
    margin-top: 3px;
    height: 24px;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.message {
    margin-top: 15px;
}
.link {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    background-color: #88c5e1;
    padding: 3px 5px;
    margin: 0 4px 4px 0;
}
.score {
    margin: 10px 0 5px;
    color: #f8ce38;
    font-size: 12px;
}
.score>img {
    width: 12px;
    position: relative;
    top: 2px;
}
.comment {
    color: #7d7d7d;
    font-size: 12px;
}
.comment>a {
    color: #7d7d7d;
}
/* 热门课程榜单结束 */
/*******响应式设计******* */
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../media/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 445px;
        padding-top: 75px;
    }
    .login-logo{
        width: 70%;
    }
    .form{
        width: 30%;
    }
    /* 新课速递 */
    .new-course{
        width: 64%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width: 64%;
    }
    .hot-course-box>div {
        width: 33%;
    }
}
/* PAD端 */
@media screen and (min-width:768px) and (max-width:992px){
    .logo{
        width: 18%;
        background: url("../media/Brand-M.png") no-repeat left;
        background-size: 86px;
    }
    .search{
        width: 42%;
        position: relative;
    }
    .nav-bar{
        width: 40%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        width: 57%;
    }
    .form{
        width: 43%;
    }
    /* 新课速递 */
     .new-course{
        width: 100%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width:100%;
    }
    .hot-course-box>div {
        width: 50%;
    }
}
/* M端 */
@media screen and (max-width:768px) {
    .logo{
        width: 16%;
        background: url("../media/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    .btn{
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }
    .btn i{
        font-size: 20px;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        display: none;
    }
    .form{
        width: 100%;
    }
    /* 新课速递 */
    .new-course{
        width: 100%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width:100%;
    }
    .hot-course-box>div {
        width: 100%;
    }
}


7.热门标签

先写我们的HTML框架

            <!-- 热门标签开始 -->
            <div class="hot-tag">
                <div class="container">
                    <h3 class="title">热门标签</h3>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                    <div class="hot-tag-box">
                        <h5>学分</h5>
                        <a href="#" class="link">2学分</a>
                        <a href="#" class="link">1学分</a>
                        <a href="#" class="link">3学分</a>
                    </div>
                </div>
            </div>
            <!-- 热门标签结束 -->


接着写CSS样式以及响应式设计

/* 热门标签开始 */
.hot-tag-box{
    text-align: left;
    margin-bottom: 18px;
}
.hot-tag-box h5 {
    text-align: left;
    font-weight: 400;
    color: #666;
    padding: 8px 0 16px;
}
/* 热门标签结束 */
/*******响应式设计******* */
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../media/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 445px;
        padding-top: 75px;
    }
    .login-logo{
        width: 70%;
    }
    .form{
        width: 30%;
    }
    /* 新课速递 */
    .new-course{
        width: 64%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width: 64%;
    }
    .hot-course-box>div {
        width: 33%;
    }
    /* 热门标签 */
    .hot-tag {
        width: 31%;
        position: absolute;
        top: 0;
        right: 0;
    }
}
/* PAD端 */
@media screen and (min-width:768px) and (max-width:992px){
    .logo{
        width: 18%;
        background: url("../media/Brand-M.png") no-repeat left;
        background-size: 86px;
    }
    .search{
        width: 42%;
        position: relative;
    }
    .nav-bar{
        width: 40%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        width: 57%;
    }
    .form{
        width: 43%;
    }
    /* 新课速递 */
     .new-course{
        width: 100%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width:100%;
    }
    .hot-course-box>div {
        width: 50%;
    }
    .hot-tag {
        width: 100%;
    }
}
/* M端 */
@media screen and (max-width:768px) {
    .logo{
        width: 16%;
        background: url("../media/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    .btn{
        width: 43px;
        height: 43px;
        border: 1px solid #fff;
        font-weight: 700;
        line-height: 43px;
        float: right;
        color: #fff;
        margin-top: 10.5px;
    }
    .btn i{
        font-size: 20px;
    }
    /* 登录 */
    .login{
        height: 338px;
        padding-top: 30px;
    }
    .login-logo{
        display: none;
    }
    .form{
        width: 100%;
    }
    /* 新课速递 */
    .new-course{
        width: 100%;
    }
    /* 热门课程榜单 */
    .hot-course{
        width:100%;
    }
    .hot-course-box>div {
        width: 100%;
    }
    .hot-tag {
        width: 100%;
    }
}

总结

笔者只是完成了网页的大致效果，其中里面还有很多内容没有具体完善， 布局也不是最美观的，与官网比还相差甚远。但是此次制作过程中让笔者收益颇丰。最后希望笔者的制作过程可以帮助到刚刚入门HTML以及CSS的小伙伴，不足之处也请大家多多评判指正！今日的网页界面制作分享到此结束，感谢！


文章标签：
前端开发
iOS开发
关键词：
HTML CSS
CSS html
CSS项目
CSS网页
HTML项目
艾派森_
目录
相关文章
DuckBro
|
15天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
DuckBro
23 0
阿文没烦恼
|
6天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
阿文没烦恼
13 0
时雨h
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记（四）
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记（四）
时雨h
18 1
坠入极夜的夏
|
10天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录，注册
web简易开发——通过php与HTML+css+mysql实现用户的登录，注册
坠入极夜的夏
22 0
叫我兔兔酱
|
13天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
叫我兔兔酱
31 8
程序三两行
|
17天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
程序三两行
15 0
sunrr
|
18天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
sunrr
13 0
游客pxynxsrl3ycx6
|
23天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
游客pxynxsrl3ycx6
31 0
疯狂的猿
|
3月前
|
前端开发 JavaScript
html+css+js开发一个猜数字游戏
【1月更文挑战第5天】html+css+js开发一个猜数字游戏
疯狂的猿
35 1
刘金玉编程
|
11月前
|
前端开发 开发工具
零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧
零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧
刘金玉编程
85 0

热门文章

最新文章

  • 1
    组态软件之万维组态介绍（web组态、html组态、vue2/vue3组态）
  • 2
    HTML深度解析：更改文本颜色
  • 3
    uni-app使用v-html输出富文本图片溢出解决
  • 4
    基于SpringBoot+HTML实现登录注册功能模块
  • 5
    有关Java发送邮件信息（支持附件、html文件模板发送）
  • 6
    黑色个人主页HTML源码
  • 7
    《HTML 简易速速上手小册》第4章：HTML 的表单与输入（2024 最新版）
  • 8
    《HTML 简易速速上手小册》第5章：HTML 高级布局技巧（2024 最新版）
  • 9
    如何使用HTML5的语义化标签来提高网站的可访问性？
  • 10
    html的常用标签
  • 1
    CSS字型
    24
  • 2
    css元素
    14
  • 3
    如何使用代理IP通过HTML和CSS采集数据
    13
  • 4
    《CSS 简易速速上手小册》第6章：高级 CSS 技巧（2024 最新版）
    16
  • 5
    CSS cursor的一些相关属性
    13
  • 6
    css怎样设置下滑线？
    10
  • 7
    css中几种隐藏元素的方法
    11
  • 8
    js实用方法记录-动态加载css/js
    16
  • 9
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
    46
  • 10
    【CSS进阶】巧用伪元素before和after制作绚丽效果（下）
    11

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 基于小程序Serverless开发个人相册小程序
  • 基于函数计算快速搭建Zblog等传统应用框架
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Magento电子商务网站
  • 制作开放场景
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）