html5布局案例,html5 设计布局

HTML5如何在网页中实现3D效果

CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。

三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。

触发方法1：告知浏览器变形方式

-webkit-transform-style:preserve-3d;

Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。

Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。

触发方法2：直接使用CSS3变形语法

!DOCTYPE html

head

    meta charset="UTF-8"

    title言成科技/title

    style

        .box1 {

            width: 150px;

            height: 150px;

            border: 2px solid blue;

        }

        .box1 div {

            height: 150px;

            background: rgba(0, 0, 0, 0.5);

            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg);

            transform: translate3d(30px, 60px, 20px) rotateX(30deg);

        }

    /style

/head

body

    div class="box1"

        div/div

    /div

/body

/html

具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》

3D效果制作

需求

制作一个立方体，并进行旋转

代码实例

!DOCTYPE HTML

html

head

 meta charset="utf-8" /

 title言成科技/title

 link rel="stylesheet" type="text/css" href="" /

 style

  .main-bac { -webkit-perspective:1500; } /*设定透视距离*/

  .main{

   width:200px; 

   height:200px; 

   margin: 0 auto;

   position:relative;

   -webkit-transform-style:preserve-3d;

   -webkit-transition:-webkit-transform 2s ease 0s;/*过渡时间*/

  }

  /*基本样式*/

  .main p{

   position: absolute; 

   margin: 0; 

   padding: 0; 

   width: 200px; 

   height: 200px;  

   text-align: center; 

   line-height: 200px; 

   font-size: 26px; 

   opacity:0.5;

  }

  /*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/

  .main p:nth-of-type(1) {

   background-color:red;

   -webkit-transform:translateZ(100px);

  }

  /*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/

  .main p:nth-of-type(2) {

   background-color:orange; 

   -webkit-transform:rotateX(90deg) translateZ(100px);

  }

  /*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/

  .main p:nth-of-type(3) {

   background-color:yellow;

   -webkit-transform:rotateX(-90deg) translateZ(100px);

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/

  .main p:nth-of-type(4) {

   background-color:green;

   -webkit-transform:rotateY(90deg) translateZ(100px);

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/

  .main p:nth-of-type(5) {

   background-color:#b435bf;

   -webkit-transform:rotateY(-90deg) translateZ(100px);

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/

  .main p:nth-of-type(6) {

   background-color:blue;

   -webkit-transform:rotateY(180deg) translateZ(100px);

  }

  /*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/

  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg); }   

 /style

/head

body

 div class="main-bac"

  div class="main"

   p言成科技/p

   p3D立方体/p

   pHTML5学堂/p

   p3D立方体/p

   p码匠/p

   pJavaScript/p

  /div              

 /div

/body

/html

代码解析

当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。

当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源：《HTML5布局之路》

相关问答

Q1: 《HTML5布局之路》对前端初学者的优势在哪？

降低了学习难度，提升学习效率，节省掉了大量的学习时间。

可能这本书唯一对学习者的要求，就是需要能够静下心来看下去、学下去。

它和其他书（或大多数视频）不一样的地方在于，没有遵循“线性的知识叙述方法”，而是根据一个项目的实现过程，从前期的准备工作，到基本的布局，再到文本样式处理，一直到最后实现出整个网页的这样的过程来写的。

代入感也会相对较强，同时里面有很多QA，都是实际开发过程当中或者学习者在学习过程中，可能产生的一些疑问或想法，在这里面都已经给出了答案和提示，所以会觉得学的特别特别顺。

Q2: 如何进行HTML5响应式布局案例分析

你要做响应式布局么，移动端还是pc端，用bootstrap，或者rem。如果说要对已经做好的进行分析，还是看一下源码，要不没法回答。不明白继续追问吧，

Q3: html5页面怎么布局

1）像span这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block

2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等，

3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。

4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。

5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。

6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态

7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。

8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。

块元素的代表标记 div

行内元素的代表标记 span ，行内标记不具备组织结构框架

9）网页布局分为：自然布局，浮动布局， 定位布局

10）当一个元素被定义为浮动显示时，即定义为块状元素。并且该元素就会收缩自身体积为最小状态。所以，应该有个好的习惯即把浮动元素设置高和宽。如果没有设置，则元素会按照它所包含的内容大小来确定它的大小。

11）当元素浮动后，周边的对象会自动环绕浮动元素周围，形成一种环绕关系。

12）块状元素之间的外边距会有重叠现象，但是浮动元素之间的外边距不会发声重叠现象。

13）浮动元素移动，上移：margin-top:-**; 下移：margin-botom:-*px,其他以此类推。

14）一般定位元素（绝对或是相对元素）都会覆盖在文档流对象之上。但是，select元素的窗口控件还不完全支持z-index

15）在css定位布局中，一般遵循“外部相对定位，内部绝对定位”

16）在body中设置min-width:760px,可以避免布局重叠现象。

Q4: HTML5如何利用rem实现自适应布局

分析设计图

假设设计图大小为1080px。这也就意味着，在开发时，需要兼容的最大分辨率为1080px，最小的为320px。

2. 调整视口

代码实例：

!DOCTYPE html

head

    meta charset="UTF-8" /

    title布局之路-移动端开发实例/title

    meta name="viewport" content="width=device-width,user-scalable = no" /

    link rel="stylesheet" type="text/css" href="css/reset.css" /

/head

body

    div class="wrap"/div

/body

/html

代码解析：由于使用不同设备打开网页时，宽度均有所不同，所以不能讲视口设置为固定值，应当为width=device-width,即将视口设置为当前设备的宽度。

3. 确定设计图的最小字体

浏览器（部分）能够显示的最小字体未12px，当移动端页面宽度为320px时，要保证最小字体为12px，那么在1080px的设计图中，最小字体应当为42px。

代码实例：

    style type="text/css"

        html {

            font-size: 42px;

        }

    /style

4. 按照设计图的像素进行开发

按照正常网页开发流程，进行网页开发即可。

5. 使用百分比和rem替换px

代码效果对比：

/*使用固定像素*/

.box {

    float: left;

    width: 658px;

    font-size: 72px;

    text-align: center;

    line-height: 195px;

}

/*使用百分比和rem*/

.box {

    float: left;

    width: 60.93%;

    font-size: 1.71rem;

    text-align: center;

    line-height: 4.64rem;

}

代码解析：

水平方向的值，将具体像素调整为百分比。百分比的计算是根据父级的内容区宽度进行计算的。

例如，父级宽度为1080px， 子级元素为197px，那么子元素转换为百分比为：197/1080*100%=18.24%。需要注意的是百分比根据父级计算，当标签结构级别不同时，计算公式中的“分母”也有所不同，在开发时这个地方很容易出现问题，请务必注意。

垂直方向的值，将具体像素调整为rem，与水平方向相比，垂直方向的计算就比较简单。例如，行高为195px，HTML标签当前的字体大小为42px，将行高转换为rem单位，即195/42= 4. 64rem。

Q5: 《HTML5布局之路》有没有电子版？

《HTML5布局之路》目前没有电子版，也不推荐大家用电子版书籍来学习技术。因为在电子（电脑、手机）设备上阅读书籍容易分散你的注意力，不能够很好的集中注意力去学习。而且，如果不是用专门电子书阅读器来阅读书籍的话会很不方便，加大学习时间成本。另外，《HTML5布局之路》是否会出电子版书籍是清华出版社决定的，作者无权干涉这个问题。

《HTML5布局之路》所有的代码案例在“HTML5学堂”当中都可以下载，因此不管是在纸质版还是电子版都便于你调试运行书籍里的代码案例。