|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
最后你还得知道，你所用的工具，你可能认为Dreamweaver很好，没错，它的确不错，但你要认识到，当你熟练使用了这门技术，你就可以在任何文本编辑器中编写网页，甚至在记事本中。
接待人人进修《十天学会web尺度》，也就是我们常说的DIV+CSS。不外这里的DIV+CSS是一种毛病的叫法，倡议人人仍是称之为web尺度。
进修本系列教程需有必定html和css基本，也就是指您之前做过网页，会用表格结构。假如您刚入手下手进修网页制造，不晓得甚么是表格结构及html和css，倡议您先往充电，不然进修本教程会十分费劲大概基本就听不懂。
因为工夫干系，本教程只解说一些基本常识，让您从本来的表格结构跨进到web尺度（div+css）结构，会利用web尺度制造出罕见的页面，这也到达了本教程的目标。
本教程多以实例情势循规蹈矩解说，实例触及到哪些关头点或难点就解说甚么，较少解说观点。由于观点这些器材很难申明白，大概申明白你也纷歧定能听懂，听懂了也纷歧定能了解。以是把观点留给人人今后再深切研讨。
因为章节干系，没有把css和csshack独自分出，只是在用到的时分交叉进解说了。html基本和css基本只在第一节中先容了几点主要的。
上面我们入手下手第一天的进修
1、xhtmlcss基本常识
起首说一下我们这节课的常识点
- 文档范例
- 言语编码
- html标签
- css款式
- css优先级
- css盒模子构成
1）文档范例
当我们用dreamweaver新建一下html格局文档时，检察源代码，会发明代码最上部有以下这句话：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2）言语编码
接上去我们还会发明如许一句话：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
3）html标签
html标签在页面中都必需停止。成对的标签以“/标署名”停止，有些单一的标签在自己的开头打上/来停止，这是xhtml代码编写的标准。
成对的标签：<head>{...}</head>
<body>{...}</body>
<div>{...}</div>
<span>{...}</span>
<p>{...}</p>
...... <imgsrc=""/>
<br/>
.......
4）css款式
加载css款式有以下四种
<linkhref="layout.css"rel="stylesheet"type="text/css"/> <style>
h2{color:#f00;}
</style> <pstyle="font-size:18px;">外部款式</p> @importurl("/css/global.css");
5）css优先级
- id优先级高于class
- 前面的款式掩盖后面的
- 指定的高于承继
- 行内款式高于外部或内部款式
- 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定章承继离它比来的
6）css盒模子构成
css盒模子是本节教程的重点。后面几个常识点，假如您会用表格结构的话，就十分好了解和把握了。这里的盒模子是和table结构的一个分歧点。进修web尺度，起首要弄懂的就是这个盒模子，这就是DIV排版的中心地点。传统的表格排版是经由过程巨细纷歧的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是经由过程由CSS界说的巨细纷歧的盒子和盒子嵌套来编排网页。这类排版体例的网页代码简便，体现和内容相分别，保护便利，能兼容更多的扫瞄器，好比PDA设备也能一般扫瞄。
那末它为何叫盒子呢？先说说我们在网页计划中常听的属性名：内容(content)、添补(padding)、边框(border)、界限(margin)，CSS盒子形式都具有这些属性。
我们能够把它想像成实际中上方启齿的盒子，然后从正上往下仰望，边框相称于盒子的厚度，内容相对盒子中所装物体的空间，而添补呢，相称于为防震而在盒子内添补的泡沫，界限呢相称于在这个盒子四周要留出必定的空间，便利掏出。是否是如许就很简单了解盒模子了。
以是全部盒模子在页面中所占的宽度是由右边界+右边框+左添补+内容+右添补+右侧框+右侧界构成，而css款式中width所界说的宽度仅仅是内容部分的宽度，这是很多伴侣简单弄混的中央
这里的界限我们也称之为：外边距、外补钉；添补也叫：内边距、内补钉。
假如如今您对CSS盒模子了解还不敷透辟，持续往下看，厥后的章节会城市使用到盒模子实例。
2、怎样入手下手进修web尺度？
1）有HTML和CSS基本
进修本系列教程前，请求您有必定的html和css基本，制造过网页，会用表格举行网页结构，如许进修起来才会很轻松。假如您对这些还不懂，倡议先进修这些常识，然后再来进修本教程。
2）变化看法
在之前我们制造网站时，老是习气于先思索表面、色彩、字体及结构等一切体现在页面上的内容。但表面并非最主要的，相反终极用户在会见网页时的体验才是优先要思索的。一个由div＋css结构且布局优秀的页面能够经由过程css界说成任何表面，在任何收集设备上（包含手机、PDA和盘算机）上以任何表面体现出来，并且用div＋css结构构建的网页以够简化代码，加速显现速率。
以是要想学好div＋css，起首要变化看法，必要丢弃传统的表格(Table)结构体例，接纳层(DIV)结构，而且利用层叠款式表(CSS)来完成页面的表面。给网站扫瞄者更好的体验。
3）多下手、多动脑
说到这点，有点小儿科了，就像我们上小学时先生经常教我们的那样。为何我在这里也做为一点列出来呢，我是经由过程批评发明，有些同砚提的成绩太没程度了，略微动下头脑就分明了，大概本人下手一试就晓得了，但他就懒得试。举个复杂的例子，拿扫瞄器兼容来讲吧，你写个款式以后，在IE和火狐分离翻开看一下不就分明了，但就是不往做。另有一个同砚留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个工夫，本人也早把图片下载上去了。以是在这里劝诫人人，必定要多下手、多动脑，不要怕贫苦。别的在进修完一节教程后，必定要本人做一遍实例，如许能更快把握。
这便是Div的优势所在。带宽的稍多占用，完全显得微不足道，更何况一个冗余的table设计架构如果代码写的不好会占用更多的带宽。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:34:17
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-1-24 12:09:02