[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样式文件。

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


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

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

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


多行多列复杂模式

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


导航菜单设计

   导航菜单是网站重要的组成部分。设计一个优秀的页面导航菜单会给网站增色不少。作为一名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。
    • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3
<!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,在页面水平居中对齐;
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3
<!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,在页面水平居中对齐;
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3
<!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;
  • [HTML]Web前端开发技术11(HTML5、CSS3、JavaScript )页面布局设计 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列复杂模式水平导航菜单——喵喵画网页,喵喵画网页,html,前端,html5,计算机学习,javascript,网页制作,css3
<!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;

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

<!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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包