精华内容
下载资源
问答
  • 因为个人在做一个网页的时候,因为能力不够,原生的JS写的不够好,不能很好的展现我需要表达的东西,所以引入了jQuery和bootstrap。下面是个人对一些东西的用法: logo选择 可以在 阿里巴巴矢量图标库 找到并...

    准备复原一个网站

    网址

    相关的jQuery和bootstrap
    个人是在菜鸟教程手册网上学习的 、查找资料的,可以供参考

    学习笔记

    因为个人在做一个网页的时候,因为能力不够,原生的JS写的不够好,不能很好的展现我需要表达的东西,所以引入了jQuery和bootstrap。下面是个人对一些东西的用法:

    logo选择

    可以在阿里巴巴矢量图标库找到并选择的;
    但我个人是在手册网定制的logo。

    bootstrap

    做网页都得有精美的CSS, bootstrap有众多的模板可供选择
    然后就是我运用的一些模板

    页面排版

    文笔有限直接上代码吧

    <div class = "container">  <!-- 建立一个容器-->
    		
    </div>
    

    这个是创建一个容器,然后东西都写在里面就OK

    响应式

    原话是这样的:Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
    我的个人理解是:在不同的显示器展示不同的效果。

    导航栏

    说实话 我在制作网页时 导航栏的确困扰了我很长时间
    纠结他的CSS,纠结他的响应式。
    当然,截至我写这个的时候,还是没有解决。

    不过有一些自己的思路:
    1.在不同的媒体条件设置不同的CSS,以求达到响应式(不知道可不可行)
    2.使用jQuery当点击图标时,触发某一个函数,使隐藏的元素显示出来,还要设置不同的z-index,以免出现重叠
    3.也可以设置滚动监听来达到同样的效果

    除此之外的个人学习

    轮播图的制作也存在一点问题
    对于bootstrap的class使用还是存在一些不解,自己写了网页才发现,写CSS的能力特差,需要加强





    第一次写博客,如果有不准确的地方,请大佬指正!
    展开全文
  • Bootstrap写一个简单的响应式网页

    千次阅读 2019-11-28 23:08:11
    响应式网页 响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片、媒体和媒体查询整合在一起,为响应式网页设计。 页面会随着窗口的尺寸变化做出相应的改变。 视口是浏览器显示的内容区域,不包括工具栏...

    响应式网页

    响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片、媒体和媒体查询整合在一起,为响应式网页设计。
    页面会随着窗口的尺寸变化做出相应的改变。
    视口是浏览器显示的内容区域,不包括工具栏标签栏。可以通过设置width来控制视口的大小,device-width为设备宽度。

    <meta name= "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
    

    响应式设计需要寻找一个临界点,当视觉效果不符合人的审美或影响了内容获取时对应的值,这个临界值是响应式设计的断点。
    目前可被采用的响应式布局:
    可切换的固定布局:以像素为基本单位,参考主流设备尺寸,设计几套不同的布局。
    弹性布局:以百分比作为页面的基本单位,可以适应一定范围内所有尺寸的设备屏幕和浏览器宽度,完美利用有效空间展现最佳效果。
    混合布局:可以采用像素或百分比作为页面单位。

    首先通过cdn引入框架,注意使用bootstrap的js文件前要引入jquery

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js" integrity="sha384-L2pyEeut/H3mtgCBaUNw7KWzp5n9+4pDQiExs933/5QfaTh8YStYFFkOzSoXjlTb" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    

    导航栏

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">主页<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">作品集锦</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">获奖记录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">人物评价</a>
                </li>
            </ul>
        </div>
    </nav>
    

    在屏幕尺寸较大时
    在这里插入图片描述
    缩小窗口的大小
    点击按钮显示栏目
    最开始做的时候无论屏幕大小都是窄屏这样显示,参考Bootstrap做响应式导航栏意识到最开始

    页面代码

    <div class="container">
        <h2 id="title">问卷调查</h2>
        <form>
            <!--第一行-->
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <!--左边-->
                    <div class="form-group">
                        <label for="email">邮件地址</label>
                         <input type="email" class="form-control" id="email" placeholder="邮箱地址"></label>
                    </div>
                    <div class="form-group">
                        <label for="username">昵称</label>
                        <input type="text" class="form-control" id="username" placeholder="您的昵称"></label>
                    </div>
                    <div class="form-group">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sex" id="sex_male" value="m" checked>
                            <label class="form-check-label" for="sex_male">男</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sex" id="sex_female" value="f" checked>
                            <label class="form-check-label" for="sex_female">女</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="birth">出生日期</label>
                        <input type="date" class="form-control" id="birth"></label>
                    </div>
                </div>
                <div class="col-lg-6 col-md-12">
                    <!--右边-->
                    <h5 id="prefer">请选择所有你喜欢的作品</h5>
                    <div class="row">
                        <div class="col-6 col-md-6 col-lg-3 movie">
                            <label for="movie_1"><img src="./img/i1.jpg"></label>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="movie_1"value="1">
                            </div>
                        </div>
                        <div class="col-6 col-md-6 col-lg-3 movie">
                            <label for="movie_2"><img src="./img/i1.jpg"></label>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="movie_2"value="2">
                            </div>
                        </div>
                        <div class="col-6 col-md-6 col-lg-3 movie">
                            <label for="movie_3"><img src="./img/i1.jpg"></label>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="movie_3"value="3">
                            </div>
                        </div>
                        <div class="col-6 col-md-6 col-lg-3 movie">
                            <label for="movie_4"><img src="./img/i1.jpg"></label>
                            <div class="form-check">
                                <input class="form-check-input position-static" type="checkbox" id="movie_4"value="4">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--第二行-->
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="reason">请说明你的理由</label>
                        <textarea class="form-control" id="reason" rows="3"></textarea>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btnbtn-primary">提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
    

    宽屏幕时
    在这里插入图片描述
    窄屏幕时
    在这里插入图片描述
    关于布局
    开始定义一个容器container
    每一行row都要在容器里面
    在每一行(row)里面有12列,可以根据页面需要进行左右划分。

    展开全文
  • 响应式网页设计

    千次阅读 2019-05-24 15:49:36
    什么是响应式网页设计? 响应式网页设计使您的网页在所有设备上都很好看。 响应式网页设计仅使用HTML和CSS。 响应式网页设计不是程序或JavaScript。 为所有用户设计最佳体验 可以使用许多不同的设备查看网页:...

    一、介绍

    什么是响应式网页设计?

    • 响应式网页设计使您的网页在所有设备上都很好看。
    • 响应式网页设计仅使用HTML和CSS。
    • 响应式网页设计不是程序或JavaScript。

    为所有用户设计最佳体验
    可以使用许多不同的设备查看网页:台式机,平板电脑和手机。无论设备如何,您的网页都应该看起来不错,并且易于使用。
    网页不应该遗漏信息以适应较小的设备,而是调整其内容以适应任何设备:

    桌面


    桌面

    平板


    平板

    手机


    手机

    当您使用CSS和HTML调整大小,隐藏,缩小,放大或移动内容以使其在任何屏幕上看起来都很好时,它被称为响应式网页设计。

    二、视窗

    什么是视窗?
    视窗是用户在网页上的可见区域。 视窗因设备而异,并且在手机上比在计算机屏幕上小。 在平板电脑和移动电话之前,网页仅针对计算机屏幕设计,并且网页通常具有静态设计和固定大小。 然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大而无法适应视窗。为了解决这个问题,这些设备上的浏览器按比例缩小整个网页以适应屏幕。 这不完美!!只是快速修复。

    设置视窗
    HTML5引入了一种方法,让网页设计师通过<meta>标签控制视窗。 您应该在所有网页中包含以下<meta>viewport元素:

    1
    2
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta>
    

    viewport元素为浏览器提供有关如何控制页面尺寸和缩放的说明。 width = device-width部分将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。 以下是没有视窗元标记的网页示例,以及具有视窗元标记的同一网页:

    没有视窗元标记


    没有视窗元标记

    有视窗元标记


    有视窗元标记

    视窗大小内容

    用户用于在桌面和移动设备上垂直滚动网站 - 但不是水平滚动! 因此,如果用户被迫水平滚动或缩小,以查看整个网页,则会导致糟糕的用户体验。 一些额外的规则要遵循:

    • 不要使用大的固定宽度元素 - 例如,如果图像的宽度比视窗宽,则可能导致视口水平滚动。请记住调整此内容以适合视窗的宽度。
    • 不要让内容依赖于特定的视口宽度来渲染 - 由于CSS像素中的屏幕尺寸和宽度在不同设备之间变化很大,因此内容不应依赖于特定的视口宽度来渲染。
    • 使用CSS媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置大的绝对CSS宽度将导致元素对于较小设备上的视口而言太宽。相反,请考虑使用相对宽度值,例如宽度:100%。另外,请注意使用大的绝对定位值。它可能导致元素落在小型设备上的视口之外。

    三、网格视图

    什么是网格视图?

    许多网页都基于网格视图,这意味着页面分为以下几列:
    网格视图
    在设计网页时,使用网格视图非常有用。它可以更轻松地在页面上放置元素。
    网格视图
    响应式网格视图通常有12列,总宽度为100%,并在调整浏览器窗口大小时缩小和展开。

    构建响应式网格视图
    让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
    在CSS中添加以下代码:

    1
    2
    3
    
    * {
        box-sizing: border-box;
    }
    

    以下示例显示了一个简单的响应式网页,其中包含两列:

    1
    2
    3
    4
    5
    6
    7
    8
    
    .menu {
        width: 25%;
        float: left;
    }
    .main {
        width: 75%;
        float: left;
    }
    

    如果网页只包含两列,则上面的示例很好。 但是,我们希望使用具有12列的响应式网格视图,以便更好地控制网页。 首先,我们必须计算一列的百分比:100%/ 12列= 8.33%。

    然后我们为12列中的每一列创建一个类,class =“col-”和一个定义该段应该跨越多少列的数字:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    

    所有这些列应该浮动到左侧,并且填充为15px:

    1
    2
    3
    4
    5
    
    [class*="col-"] {
        float: left;
        padding: 15px;
        border: 1px solid red;
    }
    

    每行应包含在<div>中。行内的列数应始终加起来为12:

    1
    2
    3
    4
    
    <div class="row">
      <div class="col-3">...</div>
      <div class="col-9">...</div>
    </div>
    

    行内的列全部浮动到左侧,因此从页面流中取出,其他元素将被放置,就好像列不存在一样。为了防止这种情况,我们将添加一个清除流程的样式:

    1
    2
    3
    4
    5
    
    .row::after {
        content: "";
        clear: both;
        display: block;
    }
    

    我们还想添加一些样式和颜色以使其看起来更好:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    html {
        font-family: "Lucida Sans", sans-serif;
    }
    .header {
        background-color: #9933cc;
        color: #ffffff;
        padding: 15px;
    }
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .menu li {
        padding: 8px;
        margin-bottom: 7px;
        background-color :#33b5e5;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    }
    .menu li:hover {
        background-color: #0099cc;
    }
    

    请注意,当您将浏览器窗口调整为非常小的宽度时,示例中的网页看起来不太好。在下一章中,您将学习如何解决这个问题。

    ** 四、媒体查询

    什么是媒体查询?

    媒体查询是CSS3中引入的CSS技术。 仅当某个条件为真时,它才使用@media规则包含一个CSS属性块。
    如果浏览器窗口小于500px,背景颜色将变为浅蓝色:

    1
    2
    3
    4
    5
    
    @media only screen and (max-width: 500px) {
        body {
            background-color: lightblue;
        }
    }
    

    添加断点
    在本教程的前面,我们创建了一个包含行和列的网页,它具有响应性,但在小屏幕上看起来不太好。
    媒体查询可以提供帮助。我们可以添加一个断点,其中设计的某些部分在断点的每一侧都会表现不同。

    桌面


    桌面

    手机


    手机
    使用媒体查询在768px处添加断点:
    当屏幕(浏览器窗口)小于768px时,每列的宽度应为100%:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="col-"] {
            width: 100%;
        }
    }
    

    始终为移动优先设计
    移动优先意味着在为桌面设备或任何其他设备进行设计之前设计移动设备(这将使页面在较小的设备上显示得更快)。 这意味着我们必须在CSS中进行一些更改。 当宽度小于768px时,我们应该在宽度大于768px时更改设计,而不是更改样式。这将使我们的设计移动优先:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
    

    另一个断点

    您可以根据需要添加任意数量的断点。 我们还将在平板电脑和手机之间插入一个断点。

    桌面


    桌面

    平板


    平板

    手机


    手机
    我们通过添加一个媒体查询(600px)和一组大于600px(但小于768px)的设备的新类来完成此操作:
    请注意,这两组类几乎相同,唯一的区别是名称(col-col-m-):

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
    @media only screen and (min-width: 600px) {
        /* For tablets: */
        .col-m-1 {width: 8.33%;}
        .col-m-2 {width: 16.66%;}
        .col-m-3 {width: 25%;}
        .col-m-4 {width: 33.33%;}
        .col-m-5 {width: 41.66%;}
        .col-m-6 {width: 50%;}
        .col-m-7 {width: 58.33%;}
        .col-m-8 {width: 66.66%;}
        .col-m-9 {width: 75%;}
        .col-m-10 {width: 83.33%;}
        .col-m-11 {width: 91.66%;}
        .col-m-12 {width: 100%;}
    }
    @media only screen and (min-width: 768px) {
        /* For desktop: */
        .col-1 {width: 8.33%;}
        .col-2 {width: 16.66%;}
        .col-3 {width: 25%;}
        .col-4 {width: 33.33%;}
        .col-5 {width: 41.66%;}
        .col-6 {width: 50%;}
        .col-7 {width: 58.33%;}
        .col-8 {width: 66.66%;}
        .col-9 {width: 75%;}
        .col-10 {width: 83.33%;}
        .col-11 {width: 91.66%;}
        .col-12 {width: 100%;}
    }
    

    我们有两组完全相同的类似乎很奇怪,但它给了我们HTML的机会,决定每个断点处的列会发生什么:
    对于桌面: 第一部分和第三部分将分别跨越3列。中间部分将跨越6列。 对于平板电脑 第一部分将跨越3列,第二部分将跨越9列,第三部分将显示在前两部分下方,它将跨越12列:

    1
    2
    3
    4
    5
    
    <div class="row">
    <div class="col-3 col-m-3">...</div>
    <div class="col-6 col-m-9">...</div>
    <div class="col-3 col-m-12">...</div>
    </div>
    

    方向:纵向/横向

    媒体查询还可用于根据浏览器的方向更改页面的布局。 您可以拥有一组仅在浏览器窗口宽度超过其高度时应用的CSS属性,即所谓的“横向”方向:
    如果方向处于横向模式,则网页将具有浅蓝色背景:

    1
    2
    3
    4
    5
    
    @media only screen and (orientation: landscape) {
        body {
            background-color: lightblue;
        }
    }
    

    五、图片

    不同设备的不同图像
    大型图像在大型计算机屏幕上可以是完美的,但在小型设备上却无用。为什么在必须缩小尺寸时加载大图像?要减少负载或出于任何其他原因,您可以使用媒体查询在不同设备上显示不同的图像。 这是一个大图像和一个较小的图像,将显示在不同的设备上:

    花

    花

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    /* For width smaller than 400px: */
    body {
        background-image: url('img_smallflower.jpg');
    }
    
    /* For width 400px and larger: */
    @media only screen and (min-width: 400px) {
        body {
            background-image: url('img_flowers.jpg');
        }
    }
    

    您可以使用媒体查询min-device-width而不是min-width来检查设备宽度,而不是浏览器宽度。然后,在调整浏览器窗口大小时图像不会更改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    /* For devices smaller than 400px: */
    body {
        background-image: url('img_smallflower.jpg');
    }
    
    /* For devices 400px and larger: */
    @media only screen and (min-device-width: 400px) {
        body { 
            background-image: url('img_flowers.jpg');
        }
    }
    

    HTML5<picture>元素

    HTML5引入了<picture>元素,可以让您定义多个图像。
    浏览器支持
    浏览器支持
    <picture>元素的工作方式类似于<video><audio>元素。您设置了不同的源,第一个符合首选项的源是正在使用的源:

    1
    2
    3
    4
    5
    
    <picture>
      <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
      <source srcset="img_flowers.jpg">
      <img src="img_flowers.jpg" alt="Flowers">
    </picture>
    

    srcset属性是必需的,它定义了图像的来源。 media属性是可选的,并接受您在CSS @media规则中找到的媒体查询。 您还应该为不支持<picture>元素的浏览器定义<img>元素。

    展开全文
  • 网站制作响应式网页设计与SEO优化 文章目录前言一、使用自适应网页设计有5个好处1.随着移动设备越来越多,可以提升用户体验。2.该设计没有网页版本区分,所以seo的策略保持一致。3.可以避免重复内容,专心维护这...

    网站制作响应式网页设计与SEO优化


    前言

    所谓“响应式网页设计(responsive web design)”也就是自适应,就是可以自动识别屏幕宽度、并做出相应调整的网页设计。目前这种设计已经出现在越来越多的国内网站上,目前google已经明确表明鼓励响应式网页设计。


    通常在浏览网页时,手机上和电脑上无法显示同一个网页,国外http://www.kanwangzhan.com这也导致许多网页设计会自动转到特定的链接上,如上图所示,无论在pc端还是移动端,网页的显示其实都是一个版本,会随着屏幕的大小网页而改变。

    一、使用自适应网页设计有5个好处

    1.随着移动设备越来越多,可以提升用户体验。

    2.该设计没有网页版本区分,所以seo的策略保持一致。

    3.可以避免重复内容,专心维护这一个网页。

    4.保持网页的原有链接。

    5.google也建议优先采用响应式设计,因为无论是什么网页版本都是相同的html、相同的内容,google最容易处理。

    二、响应式网页设计对seo是友好的,这些相关技术还在不断演化中,还有许多尚待客服的地方。下面来说说它的缺陷:

    1.对老版本ie支持不好

    对老版本ie支持不好,这是一个致命的问题,尤其是ie6,如果你的网站用户大多还采用老版本的ie的话(建议在统计工具里看一下),就不适合做响应式网页设计了。

    其实我一直想采用响应式网页设计,从新设计卢松松博客的网页,但看到统计里的老版本ie用户依然很多,只好放弃。

    2.网页采用了响应式设计

    例如一些小游戏站、视频站,如果仅仅是网页采用了响应式设计,但里面的内容依然是只能在pc端打开的话,这时候就要认真考虑了。

    总结

    国外copyblogger的博客提到了一个很特别的案例,就是迪士尼公司的网页。他说在迪士尼网页中有许多给小朋友玩的网页游戏,有些游戏可以在桌上型电脑玩,但是如果使用移动设备就可以无法使用。因此这个情况下,就必须做出抉择,放弃使用responsive web design,或是修改游戏。

    展开全文
  • 如何用简单的CSS制作响应式HTML网页#故事前端开发在这篇文章中,我将教你如何使用CSS网格来创建一个超级酷的图像网格,它随着屏幕的宽度而改变列的数量。最赞的一点就是:这个响应式效果只需要添加一行CSS。这意味着...
  • 2、响应式网页的构成 1)允许网页自动调整 使用viewport属性,让窗口可以自动伸缩 语法:&amp;amp;lt;meta name=&amp;quot;viewport&amp;quot; content = &amp;quot;width=device-width,initi...
  • 对于响应式网页以前很多人都用百分之表示来构造自己网站,但是这样对于网站布局,真实很难看有时候模块被拉得很长,但是现在一般刚一接触前端大家就开始用各种UI框架来解决网站响应式问题,当然这也是完美地解决...
  • 本文详细介绍通过bootstrap框架制作一个精美的网页(内容方面参考慕课网的相关资料) 其中顶部页面的导航栏部分点击“特点”可以实现小标兰,点击“关于可以弹出介绍性的文字”图片可以实现滚动效果。最主要的功能...
  • 基于Bootstrap的响应式网页

    千次阅读 2017-10-22 20:22:16
    基于Bootstrap的响应式网页设计
  • bootstrap响应式网页布局

    千次阅读 2019-05-04 10:16:52
    使用它的栅格系统可以轻松的对网页进行布局,而且可以做到响应式的布局。看起来很酷,接下来我就会总结自己在开发博客系统中用到的知识点及实战案例给大家,作为一个专栏管理。 知识点 栅格系统用于通过一系列的行...
  • 如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的...这篇文章为大家提供了12基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。 1. What is Responsive W...
  • 响应式网页设计指南

    2017-05-24 13:13:15
    响应式网页设计的概念最初是由Ethan Marcotte提出,从设计的角度引领我们思考:为什么一定要为每用户分别做一套设计方案呢?是否可以有种设计能够根据不同设备环境自动响应以及调整显示?特别是随着移动互联网...
  • 响应式网页设计入门

    2014-09-12 09:30:42
    响应式网页设计(Responsive Web Design)这概念在2000年的时候就有人提出来了,其实我更喜欢将其翻译为自适应网页设计,阮一峰关于Responsive Web Design的篇文章就是翻译为自适应网页设计,但是国内都采用了...
  • 响应式网页设计,毫无疑问地变得越来越重要了。如果你还没听说过响应式设计,可以先看看我之前发的文章响应式网站。对新手来说, 响应式设计听起来可能会有点复杂, 但事实上,它比你想象的简单得多。为了让你能快速...
  • 本作品为基于bootstrap框架制作响应式自适应网页,可自适应PC、移动端。网页题材为海贼王,整个成品共4页面,包括:首页、图文介绍页面、视频页面、音乐播放器页面。 首页有轮播大图和图片列表板块,介绍页面为...
  • 用3步骤实现响应式网页设计

    千次阅读 2015-04-13 17:17:59
    写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。... 文中提到的响应式网页设计(Responsive web design)是种现代网页设计方法,基于CSS3的媒介查询(Media Qu
  • 初级学会响应式网页设计

    千人学习 2017-01-24 17:15:49
    编程世界里也可以步步封装,网页设计/网站制作也将会越来越简单。技术不难,只要你能找到适合你的框架,如wordpress用来建网站,jquery用来写特效,而这套课程的主角是网页设计之Bootstrap前端框架。
  • 这篇文章为大家提供了12基础的响应式网页设计的教程,结尾还附上了个人最喜欢的3款响应式网页设计的工具, 轻松带你入门。 What is Responsive Web Design? https://smallbiztrends.com/2013/05/what-is-resp
  • FROONT是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师。FROONT 使得响应式网页设计能够可视化操作,...
  • 响应式网页字体图标

    千次阅读 2014-02-02 18:28:05
    响应式设计中主要面对的问题之是如何缩放图标来适应用户界面,不仅仅是针对于物理尺寸,而且还需要根据屏幕的尺寸和每英寸的像素比例来显示。一般情况之下,都是通过内联块元素标签来添加图标。另种常见的技术是...
  • 随着智能型手机及平板计算机的普及,越来越多用户使用它上网,近年来大家开始重视...简称为RWD )还不太了解,响应式网页设计是种网页设计的技术做法,该设计可使网站在多种浏览装置,如桌面计算机到智能型手机、平板
  • HTML5+CSS3移动端响应式网页制作

    千次阅读 2016-03-03 21:36:40
    1.响应式可以简单理解为:能够适应所有的设备屏幕 2.H5相较于XHTML增强了语义化。 3.Box-sizing:border-box;(内减模式) 4.固比的布局,固定的模块要用绝对定位的方式将其固定住。 5.阴影属性:box-shadow:水平阴影...
  • RWD(Responsive Web Design)可称为自适应网页设计、响应式网页设计、响应式网页设计等等,是种可以让网页的内容可以随着不同的装置的宽度来调整画面呈现的技术,让使用者可以不需要透过缩放的方式来浏览网页,...
  • 正如同Ethan所说:“响应式网站设计提供了种全新的选择,这种基于栅格布局和CSS3的流动性网页设计,可以让网页随着屏幕变化而响应。这是种更为统一,更加全面的设计技巧,种打破网页固有型态和限制的灵活设计...
  • 响应式网页设计实战

    千次阅读 2020-11-17 22:20:39
    元素不论在哪种情况下,宽度总时浏览窗口宽度的100%, 当浏览窗口宽度小于480px为手机端,大于480px小于768px为opad端,大于768px为桌面端。 2.网页截图: 桌面端: ipad端: 手机端: 3.代码实现: test....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 18,803
精华内容 7,521
关键字:

如何制作一个响应式网页