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

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

2022-12-30 165
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实训-利用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
HTML网页
CSS网页
HTML项目
html CSS网页
艾派森_
目录
相关文章
进步`于辰
|
4天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
22 1
[HTML、CSS]细节与使用经验
进步`于辰
|
5天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
17 1
[HTML、CSS]知识点
蓝易云
|
2天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
8 3
二二*一一
|
1天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
12 1
刘大猫.
|
9天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
28 2
游客44yag4ft7nckq
|
11天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过&lt;head&gt;部分的&lt;style&gt;标签定义；外部样式表适用于多个页面，通过&lt;link&gt;标签引用外部CSS文件；&lt;style&gt;定义样式，&lt;link&gt;引用资源；已弃用的标签有&lt;font&gt;、&lt;center&gt;、&lt;strike&gt;，属性有color和bgcolor。
游客44yag4ft7nckq
19 0
游客44yag4ft7nckq
|
11天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式，以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
游客44yag4ft7nckq
12 0
土木林森
|
6月前
|
前端开发 JavaScript UED
【专栏：HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法，包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理，并分享了最佳实践，如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
土木林森
218 7
土木林森
|
6月前
|
缓存 前端开发 JavaScript
【专栏：HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性，并提出了优化策略。HTML方面，建议精简结构、使用语义化标签、异步加载脚本和压缩文件；CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
土木林森
94 6
土木林森
|
6月前
|
编解码 移动开发 前端开发
【专栏：HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性，如宽度、高度、初始缩放等，解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width（常用device-width）、initial-scale、maximum-scale、minimum-scale和user-scalable。
土木林森
180 4