DIV教程之5个你应该懂得的CSS3新手艺

只看该作者 · 发表于 2015-1-16 10:34:17

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

其实DIV+CSS是很简单的一种布局方式，甚至比任何一种编程语言都要简单(虽然它不能算是编程语言)。

CSS是尽人皆知且使用普遍的网站款式言语，在它的版本三(CSS3)企图中，新增了一些可以节俭工夫的特征。只管只要以后最新了扫瞄器版本才干撑持这些效果，但懂得它们仍是必需且很风趣味性的。狂风彬彬将在这篇文章向人人展现CSS中的5个风趣的新手艺:圆角、一般圆角、不通明度、暗影和调剂元素巨细。
1：基础标志

登录/注册后可看大图

在我们入手下手这个教程之前，先来创立全部教程都要利用的基础标志。
我们的xHTML必要一下div元素:

#round,利用CSS3代码完成圆角.
#indie,使用一般的几个圆角.
#opacity,展现新的CSS3完成不通明度的体例.
#shadow,展现不利用Photoshop的情形下，利用CSS3来完成暗影效果.
#resize,展现怎样利用某种CSS来完成重设巨细的效果.

综上所述，我们的xHTML应当是如许的:

<!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文件:

body{
background-color:#fff;
}
#wrapper{
width:100%;
height:100%;
}
div{
width:300px;
height:300px;
margin:10px;
float:left;
}

正如你下面看到的，我们给每一个div元素300px的宽和高，并让它们向左浮动，全部页面的div都留给我们在前面的事情中增加款式。
2:圆角

登录/注册后可看大图

今朝而言，创立圆角的办法有良多，但都很贫苦。最经常使用的办法:起首，你要创立圆角的图片；然后，你要创立良多html元素并利用背景图象的体例显现圆角。详细流程你我都很分明。
这个成绩将在CSS3中很复杂的办理失落，那就是叫做“border-radius”的属性。我们先创立一个玄色的div元素并给他设置玄色的边框。边框就是要完成“border-radius”属性效果的条件。
像如许:

#round{
background-color:#000;
border:1pxsolid#000;
}

如今你已创立了div元素，它看起来和你预期的模样一样，300px款和高有楞有角且是玄色的。上面我们来增加完成圆角的代码，它是云云的简便，仅仅必要两行代码。

#round{
background-color:#000;
border:1pxsolid#000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

在这里，我们增加了两行相似的代码，-moz-合用于Firefox扫瞄器，而-webkit-则是用于Safari/Chrome扫瞄器。
注:今朝为止IE扫瞄器不撑持border-radius属性，以是假如想让IE也有圆角效果，那末就要独自增加圆角了。
border-radius这个属性直译过去是边框半径的意义，就好像Photoshop一样，它的值越年夜，圆角也就越年夜。
3:一般的圆角

登录/注册后可看大图

假如依照已往的习气做法，会华侈你良多工夫，如今CSS3能疾速办理!
我们如今只想让div的右上和右下是圆角，那末仅需稍作修正:

#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;
}

试想一下这类做法会用在网页中的甚么元素呢？对！就是标签式的导航按钮！
4:以CSS3的体例修正不通明度

登录/注册后可看大图

如今你能够按常规编写几行代码来完成不通明度的效果(hack)。不外CSS3简化了这个流程。
这行代码很好记，仅仅是“opacity:value;”:

#opacity{
background-color:#000;
opacity:0.3;
}

5:暗影效果

登录/注册后可看大图

完成暗影也有良多办法，最经常使用的就是利用Photoshop制造成暗影图片，然后使用到背景属性中。但CSS3让你的事情更无效率，不幸的是，今朝只要Safari和Chrome撑持这个新特征。
仅仅必要一行代码，不外它有4个分歧的值:

-webkit-box-shadow:3px5px10px#ccc;

下面我来注释一下这四个值都代表甚么，第一个3px是指定暗影与div元素之间的程度(横向)间隔，第二个5px指的是暗影与div之间的垂直(纵向)距离，第三个10px指的是暗影的含混度(相似于photoshop中的成仙)，值越年夜越精致。最初的值不说人人也晓得，就是暗影的色彩。
我们终极暗影效果代码；

#shadow{
background-color:#fff;
border:1pxsolid#000;
-webkit-box-shadow:3px5px10px#ccc;
}

正如你看到的，我们个这个div设置了红色的背景，玄色的边框和亮灰色的暗影。
6:调剂巨细

登录/注册后可看大图

在最新版本的CSS中，调剂元素的尺寸已成为大概（不外今朝仅Safari撑持）
使用这个代码今后，我们的元素的右下角会呈现一个小三角以提醒用户这个元素是能够调剂尺寸的。代码仍然很复杂，能够说仅必要一行代码，固然你还能够共同利用一些已经利用过的属性，好比”max-width”,“max-height”,“min-width”和“min-height”.

#resize{
background-color:#fff;
border:1pxsolid#000;
resize:both;
overflow:auto;
}

在这里次要说一下resize和overflow属性，resize:both;的意义就是一切边都能够调剂尺寸，它的值另有horizontal和vertical，望文生义，就是横向和纵向。而overflow是为了共同resize事情的，在这里利用auto.
总结

怎么样，你在这篇文章中有无甚么劳绩呢？固然如今唯一很多数的扫瞄器撑持CSS3，但不成否定的是CSS3切实其实会为我们的事情节俭更多的工夫。假如你对渐进加强有所懂得和熟悉的话，我想你会怅然承受CSS3这个壮大的新版本的。不要再把你的工夫都花在IE6上了，那样你只能会是过期的前端开辟工程师。
英文原文:5TechniquestoAcquaintYouWithCSS3
翻译原文:你应该懂得的5个CSS3新手艺
然后你要知道，DIV+CSS是高成本开发，速度当然是没有你画TABLE来的快，但是好处更多，相信如果你能看到这里，你一定对DIV+CSS的好处也有一定的了解了。

只看该作者 · 发表于 2015-1-18 06:48:57

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

只看该作者 · 发表于 2015-1-24 16:01:01

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

只看该作者 · 发表于 2015-2-2 10:56:50

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-2-7 18:37:16

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

只看该作者 · 发表于 2015-2-23 00:48:08

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-3-7 06:24:07

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-3-14 15:59:56

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

只看该作者 · 发表于 2015-3-21 12:32:05

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之5个你应该懂得的CSS3新手艺

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子