仓酷云

标题: 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标志

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图


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

因而,我会的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圆角

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图

如下面所说,我们的代码会是如许的:
#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.独自圆角的界说

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图

看了下面的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为前缀的,是写在最初,而以-webkit前缀的,写在半径的后面。
4.显现不通明度

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图

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

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图

你大概晓得怎样用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.调治巨细

DIV教程之网页计划应当熟知的CSS 3.0手艺
登录/注册后可看大图

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

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

不懂?那你能够归去学一下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/) Powered by Discuz! X3.2