响应式Web设计：使用HTML5和CSS3实践 （2）
|
- UID
- 1066743
|
响应式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">
<!-- the header and navigation -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<!-- the sidebar -->
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<!-- the content -->
<div id="content">
<p>here is the content</p>
</div>
<!-- the footer -->
<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 |
|
|
|
|
|
