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

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

2022-12-30 171
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实训-利用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开发
关键词：
CSS响应式
HTML网页
HTML项目
HTML CSS
CSS html
艾派森_
目录
相关文章
奔跑的数据
|
2天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术，轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头，示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景，确保数据采集的高效和稳定性。
奔跑的数据
19 2
利用 html_table 函数轻松获取网页中的表格数据
游客dng4gjyb342he
|
1天前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画，它可以和animate.css完美结合，生成60多种轮播图过渡动画效果。
游客dng4gjyb342he
16 2
东方睿赢
|
22天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
46 7
土木林森
|
22天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
31 6
龙大吉
|
22天前
|
前端开发 UED 开发者
CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度
本文探讨了CSS Sprites和图标字体在网页图标加载优化中的应用。CSS Sprites通过合并多图标减少HTTP请求，提升加载速度；图标字体则以字体形式呈现图标，便于调整样式。文章分析了两者的优缺点及应用场景，并提供了应用技巧和注意事项，旨在帮助开发者提升页面性能，改善用户体验。
龙大吉
23 5
龙大吉
|
22天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
35 5
土木林森
|
22天前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
27 5
落雨_
|
开发者
用CSS3设计响应式导航菜单 - WEB开发者
来源：http://www.admin10000.com/document/1463.html#jtss-hi
落雨_
772 0
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
85 1
游客fz577umxdejsg
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
90 2

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    CSS伪元素实现的3D按钮
  • 3
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 4
    css属性列表 和 属性值含义
  • 5
    webpack window 使用sass来编译css样式
  • 6
    符合WEB标准的下拉导航菜单（CSS菜单）演示
  • 7
    CSS3的新属性的一下总结
  • 8
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    css学习2
  • 1
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    139
  • 2
    HTML5 Canvas 提供丰富的绘图API，支持绘制图形、文本、渐变和图像，助力游戏开发
    71
  • 3
    好看的html网站维护源码
    244
  • 4
    html+echars图表加日期检索
    61
  • 5
    html+echars的统计报表
    62
  • 6
    【CSDN创作优化1】个人简介优化 html font属性
    65
  • 7
    一种pug与html相互转换的工具
    98
  • 8
    android TextView HTML 的效果
    46
  • 9
    BeautifulSoup 是一个 Python 库，用于从 HTML 和 XML 文件中提取数据
    140
  • 10
    HTML5/CSS3粒子效果进度条代码
    67

    • 相关课程

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

    • 相关电子书

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

    • 相关实验场景

    更多
  • 搭建微信小程序
  • 快速搭建移动端可视化看板
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    DataWorks