该案例是从最后效果到实现的过程
一，分析页面布局
首要页面的最左侧是一个宣传，采用固定定位；而后最上面header是一个头部，重点是一张照片；下面的nav是一个导航栏，包括五个链接；下面是主体部分，左侧的上面是一个表格，下面是四张照片，当鼠标放到照片上会有一个放大的效果，右侧有4个div是四种咖啡的仔细介绍；最下面有一个脚本。 四个部分：header， nav， main， footer， 再加一个宣传部分，五个部分二，做整体布局
1. 创建一个站点文件夹，再加上子文件夹
在这儿插进照片描述2. 先初步输入代码，4部分4< div >,宣传后面加
<!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>
再初步定义一下css样式
/*默认样式的清零*/
*{
margin: 0px;
padding: 0;
}
body {
font-size:16px;
color: #673929;
}
#container {
margin:0 auto; /*水平居中*/
width:900px;
}
#header {
height:220px;/*必要添加，否则header下面有10px而不是5px空白*/
margin-bottom:5px;
/*position:relative; 父层定位*/
}
#nav{
height:30px;
margin:5px;
bac公斤round-color:#09c;
font: 18px/30px 微软雅黑;
color: #fff;
letter-spacing: 2px;
text-align: center;
}
#main{
bac公斤round:red;
height: 2050px;/**/
}
#aside {
float:left;
width:300px;
height: 500px;
bac公斤round-color:#6cf;
text-align: center;
font-size: 14px;
}
#content{
float:right;
width:595px;
height: 2050px;
margin-bottom:5px;
bac公斤r
| 
发表于 2024-6-30 08:32:16
楼主