咨询电话:024-31891684
13390130939售前咨询电话 31891684z6尊龙平台的售后服务电话
13390130939技术咨询 31891684传真
html5 css3将带给我们什么?当前位置:z6尊龙平台-凯时app官方首页>主要服务>网站制作>css1. 语义化结构 先看一段页面代码: <div class="stretch ac_toggler">我的勋章<span title="点击收起"> <div class="medal clearfix toggle_body">勋章内容 <div class="paddingleft toggle_body">查看更多
<header>我的勋章<span title="点击收起"> <article>勋章内容 <footer >查看更多
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; 可以直接加入上面的样式测试效果: 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-bottom-left-radius:10px; border-top-left-radius:10px;
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);
其中盒子阴影滤镜对浏览器版本要求比较高,若使用较低版本的firefox和chrome可使用原生样式测试效果: -moz-box-shadow: 0 0 10px rgb(0,0,0); -webkit-box-shadow: 0 0 10px rgb(0,0,0);
5. 同一盒子多背景图 添加多个背景图只需在原来的基础上,中间以逗号隔开即可,样式如下:
background-repeat: no-repeat; background-position: bottom left , top right;
0
|
易势网站制作,以div css为主,js/jquery为辅,制作利于优化,页面美观的优质网站!
网络策划公司|新浪官方微博|
沈阳易势科技有限公司 网站制作网络营销公司 © 2011 , all rights reserved. 公司地址:沈阳市铁西区贵和街道建设中路15号浅草绿阁商务楼402室沈阳网站制作易势最专业
辽b2-20150173-8号
"));