ZhangYang's Blog

【实战】一个响应式页面

发表于 | 分类于

兼容手机、电脑、ipad、宽屏电脑四种设备的简单响应式页面

设计图

image

HTML部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// index.html
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一个响应式页面</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section class="logo">
    <div class="img"></div>
      <ul class="slogan">
	    <li>诚实</li>
	    <li>守信</li>
	    <li>求是</li>
	    <li>创新</li>
	  </ul>
  </section>
  <section class="banner">
	<h2>我是一个</h2><h2>响应式页面</h2>
	<div class="details">
	  <p>描述111111111111111</p>
	  <p>描述111111111111111</p>
	</div>
  </section>
  <section class="products">
	<ol>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	  <li>
	    <div class="product">
	      <div class="img"></div>
	      <h3>标题</h3>
	      <p>描述2222222222</p>
	    </div>
	  </li>
	</ol>
  </section>
</body>
</html>

CSS部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// style.css
body{
	margin: 0;
}
ul,ol{
	list-style:none;
	padding: 0;
}
/*logo 模块*/
.logo{
	text-align: center;
}
.logo > .img{
	display: inline-block;
	width: 72px;
	height: 72px;
	background: #D8D8D8;
	border-radius: 36px;
	margin-top: 60px;
}
.logo > .slogan{
	margin-top: 28px;
}
.logo > .slogan > li{
	background: #D8D8D8;
	display: inline-block;
	min-width: 128px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 24px;
	padding: 1px 0;
}
/*banner 模块*/
.banner{
	background: #EFEFEF;
	text-align: center;
	padding-top: 46px;
}
.banner > h2{
	background: #D8D8D8;
	display: inline-block;
	border-radius: 14px;
	min-width: 200px;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 34px;
	padding: 3px 0;
}
.banner .details p{
	background: #E8E7E7;
	max-width: 250px;
	margin-left: auto;
	margin-right: auto;
	line-height: 24px;
	border-radius: 14px;
	margin-top: 20px;
}
/*products 模块*/
.products{
	margin: 0 16px;
}
.products > ol{}
.products > ol > li{}
.products .product{}
.products .product > .img{
	background: #D8D8D8;
	border-radius: 4px;
	min-width: 288px;
	height: 180px;
}
.products .product > h3{
	max-width: 204px;
	background: #BCBCBC;
	border-radius: 4px;
	line-height: 24px;
	margin-top: 20px;
	margin-bottom: 14px;
}
.products .product >p{
	background: #ECECEC;
	border-radius: 4px;
	line-height: 16px;
	font-size: 14px;
	margin-top: 14px;
}