|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
可以将站点上所有的网页风格都使用一个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就可以轻松实现，从而更快地下载页面。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:40:10
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主
窥视卡
雷达卡
发表于 2015-3-5 14:47:53