首页风格
门户
博客

实例创建一个基于HTML5和CSS3的网格布局设计(Grid based web desige)

作者:Chris Spooner
翻译:Terry li - GBin1.com
英文: Create a Grid Based Web Design in HTML5 & CSS3

这篇文章将一步一步详细介绍如何使用HTML5和CSS3创建一个眼镜品牌网站。我们将使用最新的html元素来搭建页面结构并且使用CSS3来配合最初的photoshop概念来实用最少的背景图片来设计。

设计概念

我们设计的这个网站用来演示一个虚拟的眼睛品牌OPTIK。如果你有兴趣看看如何在photoshop中设计概念的话,你可以参考另外一篇文章。主要的页面基于底层网格和特性用来引导用户浏览各种眼镜。 这里查看photoshop设计文章。

导出图片

上面我提过过我们将使用最少的背景图片,但是这里我们依旧需要使用phototshop中的一些图形,我们无法使用HTML和CSS创建。首先一个图片是背景。拷贝导出一个背景图案这样图片可以无缝的扩展。

我们将使用CSS3的特性来创造梯度效果,但是我们需要导出实际的图形。画一个紧凑的选择框来选择我们的主角并且保存为JPG,如下:

最初我们保存俩个版本的图形。拷贝到同一个文件中生成sprite图形并且导出为JPGs

这个设计基于列和基线网格。photoshop中导出一个网格图片。我们将加入临时的背景图片,这样我们将更加方便的创建网格布局。

HTML结构

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OPTIK</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

</body>
</html>

HTML由一个典型的doctype,页面标题和CSS链接,主体内容开始。最简单的HTML5相对于HTML4和XHTML来比较更加简单。

<div id="container">
  <header>
    <h1><a href="#"><img src="images/optik-logo.png" alt="Return to the homepage" /></a></h1>

    <nav>
      <ul>
        <li><a href="#">Sun</a></li>
        <li><a href="#">Sport</a></li>
        <li><a href="#">Tech</a></li>
        <li><a href="#">Special</a></li>
      </ul>
    </nav>
  </header>

典型的container div将被用于中心控制其它内容,我们在<header>中可以加入其它HTML5的标签和元素。<header>用来替代传统意义上的<div id="header">。<nav>是HTML5中的新元素,它可以用来定义我们的导航内容。我们看到以上导航中包括了主要的几个链接。

 <section id="feature">
    <a href="#"><img src="images/feature-image.jpg" alt="Man wearing Hydrotek sunglasses" /></a>
    <div id="feature-info">
      <a href="#"><h2>Hydrotek</h2></a>
      <p>HYDRO-TEK sports eyewear from OPTIK optimizes the flow of perspiration for an increased aerodynamic advantage over your competition.</p>
      <p class="btn"><a href="#">Find out more</a></p>
    </div>
  </section>

HTML中我们创建主要的内容结构使用<section>。<section>主要用于定义一个文档中清楚的区域。例如页面顶端的特性区域。图片中戴眼镜的伙计可以作为背景图片,但是我期望用户能够自然的点击,所以我们使用了一个<img>标签。

一个<h2>和<p>元素自然的填充了一些内容,使用class定义'btn'使得我们能够定义后面的按钮图片。所有的元素需要floating到下一个图片,因此一个简单的DIV帮助我们帮他们定义到一起。

<section id="content">
    <div class="bucket">
      <a href="#" id="sun">Sun range of OPTIK eyewear</a>

      <p>Enjoy the summer sun in style with OPTIK's range of casual eyewear. Choose from an array of fashionable frames and styles.</p>

      <p><a href="#">View the SUN range</a></p>
    </div>

    <div class="bucket">
      <a href="#" id="sport">Sport range of OPTIK eyewear</a>

      <p>Protect and enhance your vision with the SPORT range of eyewear from OPTIK to give yourself the edge over your competition.</p>

      <p><a href="#">View the SPORT range</a></p>
    </div>

    <div class="bucket">
      <a href="#" id="tech">Technicaly information about OPTIK eyewear</a>

      <p>Find out more about the science behind the materials, geometry and coatings that make OPTIK lenses so technologically advanced.</p>

      <p><a href="#">View the TECH info</a></p>
    </div>

    <div class="bucket">
      <a href="#" id="special">Special range of OPTIK eyewear</a>

      <p>OPTIK also design eyewear for specific industries where eye protection is crucial. Make sure your team has the best optical safety.</p>

      <p><a href="#">View the SPECIAL range</a></p>
    </div>
  </section>

另外一个<section>的标签用来概要性定义整体的内容,后面跟着4个独立的用class 'bucket'定义的div,用来布局4个盒子定义的设计。每一个盒子定义将会有图片定义允许sprite设计的效果方便的展现。

</div>

<footer>
  <p id="copyright">&copy; Copyright OPTIK 2011</p>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Retailers</a></li>
    <li><a href="#">Corporate</a></li>
    <li><a href="#">Warranty</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <p id="back-top"><a href="#">Back to top</a></p>

</footer>

</body>
</html>

页脚定义了主要版本内容,<footer>是HTML5的新元素,用来取代传统的<div id="footer">。<ul>标签并没有定义在<nav>标签中,因为HTML5标准有相关的指导。

完整的HTML代码

CSS样式设计

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
  margin: 0; padding: 0; border: 0;
}

body {
  font: 14px Helvetica, Sans-Serif; line-height: 24px; color: #a6a6a6;
  background: #000 url(images/bg-pattern.png);
}

#container {
  width: 960px; margin: 0 auto 24px auto; background: #000; /*background: url(images/grid.png) center top no-repeat;*/
  box-shadow: 0px 5px 45px #343434;
  -moz-box-shadow: 0px 5px 45px #343434;
  -webkit-box-shadow: 0px 5px 45px #343434;
}

a {
  color: #abe2ff; text-decoration: none;
}
  a:hover {
    color: #5db5e3;
  }

首先我们使用简单的reset和定义来整体的样式设计。容器div中心使用css3 box-shadow来定义。

header h1 {
  margin: 54px 0 0 21px; float: left;
}

header nav {
  float: left;
  margin: 79px 0 17px 0;
}
  header nav ul li {
    float: left; list-style: none;
    width: 58px; margin: 0 0 0 98px;
  }
    header nav ul li a {
      text-transform: uppercase;
    }

下面header中的内容将使用margin来移动到正确位置。这里有一个很好的插件firebug用来根据像素来编辑图形。

#feature {
  clear: both; height: 431px; overflow: hidden; margin: 0 0 48px 0;
  background: #000;
  background: -moz-linear-gradient(top, #000 0%, #191919 5%, #000 5%, #000 94%, #191919 94%, #000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(5%,#191919), color-stop(5%,#000), color-stop(94%,#000), color-stop(94%,#191919), color-stop(100%,#000));
  background: -webkit-linear-gradient(top, #000 0%,#191919 5%,#000 5%,#000 94%,#191919 94%,#000 100%);
  /*opacity: 0.5;*/
}
  #feature h2 {
    width: 216px; height: 30px; margin: 0 0 31px 0;
    background: url(images/hydrotek.png); text-indent: -9999px;
  }
  #feature img {
    float: right; margin: 22px 0 0 0;
  }
  #feature-info {
    float: left; width: 370px; margin: 89px 0 0 100px;
  }
    #feature-info p {
      margin: 0 0 34px 0; font-size: 16px;
    }
    #feature-info p.btn a {
      display: block; width: 170px; height: 35px;
      background: #497389;
      background: -moz-linear-gradient(top, #497389 0%, #151e36 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#497389), color-stop(100%,#151e36), color-stop(100%,#000));
      background: -webkit-linear-gradient(top, #497389 0%,#151e36 100%);
      border: 1px solid #313e52;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      text-transform: uppercase; text-align: center; padding: 12px 0 0 0;
    }

The complete CSS

IE补丁

IE不支持新的HTML5和CSS3。所以我们需要降级。所以没有圆角和梯度效果。

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('nav');
</script>
<![endif]-->

最后版本的网站设计

我们最后版本的网站符合photoshop的设计,并且支持CSS3特性,在HTML5中非常酷。点击下面查看演示,请在最新的firefox,safari或者chrome中查看效果。

在线演示 在线调试

原文出处: 实例创建一个基于HTML5和CSS3的网格布局设计(Grid based web desige)

喜欢我们的文章请您与朋友分享:

?ü?à

评论

友情提示: 本站博客不再支持访客留言,如果有问题或者留言,请发布到  GBtags.com

  1. 目前没有任何留言
今日推荐