你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端程序媛。
因为之前的学习内容，今天，我们可以来综合运用一下标签和 CSS 样式，做一个简易的淘宝网页大体布局了，如图。
咱们今天要做成这样子！
里面的 css 属性不完全理解没关系，主要是让先行动起来，那就开始吧。
简单网页代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>简单网页布局</title>
<style>
/* 设置整个页面的基本样式 */
body {
margin:0;padding:0;
font-family: Arial, sans-serif;
}
/* 设置页面头部的样式 */
.header {
background-color: #f57200; /* 设置背景颜色为深灰色 */
color: #fff; /* 设置文字颜色为白色 */
padding: 20px; /* 设置内边距为20像素 */
text-align: center; /* 设置文字居中显示 */
}
/* 设置导航栏的样式 */
.nav {
background-color: #f7f9fa; /* 设置背景颜色为浅灰色 */
width: 20%; /* 设置宽度为父容器的20% */
float: left; /* 设置左浮动，使其在左侧排列 */
padding: 0px 10px; /* 设置上下的内边距是0像素，左右内边距为20像素 */
}
/* 设置主内容区域的样式 */
.main {
width: 500px; /* 设置宽度为固定的500像素 */
padding-left: 20px; /* 设置左内边距为20像素 */
float: left; /* 设置左浮动，使其在左侧排列 */
}
.right {
width: 150px; /* 设置宽度为固定的500像素 */
background-color: #f7f9fa; /* 设置背景颜色为浅灰色 */
float: left; /* 设置左浮动，使其在左侧排列 */
padding: 50px; /* 设置上下的内边距是0像素，左右内边距为20像素 */
font-size: 20px;
}
/* 设置页脚的样式 */
.footer {
background-color: #f57200; /* 设置背景颜色为深灰色 */
color: #fff; /* 设置文字颜色为白色 */
text-align: center; /* 设置文字水平居中显示 */
line-height: 50px; /* 设置行高是50px，使文字垂直居中 */
clear: both; /* 清除浮动，防止父元素高度塌陷 */
font-size: 16px; /*字体大小*/
}
.banner {
width: 500px;
}
/* 清除浮动 */
.clearfix::after {
content: ''; /* 添加一个空内容 */
display: table; /* 设置为块级元素 */
clear: both; /* 清除浮动 */
}
</style>
</head>
<body>
<div class="header">
<h1>这是网页的大标题</h1>
</div>
<div class="container clearfix">
<div class="nav">
<h2>分类</h2>
<div>
<p>女装/内衣/ 奢品</p>
<p>女鞋/男鞋/ 箱包</p>
<p>美妆/饰品/ 洗护</p>
<p>女装/内衣/ 奢品</p>
<p>女鞋/男鞋/ 箱包</p>
<p>美妆/饰品/ 洗护</p>
<p>女装/内衣/ 奢品</p>
<p>女鞋/男鞋/ 箱包</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
<p>美妆/饰品/ 洗护</p>
</div>
</div>
<div class="main">
<p>这是轮播海报区。</p>
<img class="banner" src="images/banner01.jpg" alt="" />
</div>
<div class="right">
<p>这是右侧登录区</p>
<p>这是右侧登录区</p>
<p>这是右侧登录区</p>
<p>这是右侧登录区</p>
<p>这是右侧登录区</p>
</div>
</div>
<div class="footer">© 2024 简单网页布局</div>
</body>
</html>
效果如图：
部分 css 属性的答疑
1、为什么 body 上有 margin:0、padding:0?是什么意思？
margin 和 padding 都是 CSS 盒模型中用于控制元素周围空白区域的属性。
在 CSS 中为 body 元素设置 margin: 0; padding: 0; 如果不设置为 0，页面两边默认就会有空白，这个空白是多少呢？我们选中 body 元素，在下图里面可看到 margin 外边距有 8px。
那 padding 没有数值，为什么也要设置为 0 呢？这是因为不同浏览器的边距是不一致的，为了确保页面在不同浏览器中的显示效果一致，并且更好地控制页面布局，必须要也要这样做了。
2、float 是什么?
float 是 CSS 中的一个布局属性，用于控制元素的浮动效果。
就先简单理解是，让元素排列在一行上。因为元素从下面上来了，所以是飘上来了，在父级需要做一下清除一下浮动，让元素占有空间。
以上，暂时不理解也没关系，只是后续我们可能也要用到这个属性，先做了解即可，后续在 CSS 会再细说。
其实呢，后续学习完 CSS 部分，是完全可以练习布局任何类似于淘宝，网易这种静态门户网页的哈（非特效类/游戏引擎类的都可以），期待后续一起学习吧。
ok , 本节完。
1357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
