电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 响应式Web设计：使用HTML5和CSS3实践（2） [打印本页]

作者: look_w 时间: 2019-2-18 19:04 标题: 响应式Web设计：使用HTML5和CSS3实践（2）

我们的第一个响应式设计

不管如何开始动手做一个响应式设计的页面吧。这个网站的主题是关于电影，该书作者的初衷是这样的“我打算自己弄一个And the winner isn't的网站，褒奖哪些本应该获奖的电影，批评那些不应该获奖的电影。这里还能视频剪辑、经典语录、电影海报，以及证明我没错的在线调查”。
1. 从固定宽度设计开始

虽然理论上是从移动（小屏幕）的体验出发开始设计，但现实中更多的还是将桌面版网页设计改成响应式的。既然目前和将来相当一段时间内我们都是这么做，我们还是从固定宽度开始。如下是一个固宽度的界面原型，包含了头部、导航、边栏、内容区和页脚。
134602-dede1285bb0b746a.png
1_outlook

在此我们先测验一下HTML4标签来测验我们的媒体查询技巧。如下为HTML4便携的没有实际内容的基本页面结构。

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
      <div id="wrapper">
         
         <div id="header">
            <div id="navigation">
                  <ul>
                     <li><a href="#">navigation1</a></li>
                     <li><a href="#">navigation2</a></li>
                  </ul>
            </div>
            </div>
            
            <div id="sidebar">
                  <p>here is the sidebar</p>
            </div>
            
            <div id="content">
                  <p>here is the content</p>
            </div>
            
            <div id="footer">
                  <p>Here is the footer</p>
            </div>
      </div>
</body>
</html>

然后我们为各个模块加入了一些基本的样式。

css/main.css

#wrapper {
   margin-right: auto;
   margin-left: auto;
   width: 960px;
}
#header {
   margin-right: 10px;
   margin-left: 10px;
   width: 940px;
   background-color: #779307;
}
#navigation ul li {
   display: inline-block;
}
#sidebar {
   margin-right: 10px;
   margin-left: 10px;
   float: left;
   background-color: #fe9c00;
   width: 220px;
}
#content {
   margin-right: 10px;
   float: right;
   margin-left: 10px;
   width: 700px;
   background-color: #dedede;
}
#footer {
   margin-right: 10px;
   margin-left: 10px;
   clear: both;
   background-color: #663300;
   width: 940px;
}

在一个视口大于960的浏览器中，页面的浏览效果如下。
134602-dae0787bdb5cb9af.png
2_rawOutlook

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)