HTML&CSS案例—咖啡店（定位+布局+CSS3）
<h2 style="color: black; text-align: left; margin-bottom: 10px;">该案例是从<span style="color: black;">最后</span>效果到实现的过程</h2>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">一，分析页面布局</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">首要</span>页面的最左侧是一个<span style="color: black;">宣传</span>，采用固定定位；<span style="color: black;">而后</span>最上面header是一个头部，<span style="color: black;">重点</span>是一张<span style="color: black;">照片</span>；下面的nav是一个导航栏，<span style="color: black;">包括</span>五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张<span style="color: black;">照片</span>，当鼠标放到<span style="color: black;">照片</span>上会有一个放大的效果，右侧有4个div是四种咖啡的<span style="color: black;">仔细</span>介绍；最下面有一个脚本。</p> 四个部分：header， nav， main， footer， 再加一个<span style="color: black;">宣传</span>部分，五个部分<h2 style="color: black; text-align: left; margin-bottom: 10px;">二，做整体布局</h2>
<h3 style="color: black; text-align: left; margin-bottom: 10px;">1. 创建一个站点文件夹，再加上子文件夹</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-1e49cd87ffd4422614983d62c0df4f24_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>在<span style="color: black;">这儿</span><span style="color: black;">插进</span><span style="color: black;">照片</span>描述<h3 style="color: black; text-align: left; margin-bottom: 10px;">2. 先初步输入代码，4部分4< div >,<span style="color: black;">宣传</span>后面加</h3>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">再初步定义一下css样式</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">/*默认样式的清零*/
*{
margin: 0px;
padding: 0;
}
body {
font-size:16px;
color: #673929;
}
#container {
margin:0 auto; /*水平居中*/
width:900px;
}
#header {
height:220px;/*<span style="color: black;">必要</span>添加，否则header下面有10px而不是5px空白*/
margin-bottom:5px;
/*position:relative; 父层定位*/
}
#nav{
height:30px;
margin:5px;
bac<span style="color: black;">公斤</span>round-color:#09c;
font: 18px/30px 微软雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
#main{
bac<span style="color: black;">公斤</span>round:red;
height: 2050px;/**/
}
#aside {
float:left;
width:300px;
height: 500px;
bac<span style="color: black;">公斤</span>round-color:#6cf;
text-align: center;
font-size: 14px;
}
#content{
float:right;
width:595px;
height: 2050px;
margin-bottom:5px;
bac<span style="color: black;">公斤</span>r</div>
你说得对，我们一起加油，未来可期。 你的见解独到，让我受益匪浅，非常感谢。
页:
[1]