精华内容
下载资源
问答
  • 本文介绍了"自适应网页设计"的概念及制作思路和方法还有注意事项等,非常的详细,这里推荐给大家好好阅读,慢慢提高
  • 网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。 flex布局是什么?‍ Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供...

    网页布局是css的一个重点应用。传统的布局都是依赖display、position、float属性来实现的,但是特殊布局就不易实现,如垂直居中。

    flex布局是什么?‍

    Flex 是 Flexible Box的简写,意为“弹性布局”为盒模型提供最大灵活性。任何一个容器都可以指定为flex布局。

    采用flex布局的元素,称为flex容器。他的所有子元素自动成为容器成员,称为flex项目,简称项目。

    flex布局制作自适应网页

    容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

    容器的属性

    • flex-direction 设置排列方向(向下、向上、向左、向右)的
    • flex-wrap 内容放置不下时换行方式
    • flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap
    • justify-content 定义在主轴上的对齐方式。
    • align-items 定义项目在交叉轴上如何对齐。
    • align-content 定义多根轴线的对齐方式

    flex-direction属性值有四个:

    • row(默认值):水平方向,从左到右,起点在左。
    • row-reverse:水平方向,从右到左,起点在右。
    • column:垂直方向,从上到下。
    • column-reverse:垂直方向,从下到上。

    flex-wrap属性值有三个:

    • nowrap:不换行。
    • wrap:正常换行,在第一行下方。
    • wrap-reverse:换行,在第一行上方。

    justify-content属性值有五个:

    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center:居中
    • space-between:两端对齐
    • space-around:每个项目两侧的间隔相等。

    align-items属性值有五个:

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴终点对齐。
    • center:交叉轴中点对齐。
    • baseline:项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设置为auto,将占满整个容器的高度。

    align-content属性值六个:

    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴终点对齐。
    • center:交叉轴中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间间隔平均分布。
    • space-around:每根轴线两侧间隔都相等。
    • stretch(默认值):轴线占满整个交叉轴。

    项目属性

    • order:定义项目的排列顺序,数值越小,排列越靠前,默认为0。
    • flex-grow属性:定义项目的放大比例,默认为0
    • flex-shrink:定义项目的缩小比例,默认为1。
    • flex-basis:定义在分配多余空间之前,项目占据的主轴空间。默认值为auto,即项目本来大小。
    • flex:是flex-grow、flex-shrink、flex-basis的缩写,默认值0 1 auto。
    • align-self:属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
    展开全文
  • 网页拉到相应大小,然后在{}中给各个元素重新排版。 注意:关于css样式的优先级。行内样式最优先,若设置了行内样式,再设置@media效果无效,要将@media样式写在样式表的最下面 四、bootstrap和jquery UI和...

    一、使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

    @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

    当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

    二、语法

    @media mediatype and|not|only (media feature) {
        CSS-Code;
    }
    

    三、实例

    @media only screen and (max-width: 500px) {
        .gridmenu {
            width:100%;
        }
    
        .gridmain {
            width:100%;
        }
    
        .gridright {
            width:100%;
        }
    }
    

    大体就是写一个@media only screen and (max-width: 500px){}
    把网页拉到相应大小,然后在{}中给各个元素重新排版。
    注意:关于css样式的优先级。行内样式最优先,若设置了行内样式,再设置@media效果无效,要将@media样式写在样式表的最下面

    四、bootstrap和jquery UI和bxslider插件的使用方法

    1、下载bootstrap插件等,放进html根目录,css样式和js引入(要引入jquery)。
    2.复制代码
    3.若要改变一些样式,给元素填上行内样式即可

    展开全文
  • 于是,网页设计师不得不面对一个难题:如何才能在 不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。 同样的内容,要在大小...

      随着网络的快熟发展,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在 不同大小的设备上呈现同样的网页?手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上,有的还达到了2000像素。 同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。很多网站的做法是对不同终端设计多个网页,但这样会有很多维护的问题,在这 里我们可以设计一个简单的盒子,这个盒子可以识别不同的终端而显示不同的效果

    工具/原料

    • dm网页设计软件

    • ps图像处理软件

    方法/步骤

    1. 1

      在网页代码的头部,加入一行viewport元标签。

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

      viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

    2. 2

      由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。对图像来说也是这样。

      具体说,CSS代码不能指定像素宽度:

      width:xxx px;

      只能指定百分比宽度:

      width: xx%;

      或者

      width:auto;

    3. 3

      字体也不能使用绝对大小(px),而只能使用相对大小(em)。

      例如:

      body {font: normal 100% Helvetica, Arial,sans-serif;}

      上面的代码指定,字体大小是页面默认大小的100%,即16像素。

    4. 4

      流动布局(fluid grid)

      "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

      .main {float: right;width: 70%; }

      .leftBar {float: left;width: 25%;}

      float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

    5. 5

      "自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。

      它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。

      <link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="tinyScreen.css" />

      上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

      <link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="smallScreen.css" />

      如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。

      END

    参考下面的例子——我称它为“盒子”

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <!-- viewport meta to reset iPhone inital scale -->

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

    <title>Demo: Responsive Design in 3 Steps</title>

    <!-- css3-mediaqueries.js for IE8 or older -->

    <!--[if lt IE 9]>

    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

    <![endif]-->

    <style type="text/css">

    body {

    font: 1em/150% Arial, Helvetica, sans-serif;

    }

    a {

    color: #669;

    text-decoration: none;

    }

    a:hover {

    text-decoration: underline;

    }

    h1 {

    font: bold 36px/100% Arial, Helvetica, sans-serif;

    }

    /************************************************************************************

    STRUCTURE

    *************************************************************************************/

    #pagewrap {

    padding: 5px;

    width: 960px;

    margin: 20px auto;

    }

    #header {

    height: 180px;

    }

    #content {

    width: 600px;

    float: left;

    }

    #sidebar {

    width: 300px;

    float: right;

    }

    #footer {

    clear: both;

    }

    /************************************************************************************

    MEDIA QUERIES

    *************************************************************************************/

    /* for 980px or less */

    @media screen and (max-width: 980px) {

     

    #pagewrap {

    width: 94%;

    }

    #content {

    width: 65%;

    }

    #sidebar {

    width: 30%;

    }

    }

    /* for 700px or less */

    @media screen and (max-width: 700px) {

    #content {

    width: auto;

    float: none;

    }

    #sidebar {

    width: auto;

    float: none;

    }

    }

    /* for 480px or less */

    @media screen and (max-width: 480px) {

    #header {

    height: auto;

    }

    h1 {

    font-size: 24px;

    }

    #sidebar {

    display: none;

    }

    }

    /* border & guideline (you can ignore these) */

    #content {

    background: #f8f8f8;

    }

    #sidebar {

    background: #f0efef;

    }

    #header, #content, #sidebar {

    margin-bottom: 5px;

    }

    #pagewrap, #header, #content, #sidebar, #footer {

    border: solid 1px #ccc;

    }

    </style>

    </head>

    <body>

    <div id="pagewrap">

    <div id="header">

    <h1>Header</h1>

    <p>Tutorial by <a href="http://webdesignerwall.com">Web Designer Wall</a> (read <a href="http://webdesignerwall.com/tutorials/responsive-design-in-3-steps">related article</a>)</p>

    </div>

    <div id="content">

    <h2>Content</h2>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    <p>text</p>

    </div>

    <div id="sidebar">

    <h3>Sidebar</h3>

    <p>textg</p>

    <p>fgs</p>

    <p>fgsg</p>

    <p>dg</p>

    <p>dfgfd</p>

    <p>测试测试测试</p>

    <p>sgrtg</p>

    <p>测试</p>

    <p>sgf</p>

    <p>text</p>

    </div>

     

    <div id="footer">

    <h4>Footer</h4>

    </div>

    </div>

    </body>

    </html>

    转载于:https://www.cnblogs.com/huojing/articles/3871209.html

    展开全文
  • 制作手机自适应网页 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。 工具/原料 sublime text 方法/步骤 1 打开你需要制作手机网页的html或者php等等网页...

    何制作手机自适应网页

    将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。

    工具/原料

    • sublime text

    方法/步骤

    1. 1

      打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。

    2. 2

      向浏览器声明该网页为移动设备自适应网页的meta标签为:

      <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

      <meta name="apple-mobile-web-app-capable" content="yes">

      <meta name="apple-mobile-web-app-status-bar-style" content="black">

      <meta name="format-detection" content="telephone=no">

    展开全文
  • 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。 2 向浏览器声明该网页为移动设备自适应网页的meta标签为: 加入meta标签。 2 向浏览器声明...
  • web网页转化手机自适应网页三步走: 1.打开你需要制作手机网页的html或者php等等网页源码文件。在之间加入meta标签。 2.向浏览器声明该网页为移动设备自适应网页的meta标签为: 3.将以上标签...
  • 简单设计自适应网页

    2019-09-15 19:43:32
    简单设计自适应网页 ...制作自适应网页,首先你要了解什么是自适应布局?自适应布局简而言之,就是一个网站或者一个页面能适应兼容多个终端设备,而不需要再为每个终端做一个特定的版本。其实简单来...
  • 一、了解什么是”自适应网页设计” 自从2010年,Ethan Marcotte提出了 “自适应网页设计”(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。 他制作了一个 范例,里面是...
  • 于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了...
  • 自适应网页设计

    2016-11-25 17:06:23
    自适应网页设计:允许网页宽度自动调整允许网页宽度自动调整“自适应网页设计”: 首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕...
  • 自适应网页即是响应式网页,所谓的响应式网页就是,同样的一个网址,在电脑,平板,手机浏览的时候,样式更着改变,这就是简单的一个解释,更合理的解释就是,网页根据屏幕的大小会变得自适应,就会让网站看起来很...
  • 自适应网页怎么设计

    2019-09-15 22:23:08
    网页是网站的构成的主要部分,一个网站是否...自适应网页比一般传统网页的优势在于自适应网页的展现形式多样化,网页整体可以设计成动态,功能多样式。 自适应网页设计是当下最流行的网页设计,如果刚接触...
  • 自适应网页制作

    2016-06-13 20:03:00
    网页代码的头部,加入一行viewport元标签。 <meta name="viewport" content="width=device-width,initial-scale=1" /> viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度...
  • jQuery自适应网页顶部导航菜单基于jquery.1.12.4.min.js制作,自适应分辨率,一级导航栏,适用于企业网站。
  • 自适应网页制作总结

    2013-10-29 11:15:00
    图片百分比定宽高,依据图片原来的宽高比,进行自适应。4.使用固定宽高比的透明图片,可以方便实现子元素定宽高布局5.使用字体大小vw单位,另加窗口变化的z-index:1来实现重绘6.由于当前浏览器对于vw的控制不好,...
  • 自适应网页

    2017-05-26 20:50:00
    除了布局和文本,"自适应网页设计"还必须实现图片的 自动缩放 。 这只要一行CSS代码:  img { max-width: 100%;} 这行代码对于大多数嵌入网页的视频也有效,所以可以写成:  img, object {...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,105
精华内容 3,642
关键字:

如何制作自适应网页