久久蜜桃香蕉精品一区二区三区,日韩欧美精品在线观看,丝袜美腿一区

HTML 5漫谈-04-��式布局

OldBoy — Wed, 04 Jan 2017 06:33:00 GMT

��式布局的关键，是用癑ֈ�比设�?/span>HTML元素�?/span>with�?/span>margin�?/span>padding属性�?/span>

首先看一�D?/span>HTML�?/span>CSS代码�Q�如代码清单4-1所�C��?/span>

------------------------------------------------------------------------ 代码清单 4-1 ------------------------------------------------------------------------

DOCTYPE html>

<html>

<head>

<title>��式布局title>

<title>Documenttitle>

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

}

style>

head>

<body>

body>

html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

元素的相对宽度的参照物是其父元素。代码中div元素的父元素�?/span>body�Q�所�?/span>CSS中对div的宽度设计�ؓ90%�Q�是指其�?/span>body元素宽度�?/span>90%�?br />
有必��要提示一点，在�?/span>HTML5漫谈-03-盒子模型》中提到�q�元素的width属性的默认值是content盒子的宽度，元素实际占的宽度�q�要加上padding�?/span>border的倹{�?/span>

在上面代码的基础上，�?/span>div元素中增加两�?/span>p元素�Q�如果代码清�?/span>4-2所�C��?/span>

------------------------------------------------------------------------ 代码清单 4-2 ------------------------------------------------------------------------

DOCTYPE html>

<html>

<head>

<title>��式布局title>

<title>Documenttitle>

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

}

p.no1 {

width: 60%;

height: 150px;

background: yellow;

padding-left: 10%;

float: left;

}

p.no2 {

width: 20%;

padding: 0 5%;

height: 150px;

background: red;

float: left;

}

style>

head>

<body>

<div>

div>

body>

html>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

p.no1�?/span>p.no2�?/span>width属性值分别是60%�?/span>20%�Q�是指相对它们父元素div�?/span>width属性来说的。很重要的一�Ҏ��Q?/span>p.no01�q�设�|�了padding-left的��gؓ10%�Q�这个��g��是相对于父元�?/span>div�?/span>width属性来说的�Q�所�?/span>p.no1实际占用的宽度�ؓ70%。同�?/span>p.no2实际占有的宽度�ؓ30%�?br />
不管�?/span>width属性，�q�是padding�?/span>margin属性，对其�q�行癑ֈ�比设�|�的时候，参照的都是父元素�?/span>width属性的倹{�?/span>

min-width属性�?/span>max-width属�?/span>

当宽度是癑ֈ�比来指定�Ӟ��通常要设�|�最��的宽度和最大的宽度。详见代码清�?/span>4-3所�C��?/span>

------------------------------------------------------------------------ 代码清单 4-3 ------------------------------------------------------------------------

div {

width: 90%;

height: 200px;

background: blue;

margin: 0 auto;

max-width: 1215px;

min-width: 400px;

}

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

div的宽度是body宽度�?/span>90%�Q�但是最大不会超�q?/span>1215px�Q�最��不会小�?/span>400px�?/span>

OldBoy 2017-01-04 14:33 发表评论

HTML 5漫谈-03-盒子模型

OldBoy — Wed, 04 Jan 2017 05:04:00 GMT

��面的结构要与页面的表现分离�Q?/span>HTML负责��面�l�构�Q?/span>CSS负责��面表现。也��是��_��CSS是用来修�?/span>HTML元素的。这��涉及到一个问题，��是�?/span>CSS的角度如何看待一�?/span>HTML元素。答案就�?#8220;盒子模型”。从CSS的角度看�Q�每一�?/span>HTML元素都是以盒子的方式呈现的�?/span>

首先看一�D?/span>HTML代码�Q�如代码清单3-1所�C��?/span>

---------------------------------------------- 代码清单 3-1 -----------------------------------------------

DOCTYPE html>

<html>

<head>

<title>HTML 5 Demotitle>

head>

<body>

<div>CSS盒子模型div>

body>

html>

----------------------------------------------------------------------------------------------------------

�?/span>Chrome��览�?#8220;开发者工�?/span>”视图中可以看到示例代码中div元素的盒子模型，如图3-1所�C��?br />

---------------------------------------------- �?3-1 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

�C�Z��中的div元素除了内容之外�Q�蓝色部分）�Q�还包括padding�?/span>border�?/span>margin�Q�就像多个盒子套在一��P��q�也许就�?#8220;盒子模型”名字的由来吧。如果打个比方的话，HTML元素�?/span>CSS看来��q��当于一�q�画�Q�内容就是画本��n�Q?/span>padding相当于画周围的留白，border是画框，margin��是两幅��M��间的距离�?/span>

�?/span>Chrome��览器下�Q?/span>padding�?/span>border的默认��gؓ0�Q?/span>margin的默认��gؓ8。运行这�D�代码的电脑的屏�q�分辨率�?/span>1366�Q��?/span>1350 x 10�?/span>div内容部分的宽度，也就�?/span>div元素width属性的倹{��可以看得出来，HTML元素width属性的宽度默认是以“外扩”的方式呈现的�?/span>

下面通过CSS对这�?/span>div盒子的各个部分做讄��Q�如代码清单3-2所�C��?br />---------------------------------------------- 代码清单 3-2 -----------------------------------------------
div {

width: 200px;

padding: 10px;

border: solid 5px;

margin: 20px;

}

----------------------------------------------------------------------------------------------------------

�?/span>HTML��面�?/span>head元素中以link方式引入CSS样式表，如代码清�?/span>3-3所�C�：
---------------------------------------------- 代码清单 3-3 -----------------------------------------------

DOCTYPE html>

<html>

<head>

<title>HTML 5 Demotitle>

head>

<body>

<div>CSS盒子模型div>

body>

html>

-----------------------------------------------------------------------------------------------------
讄��了样式之后，�q�个div盒子模型的变化如�?/span>3-2所�C��?/span>

---------------------------------------------- �?3-2 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

此时�Q�这�?/span>div实际占有的宽度�ؓ230 x 48�Q�即�?/span>with的基��上加padding�?/span>border的宽度�?/span>

�?/span>CSS中增加一个有兛_��素宽度设�|�的属性：box-sizing�Q�这个属性是用来规定width讄��的是谁的宽度。修改之前的CSS代码�Q�增�?/span>box-sizing的设�|�，如果代码清单3-4所�C��?/span>

---------------------------------------------- 代码清单 3-4 -----------------------------------------------
div {

width: 200px;

padding: 10px;

border: solid 5px;

margin: 20px;

box-sizing: border-box;

}

----------------------------------------------------------------------------------------------------------

修改后这�?/span>div的盒子模型如�?/span>3-3所�C��?br />

---------------------------------------------- �?3-3 ----------------------------------------------------

----------------------------------------------------------------------------------------------------------

box-size的��D��|��ؓborder-box表示元素�?/span>with属性是�?/span>border�q�个盒子的宽度，而不再是内容�Q?/span>content�Q�这个盒子的宽度了。此�?/span>with属性的��D��现在“内减”�Q�而不是之前默认的“外扩”�?/span>

box-sizing属性的��D��可以�?/span>padding-box�?/span>content-box(默认)。这个属性在��式布局中特别的常用�Q?/span>

OldBoy 2017-01-04 13:04 发表评论

OldBoy — Wed, 04 Jan 2017 03:33:00 GMT

    首先看一�D?/span>HTML4中常见的JavaScript代码�Q?br />

     �?/span>HTML5中同��L��面会是怎样的代码呈现呢�Q?/span>


    原本�?span style="font-family: Verdana">HMTL4中一些需要借助�?/span>JavaScript实现的功能，�?/span>HTML 5的新属性所取代�?br />    �?/span>HTML4中，通常会��?/span>div标签完成��面的布局�Q�通过div�?/span>id属性和class属性来区别每一部分div的语义�?/span>


    同样的页面结构，�?/span>HTML5中是如何实现的呢�Q?/span>

HTML4中用于页面布局�?/span>div�Q�被HTML 5中增加的一些带有语义的标签所取代。这样不但�ə�面�l�构更加清晰�Q�而且有利于搜索引擎解析页面。本质上来讲�Q?/span>header�?/span>footer�q�样的标�{�ְ�是命名的div。此�?/span>HTML 5更加��文档�l�构与呈现相分离。例如， b标签�?/span>HTML 4中会只是��览器以�_�体昄��其中的内容，�?/span>HTML 5不再提倡这�U�纯�_�用于呈现的标签�Q��{而用CSS来负责呈现�?/span>

HTML 5的另一大改�q�就是支持在��览器中直接播放音频和视频文件。请注意�?/span>“直接”�Q�这意味着不需要�Q何插件。这可以看作�?/span>W3C对于插�g泛滥的一�U�反应。原生的�Q?/span>native�Q�多媒体支持再结HTML的其它特性，可以大有作�ؓ�?/span>

�?/span>HTML 5新增的元素中�Q?/span>canvas可谓震撼�?/span>canvas提供了一个通用的绘囑��^面，开发�h员可以用它完成一些通常要用Adobe Flash来完成的��d��。此外，因�ؓcanvas必须要用�?/span>JavaScript�Q�从而编�E�成�?/span>HTML文档中第一层次的事情，�q�是一个重大的转变�?/span>

OldBoy 2017-01-04 11:33 发表评论

OldBoy — Wed, 04 Jan 2017 02:48:00 GMT

响应式网��设计追求的是根据用戯��备的不同、备朝向的不同，以及讑֤�屏幕大小的不同，提供不同的网��设计，以达到都��观的效果�?/span>

��Z��解决手机��览�|�页的问题，许多�|�站都提供了单独的手机版本。比如，在手机浏览器地址栏输入：www.sohuc.om�Q�打开搜狐的主��后�Q�再�ȝ��览器地址栏，上面的网址实际上是�Q?/span>http://m.sohu.com�Q�同��L��Q�用手机��览器访问淘宝的主页�Q�实际访问的�|�址会是�Q?/span>https://m.taobao.com�?/span>

�q�种解决�Ҏ��下，需要用到设备检��技术，最��单的实现方式��是应用名�ؓdeviceJS的JavaScript库（http://www.devicejs.org�Q�。deviceJSDevice.js 是一个可以检��设备、设备方向和操作�pȝ��和方向等�?/span>deviceJS的简单的�C�Z��Q?/span>

if (device.mobile()) {

window.location = "http://m.sohu.com";

}

script>

开发可以��用Chrome��览器的讑֤�模拟功能�Q�来实现�U�d��讑֤�的测试。打开Chrome��览器之后，按F12�Q�进�?#8220;开发者工�?/span>界面。单��d��发者工��h��右上角的“Toggle Device Model”按钮�Q?/span>��׃��打开讑֤�模式�?/span>

�q�时在浏览器地址栏输入：www.sohu.com回�R�Q�就会看到搜狐移动版的页面，而浏览器地址栏会变�ؓ�Q�m.sohu.com�?/span>

�|�站的移动版仅仅解决了手机浏览网��늚�问题�Q�远�q�不能适应众多上网讑֤�屏幕宽度的差异，于是��式布局技术应�q�而生。有��x��式布局�|�站的示例，可以讉K��Q?/span>http://mediaqueri.es�Q�上面收录了各种风格的��用流式布局设计的网��c�?/span>

��式布局的本质，��是在不同屏�q�宽度下应用不同的CSS样式�Q�以适应讑֤�宽度或者浏览器宽度的改变。要做到�q�一点，有两个关键的技术，一是HTML标记的宽度和高度要��用相对��|��二是对窗口宽度改变做出判断�ƈ更换样式表�?/span>

先来说第一点，�|�页中的HTML标记的宽度和高度�Q�必��M��用相对��|��癑ֈ�比）�Q�而不能是�l�对倹{��下面是一个简单的�C�Z��|�页�Q?/span>

DOCTYPE html>

<html>

<head>

<title>��式布局 - 相对宽度和高度�?/span>title>

html, body {

height: 100%;

}

div {

width: 90%;

height: 45%;

background: blue;

margin: 0 auto;

}

p.class1 {

width: 60%;

height: 70%;

background: yellow;

padding-left: 10%;

float: left;

}

p.class2 {

width: 20%;

padding: 0 5%;

height: 30%;

background: red;

float: left;

}

style>

head>

<body>

<div>

<p class="class1">文字内容p>

<p class="class2">文字内容p>

div>

body>

html>

可以观察��览器在全屏状态下��面的显�C�效果，然后调整��览器窗口宽度后�Q�观察页面的昄��效果�?nbsp;
��式布局的另外一��关键的技术就是对�H�口宽度改变做出判断�q�更换样式表。听��h��挺难�Q�实际上很容易，��是使用CSS3的媒体查询，看下面的代码片段�Q?/span>

�q�段代码的意思是��_��当屏�q�宽度大于等�?00�Ӟ��应用样式�?.css�Q�当屏幕宽度��于�{�于799和大于等�?00�Ӟ��应用样式�?.css�Q�当屏幕宽度��于�{�于599时应用样式表3.css�?/span>

OldBoy 2017-01-04 10:48 发表评论

久久蜜桃香蕉精品一区二区三区,日韩欧美精品在线观看,丝袜美腿一区

HTML 5漫谈-04-���式布局

HTML 5漫谈-03-盒子模型

HTML 5漫谈-04-��式布局