仓酷云

标题: DIV教程之网页计划应当熟知的CSS 3.0手艺 [打印本页]

作者: 莫相离 时间: 2015-1-15 23:40
标题: DIV教程之网页计划应当熟知的CSS 3.0手艺
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
网页制造poluoluo文章简介：筹办往招聘一个网页计划的职位。看起来应当往温习一下xHtml（CSS应当不必要多温习吧-_-!!），不外，先来一些CSS3.0的常识吧。怎样说呢？CSS3已十分壮大了，圆角+resize则是我喜好的。
筹办往招聘一个网页计划的职位。看起来应当往温习一下xHtml（CSS应当不必要多温习吧-_-!!），不外，先来一些CSS3.0的常识吧。怎样说呢？CSS3已十分壮大了，圆角+resize则是我喜好的。
1.基础的xhtml标志

在入手下手这个教程之前，让我们来做点xHtml标志，我们必要的几个DIV来完效果果的显现，以下：

#round,这个显现CSS3圆角
#indie,单个角的显现
#opacity,不通明度
#shadow,不必制图工具制造投影
#resize,可调治巨细

因而，我会的xHtml会像上面如许，你能够本人创建一个html文件：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>AnIntroductiontoCSS3;ANettutsTutorial</title>
<linkhref="style.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divid="wrapper">
<divid="round"></div>
<divid="indie"></div>
<divid="opacity"></div>
<divid="shadow"></div>
<divid="resize">
<imgsrc="image.jpg"alt="resizableimage"width="200"height="200">
</div>
</div>
</body>
</html>
让我们来略微重设一下扫瞄器的CSS（还刻CSSreset吗?能够看10款扫瞄器CSSReset的办法），代码以下：
body{
background-color:#fff;
}
#wrapper{
width:100%;
height:100%;
}
div{
width:300px;
height:300px;
margin:10px;
float:left;
}
/*稍后我们把要完成的代码写在这里*/
2.CSS3圆角

如下面所说，我们的代码会是如许的：
#round{
background-color:#000;
border:1pxsolid#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
在这里-moz是firefox上能显现的款式前缀，而-webkit刚是像safari/Chrome如许的扫瞄器的款式前缀。而10px刚是border的半径（radius:[reidjəs]n.半径），分明了吧！
3.独自圆角的界说

看了下面的CSS圆角，你大概会以为，假如我想让它只显现两个三个圆角，必要怎样办呢，岂非仍是要用到制图工具?固然不必，CSS3已为我们想好了。这里，我们的代码将是：
#indie{
background-color:#000;
border:1pxsolid#000;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
注重到topright和top-left这两个值没有?这标明的是圆角的方位，完全的方位誊写出下：

以-moz为前缀的：toplefttoprightbottomleftbottomright
以-webkit为前缀的：top-lefttop-rightbottom-leftbottom-right

并且，你注重到了没，-moz为前缀的，是写在最初，而以-webkit前缀的，写在半径的后面。
4.显现不通明度

弄过通明没有，很难弄，是否是？对，就是难弄，出格是IE(友谊保举:让IE撑持PNG通明的最好办法)。而CSS3只需一行代码。假如扫瞄器都撑持CSS3，事变就好办多了。我们的代码以下：
#opacity{
background-color:#000;
opacity:0.3;
}
再来一次英文注释吧，opacity，就是不通明度的意义。我想，只需晓得这个，你就会用了吧?
5.CSS投影

你大概晓得怎样用CSS技能来完成投影吧?不外，这里要说的不是技能，而是CSS3的一个手艺，看代码：
#shadow{
background-color:#fff;
border:1pxsolid#000;
-webkit-box-shadow:3px5px10px#ccc;
}
看到没，-webkit这一行，只需这一行。3px暗示程度偏向的投影，5px暗示纵向投影，而10px而手印糊的跨度（利用过fireworks大概photoshop的feather功效没有?对，就是这个!）。并且，像你看到的，-webkit为前缀，证实只要safari和chrome如许的扫瞄器才会显现，firefox则不会。
6.调治巨细

用过safari的人都晓得，一样平常情形下，textarea部分是能够调治巨细的，就是如许。不外，这个功效如今也临时只撑持safari。代码以下：
#resize{
background-color:#fff;
border:1pxsolid#000;
resize:both;
overflow:auto;
}
resize:both。像clear:both一样。暗示，能够向程度偏向和纵偏向选择拖动，调治巨细。固然，也撑持上面的值：

resize:horizontal;程度偏向调作
resize:vertical;纵向调治

而另外一个要让你分明的是，你必需把overflow:auto;写上，才干包管Resize一般利用。固然，你还能够设定最长宽度，最低高度来让这个元素在可一个局限内可调治，晓得上面这个不?

max-height:123px;
min-height:321px;
max-width:123px;
min-width:321px;

不懂?那你能够归去学一下CSS啦，固然IE6这个已经的巨大过的扫瞄器不撑持这个属性（可用JS来hack它）。这但是很主要的哦!
你有无一边看，一边随着做呢?假如没有，倡议你做一次。像你晓得的，代码这器材，看着，觉得懂了，到了用的时分，大概会不晓得怎样动手用。本人下手，会让你发明更多成绩，会让你有更多的前进，而不是纯真看。anyway，这个仍是供应出来：http://www.poluoluo.com/files/soft/1_090813221053.zip

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。

作者: 蒙在股里 时间: 2015-1-17 23:40
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 莫相离 时间: 2015-1-21 16:11
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 兰色精灵 时间: 2015-1-30 20:51
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 冷月葬花魂 时间: 2015-2-6 15:58
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 精灵巫婆 时间: 2015-2-17 00:24
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

作者: 仓酷云 时间: 2015-3-5 14:47
Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 再见西城 时间: 2015-3-19 19:51
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

欢迎光临仓酷云 (http://ckuyun.com/)