分类目录归档:xHTML/CSS

xHTML/CSS

form checkbox & radio 解决方案

form checkbox & radio

checkbox & radio 的对齐一直是个问题,不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样,相信纠结了一大批人,如果没有好好整理总结下得出一个经验,相信每次碰到这个鬼东西都是比较纠结的,很头疼啊。

重置 form checkbox & radio

因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。

以下是 14px Arial 字体的解决方案

CSS Code:

.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {
    margin: 0 3px 0 0;/*与右侧文字的间距*/
    padding: 0;
    width: 13px;
    height: 13px;
    /*ie7 ie6 根据不同的 font-size 设置不同的值*/
    *vertical-align: 1px;
}

HTML Code:

<form name="form1" method="post" action="" class="form">
  <p>
    <input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox">
    <label for="checkbox4">checkbox4</label>
    <input type="checkbox" name="checkbox5" id="checkbox5" class="form_checkbox">
    <label for="checkbox5">checkbox5</label>
    <input type="checkbox" name="checkbox6" id="checkbox6" class="form_checkbox">
    <label for="checkbox6">checkbox6</label>
  </p>
  <p>
    <input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
    <label for="radio4">radio4</label>
    <input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
    <label for="radio5">radio5</label>
    <input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
    <label for="radio6">radio6</label>
  </p>
</form>

更多Demo

兼容 IE input button 左右内边距的增加

IE 下的按钮标签(input、button)会随着文字的增加导致文本左右两侧的间距越来越大。该问题存在于 IE6/IE7,IE8~IE10 没发现类似问题。一般情况下,只要给按钮标签设置 overflow 属性的 visible 值,按钮就可以在 IE 下显示正常了。

HTML Code:

<input type="button" value="ie respects my padding" />

CSS Code:

padding: 10px;
overflow: visible;

HTML5 语义标签

在 HTML5 出来之前,我们用 div 来表示页面章节,但是这些 div 都没有实际意义。(即使我们用 css 样式的 id 和 class 来形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为 html5 的出现而消失了,这就是我们平时所说的“语义”。

html5-layout

如上图那个页面结构没有使用一个 div,都是采用 html5 语义标签(用哪些标签,关键取决于你的设计目标)。

但是也不要因为 html5 新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用 div 的,就是因为 div 没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C 定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传 100 年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了 HTML5 标签就弃用了 div,每个事物都有它独有的作用。

header 元素

header 元素代表“网页”或“section”的页眉;

通常包含 h1-h6 元素或 hgroup,作为整个页面或者一个内容块的标题,也可以包裹一个目录部分,一个搜索框,一个 nav,或者任何相关 logo;

整个页面没有限制 header 元素的个数,可以拥有多个,可以为每个内容块增加一个 header 元素;

header 示例代码:

<header>

  <hgroup>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
  </hgroup>

</header>

header 使用注意:

  1. 可以是“网页”或任意“section”的头部部分;
  2. 没有个数限制;
  3. 如果 hgroup 或 h1-h6 自己就能工作的很好,那就不要用 header;

section 元素

section 元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组;

section 通常还带标题,虽然 html5 中 section 会自动给标题 h1-h6 降级,但是最好手动给他们降级;

section 示例代码:

<section>

  <h1>什么是 section</h1>

  <article>

    <h2>关于 section</h2>
    <p>section 的介绍</p>

    <section>
      <h3>关于其他</h3>
      <p>关于其他 section 的介绍</p>
    </section>

  </article>

</section>

section 使用注意:

  1. 表示文档中的节或者段;
  2. article、nav、aside 可以理解为特殊的 section,所以如果可以用 article、nav、aside 就不要用 section,没实际意义的就用 div;

article 元素

article 元素最容易跟 section 和 div 容易混淆,其实 article 代表一个文档、页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的 widget 小工具。(特殊的 section)

除了它的内容,article 会有一个标题(通常会在 header 里),会有一个 footer 页脚。我们举几个例子介绍一下 article,好更好区分 article、section、div;

一篇简单文章的 article 示例代码:

<article>

  <header>
    <h1>文章标题</h1>
  </header>

  <p>文章内容..</p>

  <footer>
    <p>版权:cssue.com</p>
  </footer>

</article>

上例是最简单的 article 标签使用情况,如果在 article 内部再嵌套 article,那就代表内嵌的 article 是与它外部的内容有关联的,如博客文章下面的评论;

文章里的评论,一个 article 里嵌套 article 的示例代码:

<article>

  <header>
    <h1>文章标题</h1>
    <time datetime="2012-12-06">2012/12/06</time>
  </header>

  <p>文章内容..</p>

  <article>

    <h2>评论</h2>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>娃哈哈..</p>
    </article>

    <article>
      <header>
        <h3>评论者: XXX</h3>
        <time datetime="2012-12-06T19:10">~1 hour ago</time>
      </header>
      <p>哈哈哈哈...</p>
    </article>

  </article>

</article>

article 内部嵌套 article,有可能是评论或其他跟文章有关联的内容。那 article 内部嵌套 section 一般是什么情况呢。如下:

文章里的章节,一个 article 里嵌套 section 的示例代码:

<article>

  <h1>前端技术</h1>
  <p>前端技术有那些</p>

  <section>
    <h2>HTML</h2>
    <p>标签..</p>
  </section>

  <section>
    <h2>CSS</h2>
    <p>样式..</p>
  </section>

  <section>
    <h2>JS</h2>
    <p>脚本..</p>
  </section>

</article>

因为文章内 section 部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article 是大主体,section 是构成这个大主体的一部分。本网站的全部文章都是 article 嵌套一个个 section 章节,这样能让浏览器更容易区分各个章节所包括的内容。

那 section 内部嵌套 article 又有哪些情况呢,如下:

一个 section 里嵌套 article 的示例代码:

<section>

  <h1>介绍网站制作成员配备</h1>

  <article>
    <h2>设计师</h2>
    <p>设计网页的...</p>
  </article>

  <article>
    <h2>程序员</h2>
    <p>编写程序的..</p>
  </article>

  <article>
    <h2>前端工程师</h2>
    <p>给楼上两位打杂的..</p>
  </article>

</section>

设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像 article,是一个个独立的整体,而 section 将这些自成一体的 article 包裹,就组成了一个团体。

article 和 section 的例子就例举这么多了,具体情况具体分析,不易深究。漏了 div,其实 div 就是只是想用来把元素组合或者给它们加样式时使用。

article 使用注意:

  1. 自身独立的情况下:使用 article;
  2. 是相关内容:使用 section;
  3. 没有语义的:使用 div;

nav 元素

nav 元素代表页面的导航链接区域。用于定义页面的主要导航部分。

nav 示例代码:

<nav>
  <ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
  </ul>
</nav>

但是我在有些时候却情不自禁的想用它,譬如:侧边栏上的目录,面包屑导航,或者上一篇下一篇文章,但是事实上规范上说 nav 只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些 footer 元素就能够用了。

nav 使用注意:

  1. 用在整个页面的主要导航部分上,不合适就不要用 nav 元素;

aside 元素

aside 元素标签用来表示当前页面或文章的附属信息部分,可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav 元素组,以及其他类似的有别与主要内容的部分。

<article>

  <h1>前端技术</h1>
  <p>前端技术包括:HTML、CSS、JavaScript等...</p>

  <aside>
    <dl>
      <dt>HTML</dt>
      <dd>HTML 是用于描述网页文档的一种超文本标记语言。</dd>
    </dl>
  </aside>

</article>

aside 使用注意:

  1. 被包含在 article 元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的引用、词汇列表等。
  2. 在 article 之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等。

footer 元素

footer 元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果 footer 元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

footer 示例代码:

<footer>
  <p>版权:cssue.com</p>
</footer>

footer 使用注意:

  1. 可以是“网页”或任意“section”的底部部分;
  2. 没有个数限制,除了包裹的内容不一样,其他跟 header 类似;

CSS 换行样式

在 CSS 里,主要有强制换行和禁止换行。

一、div 强制换行

word-break: break-all;  /* 只对英文起作用,以字母作为换行依据 */
word-wrap: break-word;  /* 只对英文起作用,以单词作为换行依据 */
white-space: pre-wrap;  /* 只对中文起作用,强制换行 */

word-break: break-all 和 word-wrap: break-word 都是能使其容器如 div 的内容自动换行,它们的区别在于:

1、word-break: break-all

假设 div 宽度为 200px,它的内容就会到 200px 自动换行,如果该行末端有个很长的英文单词,它会把单词截断,一部分保持在行尾,另一部分换到下一行。

2、word-wrap: break-word

例子与上面一样,但区别就是它会把整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉。

二、table 强制换行

table {
    table-layout: fixed;
    word-wrap: break-word;
}

table-layout: fixed; 列宽由表格宽度和列宽度设定。

三、禁止换行

white-space: nowrap;

white-space: nowrap; 文本不会换行,文本会在在同一行上继续,直到遇到 <br /> 标签为止。

IE9 的 CSS Hack

以前写过一篇 《CSS Hack》, 这只是针对 IE6、IE7 和 FF 等主流浏览器的区分,现在微软已经将 IE 升级到了 9 ,所以 CSS Hack 也该更新了。新的 Hack 方法如下:

CSS Code:

body {
    background-color: #FF0;      /* Firefox, Chrome, Safari, = */
    background-color: #F00\0;    /* ie8/9 */
    background-color: #0F0\9\0;  /* ie9 */
    *background-color: #00F;     /* ie7 */
    _background-color: #F0F0F0;  /* ie6 */
}

注意写 hack 的顺序,其中:

  1. background-color:red\0; IE8和IE9都支持;
  2. background-color:blue\9\0; 仅IE9支持;

图片垂直居中的使用技巧

使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。

题目的难点在于两点:

  1. 垂直居中;
  2. 图片尺寸未知;

至于如何解决,下面是一个权衡的相对结构干净的 CSS 解决方法:

CSS Code:

.box {
    border: 1px solid #eee;
    /* 设置水平居中 */
    text-align: center;
    /* 非IE的主流浏览器识别的垂直居中的方法 */
    display: table-cell;
    vertical-align: middle;
    /* 针对 IE 的 Hack */
    *display: block;
    /* 防止非 utf-8 引起的 hack 失效问题,如 gbk 编码 */
    *font-family:Arial;
    /* 约为高度的 0.873, 200*0.873 约为 175 */
    *font-size: 175px;
    height: 200px;
    width: 200px;
}
.box img {
    /* 设置图片垂直居中 */
    vertical-align: middle;
}

HTML Code:

<div class="box"> 
    <img src="http://img.baidu.com/img/image/imglogo.gif" />
</div>

当然还有其他的解决方法,在此不深究,有兴趣的可以阅读下:

CSS 制作 table 细线表格

CSS Code:

table {
    /* 合并表格内外边框;其实表格边框有2px,外面1px,里面还有1px */
    border-collapse: collapse;
    /* 设置边框颜色;颜色:#888 = 灰色 */
    border-color: #888;
    /* 设置边框样式;样式:solid = 实线 */
    border-style: solid;
    /* 设置边框粗细;上 右 下 左 = 对应:1px 0 0 1px */
    border-width: 1px 0 0 1px;
}
table th, table td {
    border-color: #888;
    border-style: solid;
    border-width: 0 1px 1px 0;
    padding: 2px;
}

具有亲和力的文字隐藏方法

一个新的,更加具有亲和力的CSS隐藏文字方法介绍,来自 sonspring.com,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补。实用性一般,但是这个方法挺新颖的。

1.display:none; 的缺陷

  • 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略,来自 SEO Mistakes: Unwise comments
  • 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。

2.visibility:hidden; 的缺陷

这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间。

3.overflow:hidden; 一个比较合理的方法

.texthidden {
    display: block; /*统一转化为块级元素*/
    height: 0;
    overflow: hidden;
    width: 0;
}

就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

CSS 用省略号实现文字自动截断

CSS Code:

body {
    background-color: #EEE;
    font-size: 12px;
}
div.test {
    border-color: red;
    border-style: solid;
    border-width: 4px 1px 1px;
    height: 100px;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 200px;
}

HTML Code:

<div class="test">
    我来测试一下这个文字截断是不是真的有效果
</div>

手机网站导航制作

为了让 Web 页面在手机上显示流畅,现在国外很多网站都使用 Responsive 设计和 CSS3 Media Queries 的结合来实现。这样的实例到处可见,那么今天我想和大家一起学习的是有关于这种方法实现手机布局中的导航制作。

如果你的导航选项比较多,放到手机上来浏览就会挤到一起,造成美观性的不足。下面为了解决这样的问题,我们就一起跟随 Nick La 写的教程《Mobile Navigation Design & Tutorial》学习如何使用 jQuery 来解决刚才所说的问题。

问题的描述

下面的截图说明了导航布局在手机上的问题。如果你的导航只有三到四个选项,如 Web Designer Wall 网站,导航刚好一行能显示,但当你的导航选项包含更多时,其它的选项就会被挤压下去,比如说 Bitfoundry 网站。下面可以看看他们对比的截图:

mobile-nav-problem

解决方法

Nick La在教程中罗列了几种相关的解决方法:

1、下拉选择

这种方法是将所有的导航选项放到一个下拉选择控制(select)中,但这种方法并不是很好,因为 select 的样式要制作到让各浏览器下完全一致是非常的麻烦。除非你使用 jQuery 的插件,比如说 Chosen 插件能帮你实现 select 的样式美化,否则的话你只好采用 select 的默认样式风格。这也将导致用户的体验不一样,在桌面系统下是链接标签,而在手机上却是下拉选择框。如果你喜欢这种解决方式,你可以仔细阅读 CSS-Tricks 写的《Convert a Menu to a Dropdown for Small Screens》一文。也可以参考下面的网站

smashing-mag

ia

2、显示成块状

第二种方法是将所有导航通过(display:block),并将 float 去掉,将每个导航项设置成一个块项,这是一种快速的解决方法,不过同时也带来一个不足之处,给头部带来很大的空间,本来手机屏幕空间就小,这样一来,整个屏幕或许只能看到你的导航选项了。这样导致用户体验就差,需要滚动到底部才能看到页面的主内容。比如说下面的几个案例。

forefathers

love-luxe

london-partners

3、菜单图标

最后一种解决方法就是使用菜单图标按钮。这种效果是借助 jQuery 来实现的。在页面截入时,显示一个菜单的图标或按钮,而导航选项是隐藏的,当你点击这个图标时导航选项将显示出来,再次点击时导航选项将隐藏。这种方法将是最适合的一种方法,完全可以通过 css 来实现,如果你还需要兼容 ie 的话,那这种功能你就在考虑配合 jQuery 来完成,下面列出几个案例,供大家参考:

sony

boostrap

zync

prl

jQuery 制作手机网站导航

上面给大家展示了三种不同的方法实现手机导航效果,下面我们来看看如何使用 jQuery 实现上面介绍的第三种方法。

方法很简单,使用 jQuery 的 prepend 方法在导航中插入一个菜单按钮,然后给这个按钮绑定一个 click 事件,点击实现显示/隐藏效果,具体方法如下:

HTML Markup

<nav id="nav-wrap">
  <ul id="nav">
    <li><a href="#">Button</a></li>
    <li><a href="#">Button</a></li>
  </ul>
</nav>

上面结构是一个制作导航菜单的模板,极其的常见,在些不做过多描述。

jQuery Code

使用 jQuery 的 prepend 方法,将 <div id="menu-icon"> 插入到 <nav id="nav-wrap"> 前面,并在 div#menu-icon 上绑定一个 click 事件,实现导航的显示/隐藏功能

jQuery(document).ready(function($) {

    /* prepend menu icon */
    $("#nav-wrap").prepend('<div id="menu-icon">Menu</div>');

    /* toggle nav */
    $("#menu-icon").bind("click",
    function() {
        $("#nav").slideToggle("fast");
        $(this).toggleClass("active");
    });

});

此时导航的 HTML Markup 并变成下面这样:

<nav id="nav-wrap">
  <div id="menu-icon">Menu</div>
  <ul id="nav">
    <li><a href="#">Button</a></li>
    <li><a href="#">Button</a></li>
  </ul>
</nav>

CSS Code

结构有了,功能也有了,但还需要 CSS 来美化,那么有关于 CSS 详细的代码在此就不做过多的罗列,此处只给大家介绍几个关键部分。

首先在样式中将 div#menu-icon 隐藏起来(display:none),然后通过 CSS3 Media Queries 来重置 div#menu-icon 样式。换句话说当显屏宽度小于 600px 时,将 div#menu-icon 重设置为显示(display:block)。

@media screen and (max-width:600px) {
    #menu-icon {
        background: url(images/menu-icon.png) no-repeat;
        border: 1px solid #666;
        color: #000;
        cursor: pointer;
        display: block; /*显示div#menu-icon*/
        height: 30px;
        padding: 8px 10px 42px;
        width: 42px;
    }
    #nav {
        background: #f8f8f8;
        border: 1px solid #999;
        clear: both;
        display: none; /*默认隐藏,通过jQuery实现显示隐藏切换*/
        padding: 5px;
        position: absolute;
        top: 38px;
        width: 160px;
        z-index: 10000;
    }
}

通过 CSS3 Media Queries 在手机浏览器上,将 #nav 设置为隐藏,这样主要实现初截入时隐藏导航,然后通过上面写的 jQuery 来实现,点击 div#menu-icon 图标时,显示导航菜单项,在点击时就隐藏导航菜单项。如图所示:

nav-css-explain

DEMO 效果

demo-screenshot

上面 DEMO 是 Nick La 给大家写的一个效果,感兴趣的话可以看看,不过记得要使用 iPhone、Andrew 系列手机或缩小浏览器窗口查看,不然就看不到上图的效果。