[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式多行多列复杂模式水平导航菜单—

这篇具有很好参考价值的文章主要介绍了[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式多行多列复杂模式水平导航菜单——喵喵画网页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

前言

页面布局设计

“三行模式”或“三列模式”

“三行二列”、“三行三列”模式

多行多列复杂模式

导航菜单设计

一级水平导航菜单

二级水平导航菜单

课后练习

网页标题：1行1列

网页标题：3行1列

网页标题：1行2列

网页标题：3行2列

网页标题：4行3列

总结

前言

熟练地使用DIV标记的CSS各类属性。

掌握CSS定义与引用方法，学会使用外部样式表定义页面样式。

熟悉各类常见的页面布局类型，能够写出相应的DIV结构及CSS规则。

学会使用DIV+CSS进行页面布局，能够编写HTML代码和CSS文件。

页面布局设计

现在所有的主流的、大型的IT企业的网站布局几乎都采用DIV、CSS技术，有些甚至采用DIV、CSS、表格混合进行页面布局。此类页面布局能够实现页面内容与表现的分离，提高网站访问速度、节省宽带、改善了用户的体验。

CSS布局的步骤大致为：首先整体上对页面进行分块，接着按照分块设计使用div标记，并理清div标记的嵌套和层叠关系，然后对各div标记进行CSS定位，最后在各个分块中添加相应的内容。

“三行模式”或“三列模式”

此模式特点是把整个页面水平、垂直分成三个区域，其中“三行模式”将页面头部、主体及页脚三部分；“三列模式”将页面分成左、中、右三个部分。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。

“三行二列”、“三行三列”模式

此模式特点是先将整个页面水平分成三个区域，再将中间区域分成两列或三列。分别进行DIV分区设计，写出DIV结构代码和CSS样式文件。

多行多列复杂模式

导航菜单设计

导航菜单是网站重要的组成部分。设计一个优秀的页面导航菜单会给网站增色不少。作为一名Web前端开发工程师必须掌握传统的网站导航菜单设计技巧，同时也需要学习响应式导航菜单的设计方法。

网站菜单表现形式丰富多样。从菜单层次上看，可以分为一级、二级和多级菜单。从排列方式上看，可分为水平导航、垂直导航菜单。从技术实现角度上看，导航菜单通常采用无序列表、表格、超链接和样式表相结合的方法来实现，也可以使用如CSS3 Menu、jQuery等第三方插件等技术来实现。

一级水平导航菜单

二级水平导航菜单

这些猫猫会放在课后练习配对，喵~

课后练习

网页标题：1行1列

网页的主体部分代码为：

<body>

<div id="container"></div>

</body>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style1.css
@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
#container{
	width:1000px;
	height:500px;
	margin:0 auto;
	background-color:#6cf;
}
并设置如下样式：

清除浏览器的默认值

container设置样式为：宽1000px，高500px，在页面水平居中对齐，背景颜色#6cf。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1行1列</title>
<link rel="stylesheet" href="CSS/style1.css">
</head>

<body>
	<div id="container"></div>
</body>

</html>

网页标题：3行1列

网页的主体部分代码为：

<div id="container">

         <div id="header"></div>

    <div id="main"></div>

    <div id="footer"></div>

</div>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style2.css
@charset "utf-8";
/* CSS Document */

*{
	margin:0;
	padding:0;
}
body{
	font-size:14px;
	font-family:"微软雅黑";
}
#container{
	width:900px;
	margin:0 auto;
}
#header{
	height:100px;
	background-color:#6cf;
	margin-bottom:5px;
}
#main{
	height:500px;
	background-color:#cff;
	margin-bottom:5px;
}
#footer{
	height:60px;
	background-color:#6cf;
}
并设置如下样式：
清除浏览器的默认值

网页字体：“微软雅黑”，14px

container设置样式为：宽900px，在页面水平居中对齐；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3行1列</title>
<link rel="stylesheet" href="CSS/style2.css">
</head>

<body>
<div id="container">
	<div id="header"></div>
    <div id="main"></div>
    <div id="footer"></div>
</div>

</body>
</html>

网页标题：1行2列

网页的主体部分代码为：

<div id="container">

<div id="aside"></div>

<div id="content"></div>

</div>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style3.css
@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
body{
	font-size:14px;
	font-family:"微软雅黑";
}
#container{
	width:900px;
	margin:0 auto;
}
#aside{
	width:200px;
	height:500px;
	background-color:#6cf;
	float:left;
}
#content{
	width:695px;
	height:500px;
	background-color:#cff;
	float:right;
}
并设置如下样式：
清除浏览器的默认值

网页字体：“微软雅黑”，14px

container设置样式为：宽900px，在页面水平居中对齐；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1行2列</title>
<link rel="stylesheet" href="CSS/style3.css">
</head>

<body>
<div id="container">
	<div id="aside"></div>
    <div id="content"></div>
</div>
</body>
</html>

网页标题：3行2列

网页的主体部分代码为：

<div id="container">

         <div id="header"></div>

    <div id="main">

             <div id="aside"></div>

             <div id="content"></div>

     </div>

     <div id="footer"></div>

</div>
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style4.css
@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
body{
	font-size:14px;
	font-family:"微软雅黑";
}
#container{
	width:900px;
	margin:0 auto;
}
#header{
	height:100px;
	background-color:#6cf;
	margin-bottom:5px;
}
#main{
	height:500px;
	margin-bottom:5px;
}
#aside{
	width:200px;
	height:500px;
	background-color:#6cf;
	float:left;
}
#content{
	width:695px;
	height:500px;
	background-color:#cff;
	float:right;
}
#footer{
	height:60px;
	background-color:#6cf;
}
并设置如下样式：
清除浏览器的默认值

网页字体：“微软雅黑”，14px

container设置样式为：宽900px，在页面水平居中对齐；

main设置样式为：高500px，下外边距5px；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3行2列</title>
<link rel="stylesheet" href="CSS/style4.css">
</head>

<body>
<div id="container">
	<div id="header"></div>
    <div id="main">
    	<div id="aside"></div>
    	<div id="content"></div>
     </div>
     <div id="footer"></div>
</div>
</body>
</html>

网页标题：4行3列

网页的主体部分代码自行完善
使用外部样式表为其设置样式，在CSS文件夹下新建样式表文件style5.css
@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;
}
body{
	font-size:14px;
	font-family:"微软雅黑";
}
#container{
	width:900px;
	margin:0 auto;
}
#header{
	height:100px;
	background-color:#6cf;
	margin-bottom:5px;
}
#nav{
	height:30px;
	background-color:#09c;
	margin-bottom:5px;
}
#main{
	height:500px;
	margin-bottom:5px;
}
#aside{
	width:100px;
	height:500px;
	background-color:#6cf;
	margin-left:5px;
	float:left;
}
#aside1{
	width:100px;
	height:500px;
	background-color:#6cf;
	float:left;
}
#content{
	width:690px;
	height:500px;
	background-color:#cff;
	margin-left:5px;
	float:left;
}
#footer{
	height:60px;
	background-color:#6cf;
}
并设置如下样式：
清除浏览器的默认值

网页字体：“微软雅黑”，14px

container设置样式为：宽900px，在页面水平居中对齐；

main设置样式为：高500px，下外边距5px；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4行3列</title>
<link rel="stylesheet" href="CSS/style5.css">
</head>

<body>
<div id="container">
	<div id="header"></div>
    <div id="nav"></div>
    <div id="main">
    	<div id="aside1"></div>
        <div id="content"></div>
        <div id="aside"></div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

总结

本章主要分析了常见的网站页面布局模式，给出每类模式的DIV结构设计和CSS文件编写方法。

通过图层div合理地嵌套帮助初学者建立页面布局的概念，掌握常用页面布局结构编程方法。学会运用CSS样式文件来定义特定对象的样式，使所设计的网站页面能够尽量美观、漂亮，增加用户的体验。

在进行样式定义时候，最好能够学会使用浏览器兼容性测试工具来检查自己所编写的CSS规则，实现在不同浏览器上显示相同的页面效果。

佬佬一定要自己去敲一敲，真的超赞的！

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3 文章来源地址https://www.toymoban.com/news/detail-787720.html

到了这里，关于[HTML]Web前端开发技术11（HTML5、CSS3、JavaScript ）页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式多行多列复杂模式水平导航菜单——喵喵画网页的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！