咨询电话:024-31891684

pg电玩城-pg电子麻将胡了2试玩|注册|登录 |

html5 css3将带给我们什么?-pg电玩城

 

html5 css3将带给我们什么?当前位置:pg电玩城-pg电子麻将胡了2试玩>主要服务>网站制作>css

1. 语义化结构

先看一段页面代码:

<div class="rightcl_part toggle_box" id="help_guide_3">

    <div class="stretch ac_toggler">我的勋章<span title="点击收起">

    <div class="medal clearfix toggle_body">勋章内容

    <div class="paddingleft toggle_body">查看更多



繁多的“class”、“id”等标签令页面越来越臃肿,开发者想爆头脑取名,浏览者不易阅读,无从下手。借助html5更语义化的结构标签,我们可以如下优化:

<
section>

    <header>我的勋章<span title="点击收起">

    <article>勋章内容

    <footer >查看更多



当然在html5时代想完全和“class”、“id”说拜拜是不可能的,当页面需要同时出现多个“section”、“header”等时,一种方法是分别定义不同的“class”或“id”,另一方法就是借助更强大的css选择器了,这里列举几个“选择器”样例:

body nav section {}                     定位最外层的section 元素

section>section {}                        定位下一个section 元素

section section article {}             定位article 元素

2. 自由透明度

css3时代我们终于可以抛弃长长的透明滤镜,在同一个样式里分别为“背景”、“文字”、“边框”定义不同的透明度了,css样式如下:

.box {

 color: rgba(255,255,255,0.9);                     /*文字透明度*/

 background-color: rgba(0,0,0,0.2);            /*背景透明度*/

 border:3px solid rgba(0,0,0,0.5);                /*边框透明度*/

 height:100px;

 width:100px;

 }



但发现奇怪的一点边框的透明度会与背景的透明度相叠加,具体更好的分离透明度方法还在尝试中。

 

3. 尽情圆角吧

昔日当碰到应对不同宽度的圆角结构,不得不分两段或三段来处理,现在也可以通过一句样式来完成了!圆角样式:border-radius:10px;  可以直接加入上面的样式测试效果:

.box {

 color: rgba(255,255,255,0.9);                     /*文字透明度*/

 background-color: rgba(0,0,0,0.2);            /*背景透明度*/

 border:3px solid rgba(0,0,0,0.5);               /*边框透明度*/

border-radius:10px;                                    /*圆角率*/

 height:100px;

 width:100px;

 }

 


也可分别定义四个角的圆角率,样式如下:

border-top-right-radius:10px;           border-bottom-right-radius:10px;

border-bottom-left-radius:10px;       border-top-left-radius:10px;

其实
mozilla(firefox)webkit(safarichrome)内核也早已有自己的圆角样式,具体如下表:

css3

mozilla

webkit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius

 

4.“文字”、“盒子”阴影

摈弃长长滤镜样式的快感,也只有css3时代才能感受得到,期待早日到来。

文字阴影:text-shadow: 2px 2px 1px rgba(0,0,0,0.5);

盒子阴影:box-shadow: 0 0 10px rgb(0,0,0);

可继续加入上面的样式测试效果:

 

.box {

 color: rgba(255,255,255,0.9);                             /*文字透明度*/

 background-color: rgba(0,0,0,0.2);                    /*背景透明度*/

 border:3px solid rgba(0,0,0,0.5);                       /*边框透明度*/

border-radius:10px;                                            /*圆角率*/

text-shadow: 2px 2px 1px rgba(0,0,0,0.5);      /*文字阴影*/

box-shadow: 0 0 10px rgb(0,0,0);                    /*盒子阴影*/

 height:100px;

 width:100px;

 }

 

甚至看到网上有更疯狂的做法,几个阴影同时添加:

text-shadow: 0 0 10px rgba(0,255,0,.5), -10px 5px 4px rgba(0,0,255,.45), 15px -4px 3px rgba(255,0,0,.75);

 

其中盒子阴影滤镜对浏览器版本要求比较高,若使用较低版本的firefoxchrome可使用原生样式测试效果:

-moz-box-shadow: 0 0 10px rgb(0,0,0);

-webkit-box-shadow: 0 0 10px rgb(0,0,0);

 

5. 同一盒子多背景图

添加多个背景图只需在原来的基础上,中间以逗号隔开即可,样式如下:


background-image:  
;

background-repeat: no-repeat;

background-position: bottom left , top right;

 

 

上一条资讯|返回栏目页|下一条资讯

分享到:
0

沈阳网站制作--网站前台效果

易势网站制作,以div css为主,js/jquery为辅,制作利于优化,页面美观的优质网站!

top

网络策划公司|新浪官方微博|

网站软件咨询

客户服务咨询

网站地图