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

艾派森 已于 2023-01-15 10:40:25 修改
阅读量9.1k 收藏 69
点赞数 7
分类专栏： web前端 文章标签： 前端 html css css3
于 2022-04-10 08:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/m0_64336780/article/details/123955085
版权
web前端 专栏收录该内容
8 篇文章 17 订阅
订阅专栏

目录

 

项目介绍

 项目框架流程

1.导航

2.导航响应式设计

3.登录

4.登录响应式设计

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

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

7.热门标签

总结

项目介绍

本次我们学习一种新的网页设计方式，响应式布局。即写一套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的小伙伴，不足之处也请大家多多评判指正！今日的网页界面制作分享到此结束，感谢！
制作一个简单HTML静态网页（HTML+CSS）
HTML网页设计
08-02 3564
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！🍵茶文化网站、🏳️‍🌈中华传统文化题材、京剧文化🔏水墨风书画、中国民间年画文化艺术网站 、等网站的设计与制作。🏷️ 这个首页代码运用了DIV盒子的使用方法，如盒子的嵌套、浮动、margin、border、background等属性的使用，外部大盒...
HTML，CSS样式一个简单网页设计
qq_59384581的博客
05-10 962
html网页简单制作，和样式总结归纳。
HTML入门网页制作，HTML+css运用做出
weixin_64284850的博客
03-07 1584
如图所示，带有搜索框的简单网页 以下是HTML内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>NASA中文网</title><!-- 网页标题 --> <link rel="stylesheet" type="text/css" href="../css/style.css"/>&l...
Web前端期末大作业-响应式室内家具网页设计（HTML+CSS+JS）实现_响应式web网站设计作业
2401_84438488的博客
04-29 394
室内设计是指为满足一定的建造目的（包括人们对它的使用功能的要求、对它的视觉感受的要求）而进行的准备工作，对现有的建筑物内部空间进行深加工的增值准备工作。需要工程技术上的知识，也需要艺术上的理论和技能。室内设计泛指能够实际在室内建立的任何相关物件：包括:墙、窗户、窗帘、门、表面处理、材质、灯光、空调、水电、环境控制系统、视听设备、家具与装饰品的规划。室内设计是指为满足一定的建造目的（包括人们对它的使用功能的要求、对它的视觉感受的要求）而进行的准备工作，对现有的建筑物内部空间进行深加工的增值准备工作。
html+css网页制作
qxpapt的博客
07-05 3195
简易美食网页制作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>美食页面</title> <link rel="shortcut icon" href="images/xlogo.png"> <link rel="stylesheet" href="css1.css"> </head> <bod
网页制作基础学习——HTML+CSS
学会改变自己——才能突破
04-29 1万+
网络是大家经常使用的东西，他帮助我们解决了很多问题，在我们生活中扮演着举足轻重的作用。但是如何制作呢，现在已经有很多专门的网页制作软件了（例如：Dreamweaver，Fireworks），而这些软件的根本都是生成代码，让浏览器进行读取，所以我先从背后代码的部分开始学习，进行简单总结。          首先：HTML（HyperText Markup Language）,即超文本
制作一个简单HTML个人网页网页（HTML+CSS）
热门推荐
weixin_46153254的博客
12-04 35万+
制作一个简单的HTML个人网页
实训-利用HTML+CSS做响应式项目网页.rar
最新发布
06-19
本实训项目旨在通过HTML和CSS技术，制作一个响应式项目网页，以展示学生在前端开发方面的实践能力和技能。 页面布局设计：设计网页的整体布局，包括头部（Header）、主体内容（Main Content）、底部（Footer）等部分...
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！
12-27
【网页设计作业】个人简历网页模板，布局左右结构，风格清新，使用html+css的纯静态网页，支持部署和使用！响应式布局，支持移动端正常显示。
HTML5+CSS3网页设计基础-第七章-网页布局设计.pptx
12-23
7.3 典型的CSS布局章节可能涵盖流体布局、网格布局、响应式布局等，这些是现代网页设计中常用的技术，旨在确保页面在不同设备和屏幕尺寸下都能良好显示。 7.4 实训部分则提供实践机会，让学生通过实际操作加深对...
航空航天主题Web优质项目作品（HTML5+css+javascript+jQuery+scss+vue3）-毕设/竞赛等
04-03
从需求出发，既注重太空主题的科普需要，又注重零杯网页赛本身的Web美术设计，采用多元技术，基足工程规范，从响应式与多媒体交互作为创意基础，顺利完成本作品。注重创意，将卡片流做成轮播图的形式,其中实现利用...
div+css网页标准布局实例教程.doc
08-25
学习div+css布局，你需要掌握HTML和CSS的基本语法，理解盒模型和定位原理，以及如何利用CSS创建响应式设计。通过实例练习，你可以逐步熟悉并掌握这些知识，从而能够创建符合web标准的、功能丰富且视觉美观的网页。...
媒体查询
小脚的Blog
10-11 234
CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。用媒体查询来实现响应式布局 1.引入meta标签<meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1..
w3school html5 ---- html响应式设计
qq_43156556的博客
11-14 506
html 响应式设计 1. 响应式设计 响应式Web设计（Responsive Web Design） RWD 能够以可变尺寸传递网页 2. 简单的响应式设计 1. 网页效果 2. 设计分析 文字部分 边框外的文字设定标题级别即可 边框内的文字有标题和普通文本 排版部分 本文的重点部分在于CSS排版，主要有以下几个关键部分 边框尺寸及如何显示 页边空白：边框之间的距离 内边距：边框与本文内容之间的距离 整合部分 整合部分主要是html文本与css排版的整合，用以下三个工具进行衔接
响应式布局
weixin_53915382的博客
08-17 249
1.媒体查询 CSS的媒体查询模块允许在不改变代码的前提下对显示效果进行调整，媒体查询由两部分组成，一个可选的媒体类型，以及若干个css表达式。当媒体类型判断结果为true的时候，其中的css表达式被解析。如果媒体查询应用在link中，即使判断结果为false，样式表同样会被下载，但是不会应用。用媒体查询来实现响应式布局。 @media screen and (max-width: 768px) 超小屏 @media screen and (min-width:768px) and (max-wid...
用这16个响应式网站主题模板制作企业网站,立马提升公司形象并打开知名度
cs57456376的博客
04-14 1048
响应式布局设计是一种灵活且适应性强的网页设计方式，其核心在于使网站能够自动适应不同屏幕尺寸和设备类型，为用户提供一致的、高质量的浏览体验。这种设计方式通过采用弹性布局、自适应图片和媒体查询等技术手段，实现元素和内容的动态调整，确保在不同设备上均能呈现出良好的视觉效果和交互性能。响应式布局设计的出现，极大地解决了移动互联网时代多终端设备的兼容性问题，为网站设计者提供了更加高效、便捷的解决方案，同时也提升了用户在各种设备上的浏览体验。
实现响应式网页设计
m0_49551563的博客
09-02 3758
利用 CSS 和 JavaScript 自动根据设备屏幕尺寸调整页面的布局和样式的网页，主要解决固定宽度和影响布局的元素的问题。
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
有问必答，欢迎打扰，项目开发，网页设计
10-31 3万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程
AlbertYang的博客
01-17 4万+
承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...
帮我写一份响应式网页设计项目实训说明书
06-09
当然，我可以帮你写一份响应式网页设计项目实训说明书。下面是一个基本的模板，你可以根据需要进行修改和调整。 # 响应式网页设计项目实训说明书 ## 项目概述 本项目旨在让学生通过实际操作，掌握响应式网页设计的基本概念、技术和工具，了解并应用HTML、CSS、JavaScript等相关技术，设计出具有响应式布局的网页。 ## 项目目标 - 掌握响应式网页设计的基本概念和原理 - 熟悉并掌握HTML、CSS、JavaScript等相关技术 - 实现具有响应式布局的网页设计 - 了解常用的响应式设计框架和工具 ## 项目要求 ### 1. 网页设计需求 设计一个具有响应式布局的网页，要求包括以下内容： - 顶部导航栏 - 主体内容区域 - 底部版权信息 ### 2. 技术要求 - 使用HTML5、CSS3、JavaScript等技术实现页面布局和交互效果 - 使用响应式设计框架Bootstrap或者Foundation等进行布局设计 - 使用jQuery等JavaScript库实现交互效果 - 适配不同屏幕尺寸和设备，实现响应式布局 ### 3. 项目步骤 - 设计网页结构和布局 - 利用HTML和CSS实现网页样式和排版 - 使用响应式设计框架实现网页布局 - 使用JavaScript实现交互效果 - 调试和测试网页，确保在不同设备上都能正常显示和使用 ## 项目评分标准 - 网页设计的美观程度（20分） - 网页设计的布局和排版（20分） - 网页交互效果的实现（20分） - 网页的响应式布局（20分） - 代码的质量和规范性（20分） ## 参考资料 - 《HTML5与CSS3基础教程》（第8版），作者：Terry Felke-Morris - 《Bootstrap实战》（第2版），作者：Jake Spurlock、Mason Andrews、Syed Fazle Rahman - 《JavaScript高级程序设计》（第3版），作者：Nicholas C. Zakas 希望这份说明书能够对你有所帮助，如果还有其他问题，可以随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
写文章

热门文章

  • 分享Python7个爬虫小案例（附源码） 126083
  • 用户规模破亿！基于文心一言的创新应用已超4000个 33483
  • ROSTCM6软件下载及语义网络分析详细操作教程（附网盘链接） 33099
  • 文本分析-使用jieba库进行中文分词和去除停用词（附案例实战） 32879
  • 【SPSS】回归分析详细操作教程（附案例实战） 29727

分类专栏

  • 大数据分析案例合集 付费 53篇
  • 数据挖掘 21篇
  • 数据可视化 36篇
  • 数据分析 75篇
  • SPSS 26篇
  • 爬虫 5篇
  • 赠书活动 18篇
  • 深度学习 6篇
  • 文本分析 15篇
  • 机器学习 27篇
  • 办公自动化 15篇
  • 零基础学习Pyhton数据分析 11篇
  • web前端 8篇
  • Flask 5篇
  • Power BI  3篇
  • GUI编程 6篇

最新评论

  • 数据分析案例-社交媒体情绪数据集可视化分析

    m0_73912632: 人生苦短，拒绝内卷！表情包表情包

  • 基于文本挖掘的卡塔尔世界杯赛事网络舆情演变与趋势预测

    SarPro: 优质好文，博主的文章细节很到位，兼顾实用性和可操作性，感谢博主的分享，期待博主持续带来更多好文

  • 基于文本挖掘的卡塔尔世界杯赛事网络舆情演变与趋势预测

    凯子坚持 c: 我放个猫别偷走了 　　　　　／＞　　フ 　　　　　|  　_　 _ l 　 　　　／` ミ＿꒳ノ 　　 　 /　　　 　 | 　　　 /　 ヽ　　 ﾉ 　 　 │　　|　|　| 　／￣|　　 |　|　| 　| (￣ヽ＿_ヽ_)__) 　＼二つ希望作者能回关，我们一起进步

  • 基于文本挖掘的卡塔尔世界杯赛事网络舆情演变与趋势预测

    紫郢剑侠: 微博虽然没有获取比赛直播的权限，但是其平台作为国内最大的社交媒体之一，用户在其平台发布的关于卡塔尔世界杯的信息数量也是十分庞大的。感谢博主在本篇博文中为我们详细介绍了基于文本挖掘的卡塔尔世界杯赛事网络舆情演变与趋势预测等知识,博主配图很精美，更加生动地展示了文章中的内容。非常感谢博主的分享，期待博主能够继续输出这样优质的好文……

  • 数据挖掘实战：基于KMeans算法对超市客户进行聚类分群

    过.913: 怎么获取数据集啊

大家在看

  • HCIA 18 结束 企业总部-分支综合实验（上）
  • 【目标检测数据集】感冒药品分类检测数据集959张3类别VOC+YOLO格式 95
  • 基于javaweb jsp ssm的智能停车系统+vue录像(源码+lw+部署文档+讲解等)
  • 服务器负载均衡 42
  • Nginx基础概念和常用操作

最新文章

  • 基于文本挖掘的卡塔尔世界杯赛事网络舆情演变与趋势预测
  • 数据分析案例-钻石数据集可视化分析
  • 数据挖掘实战-基于Catboost算法的艾滋病数据可视化与建模分析
2024
06月 4篇
05月 12篇
04月 8篇
03月 8篇
02月 5篇
01月 6篇
2023年161篇
2022年106篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾派森

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或 充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值

PHP网站源码双龙营销型网站建设同乐网站优化排名观澜关键词排名广州网站关键词优化同乐seo优化双龙设计公司网站松岗关键词按天扣费南山seo排名布吉网站制作设计龙华建网站布吉网站制作盐田外贸网站制作吉祥模板推广龙岗SEO按效果付费坪地模板推广宝安外贸网站设计观澜网页设计吉祥外贸网站设计荷坳网站优化按天计费南澳网站改版吉祥网站改版深圳网站seo优化爱联建网站东莞网站建设设计光明网站优化按天收费西乡网站优化按天扣费横岗网站推广方案荷坳企业网站制作坪地设计公司网站沙井建网站歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅：唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人？开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化