通过使用 层叠样式表 (CSS)，级别 3 (CSS3) 为布局元素生成圆角，可以美化网站的外观。 本主题演示了通过使用 Windows Internet Explorer 9 中的新圆角内置支持让您的网站布局更具吸引力的几个基本方法。 它包含以下几部分： 起点 生成全部相同的圆角 分别生成多个圆角 使用椭圆生成圆角 使用其他浏览器生成圆角 汇总 使用早期版本的 Internet Explorer 生成圆角 相关主题 起点 对于本主题中描述的任务，我们从最基本的网页开始操作。 该页是一家虚拟的咖啡公司的网页，其中包括一些 HTML、一些 层叠样式表 (CSS) 和几个图像。 可以查看并下载 HTML 和 CSS。 下面的屏幕快照显示了初始网页。 要点 在创建您自己的网页以利用 Internet Explorer 9 中引入的新 Web 标准支持时，请确保在页面顶部包括以下 !DOCTYPE 指令： 复制
|
1 |
<!DOCTYPE html> |
这将确保 Internet Explorer 9 使用最新的标准支持在“Internet Explorer 9 标准模式”中呈现您的页面。 有关详细信息，请参阅定义文档兼容性。 与许多其他布局一样，在此布局中，框有助于以可视方式分隔内容，并提供视觉吸引力。 同样，此布局完全是平直的。 不过，可利用 Internet Explorer 9 和 CSS3 为这些框生成圆角。 Internet Explorer 9 中使用 CSS3 生成的圆角非常可靠，并且这些圆角有很多种可能的组合。 在本主题中，我们将重点说明示例布局的三个区域，如下图中的突出显示部分所示： 咖啡豆缩略图图像的边框（由 product_thumb 类选择器定义） 靠页面右侧的边栏（由 sidebar ID 选择器定义） 靠页面顶部和底部的黄色标题带区（由 header 和 footer ID 选择器定义） 生成全部相同的圆角 我们将从咖啡豆缩略图开始操作，为其提供略微平滑的角。 若要为框生成全部相同的圆角，请为 border-radius 属性指定一个值。 […]
View Details自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto；
View Details由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，就需要统一class与id的名称，前天花了一点时间，按照大多人的习惯，制定了下面的常用关键字： 容 器：container/box 头 部：header 主 导 航：mainNav 子 导 航：subNav 顶 导 航：topNav 网站标志：logo 大 广 告：banner 页面中部：mainBody 底 部：footer 菜 单：menu 菜单内容：menuContent 子 菜 单：subMenu 子菜单内容：subMenuContent 搜 索：search 搜索关键字：keyword 搜索范围：range 标签文字：tagTitle 标签内容：tagContent 当前标签：tagCurrent/currentTag 标 题：title 内 容：content 列 表：list 当前位置：currentPath 侧 边 栏：sidebar 图 标：icon 注 释：note 登 录：login 注 册：register 列 定 义：column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列) 转自：http://www.lanrentuku.com/lanren/superlazy/20070526/superlazy182717.html
View Details1.样式命名外 套： wrap主导航： mainnav子导航： subnav页 脚： footer整个页面： content页 眉： header页 脚： footer商 标： label标 题： title主导航： mainbav（globalnav）顶导航： topnav边导航： sidebar左导航： leftsidebar右导航： rightsidebar旗 志： logo标 语： banner菜单内容1： menu1 content菜单容量： menu container子菜单： submenu边导航图标：sidebarIcon注释： note面包屑： breadcrumb(即页面所处位置导航提示）容器： container内容： content搜索： search登陆： Login功能区： shop(如购物车，收银台)当前的 current 2.另外在编辑样式表时可用的注释可这样写：<-- Footer -->内容区<-- End Footer --> 3.样式文件命名主要的 master.css布局，版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css http://www.lanrentuku.com/lanren/superlazy/20070419/000757.html
View Details门户网站 portals website 网站导航 site map 公司简介 profile / company profile / company 公司设备 equipment 公司荣誉 glories 企业文化 culture 产品展示 product 资质认证 quality certification 企业规模 scale 营销网络 sales network 组织机构 organization 合作加盟 join in cooperation 技术力量 technology 经理致辞 managers oration 发展历程 development history 工程案例 engineering projects 业务范围 business scope 分支机构 branches 供求信息 supply & demand 经营理念 operation principle 产品销售 sales 联系我们 contact us 信息发布 information 返回首页 homepage 产品定购 order 分类浏览 browse by category 电子商务 e-business 公司实力 strength 版权所有 copy right 友情连结 hot link 应用领域 application fields 人力资源 human […]
View DetailsPNG图像格式介绍： PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式 网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可 存储多到16位的α通道数据。 IE6下PNG背景透明的显示问题 PNG格式比起GIF来表现色彩更丰富，特别是表现渐变以及背景透明的渐变要比GIF格式出色很多，目前，最新的浏览器基本上都支持PNG格式。但是IE6不支持PNG背景透明，会显示一个灰色的框。 IE6下PNG背景透明的解决办法 .pngImg { background:url(image.png); _background:url(image.gif);} 注意上文的_号，目前IE7,8以及Firefox浏览器等都不支持此CSS语法，只有IE6识别。因此，其他浏览器会调用PNG，而IE6刚调用GIF。 二.滤镜filter解决IE6下背景灰 background:url(a.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="a.png" ,sizingMethod="crop"); 上面的原理是其他调用PNG，IE6,则先设背景没有，然后调用滤镜使之显示PNG图片。 缺陷：IE6下背景无法平铺，这个问题很严重。同时在性能上也有小问题，页面中次数不是很多的时候该办法还是可行的。 AlphaImageLoader滤镜会导致该区域的链接和按钮无效，解决的办法是为链接或按钮添加：position: relative;这样条代码，使其相对浮动。AlphaImageLoader无法设置背景的重复，所以对图片的切图精度会有很高的精确度要求。 解决IE下的链接无效可用最后面的方法： 三.利用JS解决html中的img(插入在网页中的png图像)png背景灰问题 页面中插入一段js即可。原理同上，只是将img标签用<span>标签替换掉，并且通过滤镜设置该<span>标签的background。它会将所有插入的PNG都如此处理。<!--[if IE 6]> <script>function correctPNG() {for(var i=0; i<document.images.length; i++){var img = document.images[i];var imgName = img.src.toUpperCase();if (imgName.substring(imgName.length-3, imgName.length) == "PNG"){var imgID = (img.id) ? "id=’" + img.id + "' " : "";var imgClass = (img.className) ? "class=’" + img.className + "' " : "";var imgTitle = (img.title) ? "title=’" + img.title + "' " : "title=’" + […]
View Details强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-break:break-all;}
View Details设置为首页： <a href="#" onClick="this.style.behavior=’url(#default#homepage)';this.setHomePage('这里面写上你自己主页就可以了')">设置为首页</a> 个人理解：其中behavior是css属性，设置url为ie默认（default）动作。setHomePage是设置或返回主页的路径。 加入收藏夹 <a href="javascript:window.external.AddFavorite('这里面写上要加入收藏夹的地址就可以了', '收藏夹里显示的文字描述信息');">加入收藏夹</a>
View Details1.window.event.keyCode的用法： 例子、<input type="text" onkeydown="javaScript:if(window.event.keyCode==13) kenNumIE();" /> <script language="javascript" type="text/javascript"> function kenNumIE(){ alert("你按的是回车键！"); } </script> 但是该方法只对IE有效，原因是Firefox的window对象没有event属性，所以window.event是不存在的，Firefox只能在事件句柄函数的第一个参数获取事件对象。2.兼容Firefox的方法：<input type="text" onkeydown="return keyNumAll(event);" > <script language="javascript" type="text/javascript"> function keyNumAll(evt){ var k=window.event?evt.keyCode:evt.which; if(k == 13){ alert("你按的是回车键！"); } } </script> 这样，当你按回车键时，就可以触发keyNumAll(event)事件了。 附：window.event.keyCode 集合(键盘字符的Ascii)： XML/HTML代码 Ascii 代码表 Ascii 0 {Nulo, Sem Som} Ascii 1 Ascii 2 Ascii 3 Ascii 4 Ascii 5 Ascii 6 Ascii 7 Ascii 8 {BackSpace} Ascii 9 {Tab} Ascii 10 Ascii 11 Ascii 12 Ascii 13 {Enter} Ascii 14 Ascii 15 Ascii 16 {Shift} Ascii 17 {CTRL} Ascii 18 {ALT} Ascii 19 Ascii 20 {CapsLock} Ascii 21 Ascii 22 Ascii 23 Ascii 24 Ascii 25 Ascii 26 Ascii 27 Ascii 28 Ascii 29 – Ascii 30 – Ascii 31 Ascii 32 {Espa?o} ! Ascii 33 " Ascii 34 # Ascii 35 $ Ascii 36 % Ascii 37 & Ascii 38 ' Ascii 39 ( Ascii 40 ) Ascii 41 * Ascii 42 + Ascii 43 , Ascii 44 – Ascii 45 . Ascii 46 / Ascii 47 0 Ascii 48 1 Ascii 49 […]
View Detailsie,chrome可能通过JS的onselectstart 例如代码如下:<body onselectstart="return false"> firefox可以通过CSS 代码如下: *{ -moz-user-select:none }
View Details