响应式项目

最新推荐文章于 2024-04-11 15:54:10 发布
最新推荐文章于 2024-04-11 15:54:10 发布
阅读量429 收藏 3
点赞数
分类专栏： WEB前端 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42588990/article/details/122099958
版权

响应式项目_导航

在这里插入图片描述

<!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

JavaScript基础与变量

脑袋不灵光的小白羊
关注
专栏目录
响应式web开发
m0_73782968的博客
02-26 730
响应式设计的页面会根据用的的行为以及设备的环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。此概念于2010年5月由国外著名网页设计师Ethan Marcotte(伊森·马科特)所提出意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。具体的实践方式由多方面组成，包括弹性盒、弹性网格布局、响应式图片、CSS media query的使用等。背景：移动互联网的发展，为了满足移动互联网多终端显示的需求 催生了响应式式布局的诞生，
《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》-配套源码.rar
06-28
响应式Web开发项目教程（HTML5+CSS3+Bootstrap） 《响应式Web开发项目教程（HTML5+CSS3+Bootstrap）》_资源，里面代码详细，可供新手参考
Bootstrap 响应式项目分享
m0_60635321的博客
04-11 792
技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。一个人可以走的很快，但一群人才能走的更远。
基于html+css响应式项目的媒体查询网页项目源码.zip
12-07
基于html+css响应式项目的媒体查询网页项目源码.zip基于html+css响应式项目的媒体查询网页项目源码.zip基于html+css响应式项目的媒体查询网页项目源码.zip基于html+css响应式项目的媒体查询网页项目源码.zip基于...
mayankhighway:一个响应式项目
05-22
【标题】"Mayankhighway:一个响应式项目"揭示了这个项目的核心特性，即响应式设计。响应式设计是现代网页开发中的一个重要概念，它允许网站在不同设备上（如桌面、平板电脑和手机）自适应显示，提供良好的用户体验。...
京东移动web响应式项目.rar
10-12
《京东移动Web响应式项目详解》 京东移动Web响应式项目是针对移动端设备设计的一款网页应用，旨在提供与PC端类似的良好购物体验，同时能够适应不同屏幕尺寸的智能手机和平板电脑。这个项目的核心在于响应式设计，即...
实训-利用HTML+CSS做响应式项目网页.rar
最新发布
06-19
本实训项目旨在通过HTML和CSS技术，制作一个响应式项目网页，以展示学生在前端开发方面的实践能力和技能。 页面布局设计：设计网页的整体布局，包括头部（Header）、主体内容（Main Content）、底部（Footer）等部分...
带她旅游网-响应式项目
02-17
【标题】"带她旅游网-响应式项目"是一个基于现代Web技术实现的网站，旨在为用户提供适应不同设备屏幕尺寸的优质旅游体验。这个项目利用了HTML5、CSS3、JavaScript以及Bootstrap框架来构建，确保在桌面、平板电脑和...
Bootstrap响应式项目实践1
qq_56180999的博客
06-03 3156
Bootstrap响应式项目实践1 文章目录Bootstrap响应式项目实践1一、成果展示二、代码三、代码基于四、遇到的问题和解决1.导航条固定后网页其他内容上移（被导航条遮住）2.窗口缩小时导航条内容溢出（排版错乱）3.发现自己的网页大小不适应视口大小4.因内容多少不一致，导致缩略图高度不一致5.标题（.title）字体大小不变，影响响应式布局 一、成果展示 二、代码 <!doctype html> <html lang="zh-CN"> <head>
项目心得之--响应式布局
nuonuoyoushui的博客
10-04 247
自动的撑开内容的高度，自适应屏幕
响应式布局项目7-1项目描述
Mr_jianghanlin的博客
05-06 1023
响应式项目7-1项目描述
刚做完几个简单的响应式设计的网站项目下来，杂七杂八 （一）
weixin_30756499的博客
07-11 113
之前没接触过responsive design这玩意，突然最近客户的项目都要求要有响应式设计的要求： 1，当浏览器缩放时，页面要根据浏览器大小，而自动适应。 2，当用手机或者移动设备打开页面时，页面会根据屏幕浏览器的大小自动适应。 3，移动设备有横屏和竖屏之分，页面也要相应适应 首页设计 UI设计师只设计出了2种mockup，一种是full site一种是mobile site然后...
响应式开发从原理到实战案例（十五）：响应式改版完整案例-完结
雄领IT的专栏
11-09 1785
项目总结 响应式开发工作的流程，先设计好静态页面，然后通过观察调成，编写相应的媒体查询来调整显示的风格。 个人认为这种做法是最佳的实践。不太建议使用bootstrap来实现一个改版的响应式页面，因为这样的速度更慢，更容易出错， 甚至要改变原来的布局结构。所以建议自定义媒体查询样式，思路更清晰，更不容易出错。如果一个新的响应式项目，整个团队对bootstrap比较熟悉，可以考虑使用boot
响应式布局项目总结
凌晨的专栏
07-20 2294
最近花了三天的时间做了一个简单的响应式布局的项目，内容包含7个页面，每个页面需要兼容三个不同大小的视口，整体感觉良好，效率也还算可以，做该项目时遵循的一个原则是，不寻求最优的解决方案，满意+足够=满足是此时学习的准则。下面总结一下该项目： 收获： 1、由于该项目的很多背景图片颜色比较复杂，一开始只会利用简单的选区工具进行抠图，经过该项目后，学会了使用色彩范围来扣取背景图等做网页时所需的图片素材
【利用css实现响应式项目开发 第一篇】
一斑的博客
07-25 369
一.网页布局方式 1.固定宽度布局：为网页设置一个固定的宽度，通常以px作为长度单位，常见于pc端网页。 2.流式布局：为网页设置一个相对的kua宽度，通常以百分比作为长度单位。 3.栅格化布局：将网页宽度人为的划分为均等的长度，然后排版布局时则以这些均等的长度作为度量单位，通常利用百分比作为长度单位来划分成均等的长度。 4.响应式布局：通过检测设备信息，jue'决定网页布局方式，即用户如...
html小项目,初探响应式布局 - 以小项目为例
weixin_29322553的博客
06-17 300
一 响应式布局最近在项目开发的时候，发现了自己对css布局方面的一些不足之处，特别是适配不同分辨率方面，几乎是没有经验的。在查阅了相关资料之后发现，响应式布局是目前解决不同分辨率显示问题的最好解决方案。达到一次设计，普遍使用的功能。本文主要以一个小项目为例，来说明这个概念。响应式Web设计二 media查询media查询是响应式布局的核心所在，根据不同的条件来显示不同的css样式。达到不同分辨率的...
移动Web开发--学习笔记三 响应式项目实战（微金所）
水滴的专栏
04-06 946
响应式项目实战（微金所） 使用自定义字体图标 创建自己的字体图标https://icomoon.io/ 通过@font-face定义自己的字体 @font-face { /*2.申明自己的字体名称*/ font-family: 'wjs'; /*3.引入字体文件（约束某一段字符代码什么图案）*/ src: url(../fonts/MiFie-Web-F...
BootStrap响应式布局实战教程
“响应式布局-BootStrap从基础到项目实战 (第二季) 高级篇 内部教材 讲师-风舞烟 北风网—中国IT网络教育第一品牌” Bootstrap 是一个流行的前端开发框架，用于创建响应式和移动优先的网站。响应式布局是Bootstrap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值