1. AI技术聚合首页
  2. IT

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

社会演员多 • • IT • 阅读 44

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

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

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

目录

前言

页面布局设计

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

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

多行多列复杂模式

导航菜单设计

一级水平导航菜单

二级水平导航菜单

课后练习

网页标题：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规则，实现在不同浏览器上显示相同的页面效果。

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

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

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

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

版权声明：本文为博主作者：猫佛佛原创文章，版权归属原作者，如果侵权，请联系我们删除！

原文链接：https://blog.csdn.net/ormstq/article/details/135515151

共计人评分，平均分

到目前为止还没有投票！成为第一位评论此文章。

赞 (0)
社会演员多的头像社会演员多普通用户
0
上一篇 2024年1月16日
下一篇 2024年1月16日

相关推荐