You searched for - Page 2 of 6

7

HTML5新增标签的汇总与详解

August 29, 2012 / in Boke / by Geelin

趁着一点闲暇时间，把HTML5的新增标签整理了一下，用了表格的形式展现，分别归纳了各标签的用法及属性分析。这样方便各位以后在运用HTML5标记遇到疑惑时，直接上来对照看下就明了了，希望对大家有帮助哦。标签标记意义及用法分析/示例属性/属性值/描述 <article> 定义独立的内容，如论坛帖子、报纸文章、博客条目、用户评论等内容。支持HTML5的全局属性和事件属性。 <aside> 定义两栏或多栏页面的侧边栏内容，如联系我们、客服、网站公告等内容。支持HTML5的全局属性和事件属性。 <audio> 定义音频内容，如音乐或其他音频流。 autoplay autoplay 自动播放。 controls controls 显示控件。 loop loop 自动重播。 preload preload 预备播放。如果使用 "autoplay"，则忽略该属性。 src url 音频的URL。支持HTML5的全局属性和事件属性。 <audio…

8

jQuery实现半收缩或全部展开的分类效果

August 13, 2012 / in Boke / by Geelin

在电子商务网站中，下图是二级页面中最常见的一种商品分类展现模式：也就是网站制作时会默认列出其中一部分搜索率较高的分类，隐藏另外一大部分，免得占用有利的视觉空间，当用户找不到自己需要的分类时，“展开更多▼”之类的按钮会引导他点击继续浏览其它分类；反之，当用户不再需要看更多分类时，便可点击“简洁展现▲”之类的按钮将那部分分类再收缩起来。这个功能用jQuery来实现，很简单；此外我们也可以在按钮展开更多的时候选择高亮显示其中某个类目，只需先定义一个高亮显示样式，然后使用jQuery在适当的时候调用就好了。光说不练，等于白干。下面贴上此效果的完整源码，有兴趣的可以复制到html文件里，看看效果，并揣摩类似应用。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery实现半收缩或全部展开的菜单效果——CCJK本地化官方博客——我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案</title> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ var moreMenu = $(".menu ul li:gt(5):not(:last)");…

9

网页二级导航各种效果实现技巧

July 31, 2012 / in Boke / by Geelin

一般稍大点的网站都会运用二级导航甚至三级导航来将网站内容分门别类得更具体。二级导航的运用最为普遍，今天就主要来探讨二级导航的多种效果实现。以我个人以往的项目经验来看，我认为二级导航基本分为以下三种展现方式： ① 、水平通栏显示。即二级导航跳出主导航的宽度局限，而与页面同宽。 ② 、水平同宽显示。即二级导航的宽度与主导航一致，表现为100%继承。 ③ 、垂直下拉显示。即二级导航垂直列出，宽度以其内容来定，且分别位于对应主导航下方。而不管是哪种展现方式，都有一个共同点，就是二级导航都是在鼠标经过（滑过）对应的主导航时才显示出来，默认为隐藏。这个功能网上有多种JS实现方式，不过今天要跟大家分享的是不用JS，而只用CSS就可以实现且兼容各主流浏览器的一种方法。这种方法用到两个知识点：:hover伪类选择器和position定位。我们先写出通用结构代码来看：导航一子导航① 子导航② 导航二导航三分析一下：ul.submenu为二级导航，默认要隐藏；当鼠标经过“导航一”时要显示出来。很显然，我们要利用主导航的:hover伪类选择器。其次，所谓“隐藏”，就是在眼睛所见界面上是看不到的，那我们可以给它用position:absolute绝对定位到界面之外的地方，比如left:-999em，这个距离够远，所以就达成了“隐藏”的效果；那么显示的时候就将这个left值改为0就好了。定义了position:absolute绝对定位的元素是根据离其最近的定义了relative的外元素（即父级元素、祖父级元素等）容器发生位移的；如果没有这样一层外元素容器，那么它就会从文档流中脱出，根据文档（即body）的位置来进行位移。理解这点很重要，直接关系到区分三种方法之间的使用技巧。首先为上面的结构代码写出简单的通用样式： * {margin:0; padding:0;} ul {list-style:none;} a {color:#fff; text-decoration:none;} body {font:14px/24px "微软雅黑";} 好了，下面我们依次来看三种展现方式的样式和效果：第①种样式： .menu…

10

用CSS3为内容插入文字和图片

July 15, 2012 / in Boke / by Geelin

大家在一些门户网站或者博客日志列表中，一般会看到些文字后面跟着“…”表示有省略的文字内容。如下所示：我们提供专业的网站开发、翻译本地化、网络推广一站式解决方案...... 在CCJK此博客首页就是使用的“…”。在之前，我们是通过后端服务器程序截取或JS截取文字后加入“…”的，现在CSS3新增的content属性定义对应样式就可以实现啦。下面我们来看下具体用法： content属性，以段落P标签内容为例：如果我们想往其内部后追加“…”，可以这样定义样式：p:after{content:"...";} 同样，我们也可以将…换成任何文字，如：p:after{content:"详情请点击";} 此外，既然可以追加后置内容after，自然也提供了前置内容的追加方法before，如：p:before{content:"今日主题";} 现在来假设一种情况，如果我们使用p:after{content:"详情请点击";}已定义了所有的p内容后追加“详情请点击”，但是其中一个ID为note的p又不需要自动追加此后置内容，这时候我们可以为这个p另外定义——为content属性制定none值（注意：none值只能用于before和after这两种选择器）或normal（任何选择器都没问题）值即可：#note:after{content:none;} 上面说了这些content属性的值都为文字内容，那么能否通过此方法追加图片呢？CSS3果然是不会让我们失望。大家看语法——li:after{content:url(../images/hot.png);}，就这么简单，把content的值改为url并加上正确的图片地址即可，然后通过after或before就把图片插入到其元素之后或之前了。这在网站中也是很实用的，一些列表中用到的hot、new小图标，都可以这么添加了。由此可见， content属性主要是通过伪类选择器:before和:after来添加定义，content属性的值可以为任何内容，若content属性的值为none，则表示不插入任何内容。

11

利用JS改变复选框input-checkbox的默认样式

June 27, 2012 / in Boke / by Geelin

浏览器解析的html元素大多都有默认样式，所谓默认样式自然是大众化简洁化的，美观总是达不到要求。所以我们才会用CSS来改变他们的样式，使之美观。然而有一些元素是无法用CSS来定义样式的，比如表单中的复选框、单选框、下拉列表等，一般情况下是不拘这些小节的，默认的东西看多了也成了大家能接受的定律；但作为前端人员，总会遇到追求完美效果的网站，还好办法总是有的，这就需要借助JS来定义样式了。先来看一个自定义复选框的效果：如果我们是要在一个小框做成两个图片：一个是选中状态，一个是未选中状态。那么我们可以在页面里添加下面一段JS，并修改相应的四处图片路径和名称。这样看来似乎有些繁琐，但其实只需要改四个地方。有了这段JS，以后解决复选框样式就能得心应手了。

12

CSS3状态伪类选择器及兄弟元素选择器

June 14, 2012 / in Boke / by Geelin

今天来学习CSS3的另一大类伪类选择器——状态伪类选择器。“状态伪类”顾名思义，选择的是一种状态，对元素某一状态定义样式，即该元素只在某种状态下才使用指定样式；默认状态下（或非某种状态下）是不采用指定样式的。 1、:hover选择器、:active选择器和:focus选择器 :hover选择器：表示选择当鼠标悬停在某元素上的这种状态时指定样式； :active选择器：表示选择当某元素处于激活状态（鼠标在该元素上按下还没有松开）的这种状态时指定样式。以上两个选择器在超链接中经常用到，很容易理解，所以我们可带着同样的理解方式来看下面其它状态伪类选择器。 :focus选择器：表示选择当元素获得光标焦点这种状态时指定样式，主要用于指定文本框输入文字时的样式。（示例附后） 2、:enabled选择器和:disabled选择器 :enabled选择器：表示选择当某元素处于可用状态时指定样式； :disabled选择器：表示选择当某元素处于不可用状态时指定样式。这俩选择器通常用于form元素，因为form元素有可用和不可用状态，以往为他们定义样式时，我们分别为它们定义不同的class，然后通过JS对其元素设置可用状态的同时指定不同的class来实现。然而有了CSS3就没必要这么麻烦了，JS只需要指定可用状态，样式会自己选择，JS代码也非常精简，易用多了。（示例附后） 3、:read-only选择器和:read-write选择器 :read-only选择器：表示选择当某元素处于只读状态时指定样式； :read-write选择器：表示选择当某元素处于非只读状态时指定样式。这俩选择器除了具体状态和功能不同外，用法与前面两个是一样的，就不贴示例了。 4、:default选择器、:checked选择器和:indeterminate选择器这三个选择器是针对复选框和单选框来使用的，目前只有Opera浏览器支持最好！ :default选择器：表示选择当前元素处于非选取状态时的单选框或复选框指定样式； :checked选择器：表示选择当前元素处于选取状态时的单选框或复选框指定样式； :indeterminate选择器：表示选择当页面打开时，某组中的单选框或复选框元素还没有选取状态时指定样式。（示例附后） 5、::selection选择器此选择器使用了两个“:”不是笔误，这是它的标准写法哦。主要是用来选择某元素处于选中状态时指定样式。还有就是你可能会一下想到下拉列表select，不过这里不是下拉列表，就是一个选中状态选择器。（示例附后）小结：Ok，CSS伪类选择器，就告一段落了。那基本上所有选择器都学习完了，不过最后在此还给大家介绍一个通用兄弟选择器，以此来结束我们的选择器学习吧。 Element ~ 兄弟元素选择器——表示选择位于同一个父级元素下的某元素之后的所有其他某个种类的兄弟元素来指定样式。（示例附后）下面贴上此节所备示例代码： :hover选择器、:active选择器和:focus选择器示例：大家仔细看这两个input的状态及样式变化，定义的样式相同，就是给第二个input多定义了一个:focus状态样式，但是展现效果差异还蛮大的，第二个input忽略了:active状态的样式，这是因为active触发的同时focus也触发了，所以就直接展现了:focus状态下的样式了。 :enabled选择器和:disabled选择器示例：可用:enabled…

Blog

32 search results for:

HTML5新增标签的汇总与详解

jQuery实现半收缩或全部展开的分类效果

网页二级导航各种效果实现技巧

用CSS3为内容插入文字和图片

利用JS改变复选框input-checkbox的默认样式

CSS3状态伪类选择器及兄弟元素选择器

Need Translation Service?

Words Translated in 2023

394M+

About CCJK

Resources

TRANSLATION SOLUTIONS

CCJK BLOGS

[email protected]

+1 925-978-8211