AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

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

2022-12-30 273
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实训-利用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
HTML网页
CSS响应式
HTML项目
艾派森_
目录
相关文章
游客vx6uejvd6s6ck
|
7月前
|
移动开发 前端开发 JavaScript
征信报告修改器，征信报告生成器，制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具，采用HTML5实现，仅供学习参考。核心功能通过JavaScript构建，包含虚拟数据生成、权重分配及信用因素分析（如还款记录、信用使用率等）。
游客vx6uejvd6s6ck
1874 4
游客vx6uejvd6s6ck
|
7月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
766 0
游客ib7xsk7hcucuo
|
7月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2563 4
游客vx6uejvd6s6ck
|
7月前
|
前端开发 容器
处方单图片生成器， 处方单在线制作免费，js+css+html恶搞神器
这是一个电子处方模拟生成系统，使用html2canvas库实现图片导出功能。系统生成的处方单包含多重防伪标识，并明确标注为模拟数据，仅供学习
游客vx6uejvd6s6ck
1617 1
游客vx6uejvd6s6ck
|
7月前
|
前端开发
个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统，旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告，涵盖还款记录
游客vx6uejvd6s6ck
1447 0
游客vx6uejvd6s6ck
|
7月前
|
前端开发 JavaScript 容器
制作b超单生成器， 假怀孕b超单图片制作， p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具，效果逼真，仅供学习参考与娱乐。包含前端技术学习要点：语义化布局、响应式设计、Flexbox、图片自适应
游客vx6uejvd6s6ck
759 0
游客vx6uejvd6s6ck
|
7月前
|
前端开发
医院检查单子p图软件，在线制作仿真病历，js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面，内容仅供学习参考。页面模拟“阳光医院体检中心”场景，提供预约功能验证（如姓名、手机号、日期）。所有数据仅用于演示
游客vx6uejvd6s6ck
927 0
游客4ww4ol2watmok
|
Web App开发 移动开发 前端开发
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
游客4ww4ol2watmok
494 0
《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML+CSS+JavaScript
异步社区
|
Web App开发 JavaScript 前端开发
《HTML5触摸界面设计与开发》——2.5　响应式的CSS
异步社区
2083 0

热门文章

最新文章

  • 1
    HTML 5的10个顶级资源
  • 2
    JQuery属性与样式——.html()和.text()
  • 3
    html动态爱心代码【三】(附源码)
  • 4
    mmJ-页面Html代码段转小程序工具[wxParse]全程指导，保证上路
  • 5
    经典！HTML5 Canvas 模拟可撕裂布料效果
  • 6
    HTML_链接
  • 7
    html5 中的 canvas 绘制椭圆的方法
  • 8
    HTML5网页3D场景制作之Three.js初体验-制作3D字体
  • 9
    在HTML中取得请求中的参数
  • 10
    HTML4和HTML5之间的10个主要不同
  • 1
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    296
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    258
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    208
  • 4
    （CSS）使用Flex布局，帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置！
    156
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    311
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    452
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    198
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    145
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    212
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    285

    • 相关课程

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

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践
    • 下一篇
    基于JAVA的高校宿舍管理系统的设计与实现(论文+源码)_kaic