仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 846|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:CSS教程:制造圆角矩形的网站头像

[复制链接]
小女巫 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:37:26 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介:今朝很多网站的团体头像都接纳圆角矩形来表现,这类效果就是经由过程CSS与PNG通明图标来做的,上面为您先容两种制造圆角矩形头像的办法.
今朝很多网站的团体头像都接纳圆角矩形来表现,这类效果就是经由过程CSS与PNG通明图标来做的,上面为您先容两种制造圆角矩形头像的办法:
很多多少sns的头像都利用圆角了,今天在校内上看到了圆角头像,明天在Qzone的也看到了圆角头像,圆角头像看上往比直角的美妙。

圆角头像的制造道理就是在头像上掩盖一张通明的图片,把四个角色彩设置成页面的背景色彩,两头通明,
假定我的页面底色是纯玄色的,那末这个通明图片能够做成如许,如图:

这里必要注重的是必要把图片保留成24位的png,固然IE6撑持8位的png的通明,可是8位的png做通明圆弧图片存在效果上的成绩,就是存在红色的杂边或锯齿,如图:

,24位的png或32位的png的圆弧通明(半通明)图片则十分平滑,可是活该的IE6不撑持24位的png或32位的png通明(其他扫瞄器都撑持),必要我们分外的一下处置;
IE6下处置24位的png或32位的png方办法有良多,我做了2种:
第一种:利用AlphaImageLoader选择器:
html代码:
  1. <divid="circular-box"class="clearfix"><ul><li><ahref="http://www.sodao.com"></span></a></li><li><ahref="http://www.sodao.com"><ul><li><ahref="http://www.sodao.com"></span></a></li><li><ahref="http://www.sodao.com"><imgsrc="jy20090504036.jpg"width="200"height="200"/><spanclass="cir-bg"></span></a></li></ul></div>
复制代码
CSS代码:
  1. #circular-box{margin:50px;}#circular-boxli{float:left;margin:020px;position:relative}#circular-boxliimg{display:block}#circular-boxlispan{position:absolute;top:0;left:0;width:200px;height:200px;background:url(circular.png)no-repeat;behavior:url("iepngfix.htc");cursor:pointer}
复制代码
这里必要注重的是:

  • 页面头部必要援用iepngfix_tilebg.js;
  • 在通明图片的元素上加:behavior:url(”iepngfix.htc”);
检察demo:http://www.css88.com/demo/circular-img/circular-img.html
另:校内最新的该效果制造有的出格,在撑持html5的扫瞄器上利用了Canvas,IE下是用VML,HTML5绘图基础上都靠canvas,并且必要js的撑持。相干信息能够检察http://byzuo.com/blog/html5-canvas

你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。
小妖女 该用户已被删除
沙发
发表于 2015-1-17 23:38:32 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
乐观 该用户已被删除
板凳
发表于 2015-1-21 14:12:54 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
海妖 该用户已被删除
地板
发表于 2015-1-30 19:49:21 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
第二个灵魂 该用户已被删除
5#
发表于 2015-2-6 15:45:30 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
再见西城 该用户已被删除
6#
发表于 2015-2-16 22:57:56 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
深爱那片海 该用户已被删除
7#
发表于 2015-3-5 11:35:27 | 只看该作者
不管老师做怎样的解释,而我却对它感到很是吃力,诸如里面有许多不知道的功能。
不帅 该用户已被删除
8#
发表于 2015-3-12 06:29:36 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
分手快乐 该用户已被删除
9#
发表于 2015-3-19 18:43:06 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-24 02:20

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表