Category Archives: Frontend

如何使用 CSS3 增强网站字体设计CSS, 字体网页设计, 字体WOFF字体属性字体嵌入

利用 Windows Internet Explorer 9 中新提供的对 层叠样式表 (CSS)，级别 3 (CSS3) 字体模块的支持，您可以将您的网站访问者的版式体验进行升级。 本主题演示如何将新的 CSS3 字体功能并入到您的网站中，以便在 Internet Explorer 9 和其他现代浏览器中突显您的字体设计。 版式是 Web 设计不可缺少的一部分，Internet Explorer 9 支持在 CSS 字体模块级别 3工作草案和 Web 开放字体格式 (WOFF) 1.0 工作草案中定义的高级版式功能。 这些功能包括以下各项： 通过使用 @font-face 规则改进的字体链接 新提供的对 Web 字体格式的支持： Web 开放式字体格式 (WOFF) 原始的可安装的 TrueType 和 OpenType（未设置嵌入权限） 具有新增的和更新的字体属性的高级版式功能： 新增的 font-stretch 属性 更新的 font-weight 和 font-size 属性，它们使其呈现行为在其他浏览器中更加一致。 另外，Internet Explorer 9 利用硬件加速的 Microsoft DirectWrite API 和子像素 Microsoft ClearType 字体定位（在 IE9 标准模式中），可比以前更快地呈现字体，且字体看起来更平滑。 （有关 Internet Explorer 9 中的字体硬件呈现的详细信息，请参阅 IE 团队博客上的 IE9 中的子像素字体。） 本主题包含以下几节：   Web 字体入门 font 元素 CSS 字体属性 字体嵌入 其他解决方案 WOFF 格式 使用 Internet Explorer 9 […]

如何使用 CSS3 创建酷炫十足的按钮创建按钮, CSS3CSS3, 创建按钮Web 设计, 按钮

注意  本主题受 ZURB.com 上的这篇博客文章的启发并针对 Windows Internet Explorer 9 进行了优化。 利用 层叠样式表 (CSS)，级别 3 (CSS3) 和 Internet Explorer 9，只需少量几个标记，您就可以创建外观非常吸引人的按钮。 本主题演示如何完全利用 层叠样式表 (CSS) 将简单的超链接转换为时髦的按钮。 本主题包含以下几节：   起点 添加圆角 添加阴影 添加透明渐变叠加 作为数据 URI 添加透明渐变叠加 汇总 相关主题 本主题包括以下 CSS3 功能： 使用 border-radius 属性的圆角 使用 box-shadow 属性的阴影 RGBA 颜色值 本主题还包括首次在 Windows Internet Explorer 8 中引入的以下功能： 数据 统一资源标识符 (URI) 透明 可移植网络图形 (PNG) 起点 在本主题中，我们使用如何使用 CSS3 添加圆角框中的同一咖啡公司示例。 我们会将棕色订单信息水平栏中每个产品描述后的“Order Now!”超链接变成一个按钮。 该订单信息栏当前如下所示： 此规则由以下类选择器定义：   复制

首先，让我们将“Order Now!”超链接变成一个基本的矩形按钮。 为了很好地与其他设计部分进行对比，让我们将此按钮设为蓝色。 我们还将增加订单信息栏的高度，以便容纳更大的按钮。 基本按钮的 CSS 如下所示。 （已声明此选择器，以便具有 product_orderinfo 类的元素中的任何 a 元素都会应用所列的声明。 这将确保此选择器只应用于订单信息栏中的“Order Now!”按钮。）   复制

这将使订单信息栏如以下图像所示： 我们还将添加以下选择器，以便当光标悬停在此按钮上时使其变成棕色：   复制

这将使得当光标悬停在此按钮上时它会如下所示： 可以查看修订过的页面。 还可以下载它的 […]

如何使用 CSS3 添加投影添加投影, CSS3CSS3, 投影

如何使用 CSS3 添加投影添加投影, CSS3CSS3, 投影   本主题向您演示如何使用 Windows Internet Explorer 9 和 层叠样式表 (CSS)，级别 3 (CSS3) 向布局元素的外部或内部添加投影。 您甚至可以为您使用 Internet Explorer 9 中新提供的圆角支持创建的圆角曲线添加阴影。 本主题包含下列部分：   方框阴影选项和语法 创建基本投影 使用投影创建“发光”效果 创建内部投影 使用其他浏览器创建投影 汇总 使用旧版 Internet Explorer 创建投影 相关主题 方框阴影选项和语法 投影是由 box-shadow 属性启用的。 像圆角一样，Internet Explorer 9 中的投影功能非常强大；您有多个可以指定的选项。 box-shadow 属性中值的顺序如下：   复制

此处，hoff 指示水平偏移，voff 指示垂直偏移，bd 指示模糊距离，sd 指示扩散距离，color 指示阴影颜色，而 inset 是一个关键字，使用时指示阴影为内部阴影，而不是外部阴影。 前两个值是属性工作所必需的值，所有值都必须按照列出的顺序指定。 如果未指定颜色，则 Internet Explorer 9 使用黑色作为阴影颜色。 此处定义了每个值： horizontal offset 此长度值是必需的。 它指定阴影向右（正值）或向左（负值）延伸的距离。 有关视觉解释，请参阅以下图示；hoff 指示水平偏移，设置为 20 像素。 vertical offset 此长度值是必需的。 它指定阴影向下（正值）或向上（负值）延伸的距离。 有关视觉解释，请参阅以下图示；voff 指示垂直偏移，设置为 20 像素。 blur distance 此正长度值指示阴影边缘的模糊程度，即模糊起点和终点之间大约的距离。 值越高越模糊。 有关视觉解释，请参阅以下图示；bd 指示模糊距离，设置为 30 像素。 spread distance 此长度值指示阴影形状在各个方向扩展（正值）或收缩（负值）的程度。 此值表示阴影在各个方向将延伸超过原始图形尺寸的距离。 有关视觉解释，请参阅以下图示；sd […]

如何使用 CSS3 添加圆角圆角文本框, 圆

通过使用 层叠样式表 (CSS)，级别 3 (CSS3) 为布局元素生成圆角，可以美化网站的外观。 本主题演示了通过使用 Windows Internet Explorer 9 中的新圆角内置支持让您的网站布局更具吸引力的几个基本方法。 它包含以下几部分：   起点 生成全部相同的圆角 分别生成多个圆角 使用椭圆生成圆角 使用其他浏览器生成圆角 汇总 使用早期版本的 Internet Explorer 生成圆角 相关主题 起点 对于本主题中描述的任务，我们从最基本的网页开始操作。 该页是一家虚拟的咖啡公司的网页，其中包括一些 HTML、一些 层叠样式表 (CSS) 和几个图像。 可以查看并下载 HTML 和 CSS。 下面的屏幕快照显示了初始网页。   要点   在创建您自己的网页以利用 Internet Explorer 9 中引入的新 Web 标准支持时，请确保在页面顶部包括以下 !DOCTYPE 指令：   复制

这将确保 Internet Explorer 9 使用最新的标准支持在“Internet Explorer 9 标准模式”中呈现您的页面。 有关详细信息，请参阅定义文档兼容性。 与许多其他布局一样，在此布局中，框有助于以可视方式分隔内容，并提供视觉吸引力。 同样，此布局完全是平直的。 不过，可利用 Internet Explorer 9 和 CSS3 为这些框生成圆角。 Internet Explorer 9 中使用 CSS3 生成的圆角非常可靠，并且这些圆角有很多种可能的组合。 在本主题中，我们将重点说明示例布局的三个区域，如下图中的突出显示部分所示： 咖啡豆缩略图图像的边框（由 product_thumb 类选择器定义） 靠页面右侧的边栏（由 sidebar ID 选择器定义） 靠页面顶部和底部的黄色标题带区（由 header 和 footer ID 选择器定义） 生成全部相同的圆角 我们将从咖啡豆缩略图开始操作，为其提供略微平滑的角。 若要为框生成全部相同的圆角，请为 border-radius 属性指定一个值。 […]

div 实现长英文字母自动换行CSS

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto；  

元素的class与ID命名常用关键字

由于项目中编写文档结构、编写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

CSS样式命名规则(仅供参考)

1.样式命名外　套：　　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

企业网站常用中英文对照表

　　门户网站 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 […]

使IE6下PNG背景透明的七种方法任你选

PNG图像格式介绍： 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=’" + […]

css实现强制不换行/自动换行/强制换行

强制不换行 div{white-space:nowrap;}  自动换行 div{ word-wrap: break-word; word-break: normal; }  强制英文单词断行 div{word-break:break-all;}