本课程主要介绍如何使用HTML和CSS开发一个响应式的官网静态页面。
我们需要创建一个HTML文件，并且使用HTML标签进行结构化，以便后面进行样式渲染。
<html>
<head>
<title>官网静态页面</title>
</head>
<body>
<header>
<h1>官网静态页面</h1>
</header>
<main>
<section>
<h2>页面主要内容</h2>
<p>这里是页面主要内容</p>
</section>
<section>
<h2>页面次要内容</h2>
<p>这里是页面次要内容</p>
</section>
</main>
<footer>
<p>页脚内容</p>
</footer>
</body>
</html>
上面的HTML结构是一个最简单的官网静态页面结构，我们可以根据实际的需求进行扩展。
第二步，我们需要引入CSS样式，以便让页面具有更好的展示效果。
<html>
<head>
<title>官网静态页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>官网静态页面</h1>
</header>
<main>
<section>
<h2>页面主要内容</h2>
<p>这里是页面主要内容</p>
</section>
<section>
<h2>页面次要内容</h2>
<p>这里是页面次要内容</p>
</section>
</main>
<footer>
<p>页脚内容</p>
</footer>
</body>
</html>
我们可以在style.css文件中定义各个元素的样式，比如：
body {
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
color: #444;
background-color: #f8f8f8;
}
header {
background-color: #f0f0f0;
padding: 20px;
}
main {
padding: 20px;
}
section {
margin-bottom: 20px;
}
h1, h2 {
font-weight: bold;
margin-bottom: 10px;
}
p {
margin: 0;
}
我们需要添加响应式布局，以便网站在不同的设备上都能正常显示。
@media (min-width: 768px) {
body {
width: 750px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
body {
width: 970px;
margin: 0 auto;
}
}
@media (min-width: 1200px) {
body {
width: 1170px;
margin: 0 auto;
}
}
上面的代码定义了三种不同的屏幕宽度，当屏幕宽度小于768px时，页面将使用流式布局；当屏幕宽度大于等于768px时，页面将使用750px的宽度；当屏幕宽度大于等于992px时，页面将使用970px的宽度；当屏幕宽度大于等于1200px时，页面将使用1170px的宽度。
通过以上三步，我们就可以开发出一个响应式的官网静态页面。
本文链接：http://task.lmcjl.com/news/6761.html