其他分享
首页 > 其他分享> > 响应式项目

响应式项目

作者：互联网

响应式项目_导航

在这里插入图片描述

<!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>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/mike.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>

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td
{margin: 0;padding: 0;}
body{text-align: center;}
li{ list-style: none;}
a{text-decoration: none;}
input,button,img{border: none}

/* 导航样式开始 */
.nav{
    width: 100%;
    height: 66px;
    background: #88c5e1;
    border-bottom: 5px solid #54abd4;
}

.wrap{
    /* mi:1226px   百分比: */
    width: 87%;
    margin: 0 auto;
}

.logo,.search,.nav-bar{
    float: left;
    height: 66px;
}

.logo{
    width: 25%;
    background: url("../images/Brand.png") no-repeat left;
    background-size: 183px;
}

.search{
    width: 40%;
    position: relative;
}
.search .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;
    background-size: #f5f5f5;
    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;
}

/* 66 - 21 = 45 - 20 = 25 / 2 */
.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 a:hover{
    border-bottom: 2px solid #fff;
}

/* 导航样式结束 */

响应式项目_导航响应式设计

在这里插入图片描述

  <!-- 导航开始 -->
    <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 class="btn">
                <i class="iconfont">&#xe66c;</i>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->

/******** 响应式设计 *********/
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../images/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("../images/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("../images/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    /* (43 - 22) / 2 */
    .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;
    }

响应式项目_登录

在这里插入图片描述

 <!-- 登录开始 -->
    <div class="login">
        <div class="wrap">
            <div class="login-logo">
                <img src="./images/MiLogo.png" alt="">
                <br>
                <img src="./images/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" placeholder="邮箱" class="text-input">
                    <input type="text" placeholder="密码" class="text-input">
                    <div class="rem">
                        <input type="checkbox" checked>
                        <a href="#">忘记密码</a>
                    </div>
                    <button>登录</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 登录结束 -->

/* 登录样式开始 */
.login{
   width: 100%; 
   background-image: url("../images/homeImg.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
}

.login-logo,.form{
    float: left;
}

.form li{
    float: left;
}

.form li a{
    color: #fff;
    padding: 10px 0 3px;
    display: block;
    margin-right: 15px;
}

.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;
}

/* 登录样式结束 */

响应式项目_登录响应式设计

在这里插入图片描述


/******** 响应式设计 *********/
/* PC端 */
@media screen and (min-width:992px) {
    .logo{
        width: 25%;
        background: url("../images/Brand.png") no-repeat left;
        background-size: 183px;
    }
    .search{
        width: 40%;
        position: relative;
    }
    .nav-bar{
        width: 35%;
    }
    .btn{
        display: none;
    }
    /* 登录 */
    .login{
        height: 460px;
        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("../images/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("../images/Brand-S.png") no-repeat left;
        background-size: 38px;
    }
    .search{
        width: 68%;
        position: relative;
    }
    .nav-bar{
        display: none;
    }
    /* (43 - 22) / 2 */
    .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%;
    }
}

响应式项目_新课速递与响应式设计

在这里插入图片描述

 <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="./images/film.jpg" alt="">
                                    <p>感受文学与电影交融之魅力</p>
                                </a>
                            </div>
                        </div>
                        <div>
                            <div>
                                <a href="#">
                                    <img src="./images/film.jpg" alt="">
                                    <p>感受文学与电影交融之魅力</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

/*新课速度样式开始*/
.content{
    padding-top: 40px;
}
.new-course{
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 14px 10px -10px
rgba(0,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;
}
/*新课速度样式结束*/

响应式项目_热门课程榜与响应式

在这里插入图片描述

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

.hot-course{
    background-color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 14px 10px -10px
rgba(0,0,0,0.1);
    overflow: hidden;
    padding-bottom: 60px;
}
.more{
    color: #7d7d7d;
    font-size: 12px;
}
.more:hover{
    color: #54abd4;
    text-decoration: underline;
}
.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;
}
.name:hover{
    color: #54abd4;
    text-decoration: underline;
}
.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;
}
.link:hover{
    background-color: #54abd4;
}
.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;
}
.comment>a:hover{
    color: #54abd4;
    text-decoration: underline;
}

响应式项目_热门标签

在这里插入图片描述

 <!-- 热门标签开始 -->
            <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>
            <!-- 热门标签结束 -->

.hot-tag-box{
    text-align: left;
    margin-bottom: 18px;
}
.hot-tag-box>h5{
    font-weight: 400;
    color: #666;
    padding: 8px 0 16px;
}

项目源码：https://gitee.com/cutelili/response

标签：box,background,width,color,项目,响应,学分,size
来源： https://blog.csdn.net/qq_42588990/article/details/122099958