<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>布局</title>

    </head>

    <body>

        <header style="width: 800px;height: 120px;border: 1px red solid;">

            <header style="width: 800px;height: 20px;background-color: blue;">2019.3.22</header>

            <div style="width: 800px;height: 80px;background-color: red;">logotupian</div>

            <div style="width: 800px;height: 20px;background-color: pink;">导航部分</div>

        </header>

        <div style="width: 800px;height: 500px;border: 1px red solid;">

            <div style="width: 600px;height: 500px;background-color: green;float: left;" >

                <article>

                        正文导航

                        <p>新闻正文</p>

                </article>

            </div>

            <aside style="width: 200px;height: 500px;background-color: yellow; float: right;">侧边栏</aside>

        </div>

        <footer style="width: 800px;height: 30px;border: 1px red solid;>

            <div style="width: 800px;height: 50px;background-color: white;">

                版权信息

            </div>

        </footer>

    </body>

</html>






结果：






进阶：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hpu</title>

    <style>

        *{padding: 0px;margin: 0px;}

        header{width:100%;height: 100px;    background:#f90;margin-bottom:5px;

            padding-top: 30px;position: absolute;}

        nav{position: absolute;left: 150px;top: 85px;}

        section{width: 100%;height: 700px;}

        /*article{width:70%;height: 700px;    background:#abc;float:left;}*/

        #a1{width: 34%;height: 700px;background: #453;float:left;margin-right:5px;}

        #a2{width: 35%;height: 700px;background: purple;float:left;}

        aside{width:29.5%;height: 700px;    background:#a10;float:right;}

        footer{width:100%;height: 100px;    background:cyan;clear:both;margin-top:5px;}

        ul{list-style: none;}

        ul li{float: left;}

        ul li a{

            text-decoration: none;

            background: #0f9;

            height: 40px;

            line-height: 40px;

            display: block;

            margin-right: 1px;

            padding:0px 10px;

        }

        ul li a:hover{background: purple;}

        ul li ul li{clear:left; }

        ul li ul{display: none;}

        ul li:hover ul{display: block;}

    </style>

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="http://baidu.com">学院简介</a></li>

                <li><a href="#">管理机构</a></li>

                <li>

                    <a href="#">学院设置</a>

                    <ul>

                        <li><a href="">能源学院</a></li>

                        <li><a href="">电气学院</a></li>

                        <li><a href="">安全学院</a></li>

                        <li><a href="">材料学院</a></li>

                        <li><a href="">资环学院</a></li>

                    </ul>

                </li>

                <li><a href="#">招生就业</a></li>

                <li><a href="#">科学研究</a></li>

            </ul>

        </nav>

    </header>

    <section>

        <article id="a1"></article>

        <article id="a2"></article>

        <aside></aside>

    </section>

    <footer></footer>

</body>

</html>




结果：


												


											
Html学习之四（页面布局）的更多相关文章
	

    
						
  1. 九 Vue学习 manager页面布局
		
    1:  登录后系统页面如下: 对应代码: <template> <div class="manage_page fillcontain"> <el-r ...
    
		
    2. 
						
  2. 【Flutter学习】页面布局之其它布局处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    3. 
						
  3. 【Flutter学习】页面布局之列表和表格处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    4. 
						
  4. 【Flutter学习】页面布局之宽高尺寸处理
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    5. 
						
  5. 【Flutter学习】页面布局之基础布局组件
		
    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...
    
		
    6. 
						
  6. xamarin学习之页面布局
		
    在android应中,需要注意3个文件,他们分别是:Main.axml,String.xml和Activity.cs. 1.布局文件Main.axml ,该文件保存在Resouses/layout的目 ...
    
		
    7. 
						
  7. [Android学习笔记]页面布局
		
    线性布局:LinearLayout 1.集成ViewGroup,故可容纳多个View 2.线性布局,可设置水平或者垂直方向 相对布局:RelativeLayout
    
		
    8. 
						
  8. （数据科学学习手札103）Python+Dash快速web应用开发——页面布局篇
		
    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
    
		
    9. 
						
  9. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化
		
    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
    
		
    10. 
						
  10. CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）
		
    CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. [Linux] 低版本centos升级git解决fatal: HTTP request failed
			
    编译用的一些依赖yum install curl-devel expat-devel gettext-devel openssl-devel zlib-develyum install gcc per ...
    
			
    2. 
						
  2. optix之纹理使用
			
    1.在OpenGL中生成纹理texture optix中的纹理直接使用OpenGL纹理的id,不能跨越OpenGL纹理,所以我们先在OpenGL环境下生成一张纹理. 这个过程就很熟悉了: void W ...
    
			
    3. 
						
  3. Vue中的导航守卫（路由守卫）
			
    当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-g ...
    
			
    4. 
						
  4. 【Excel】对比两列值
			
    
			
    5. 
						
  5. 配置文件和sqlplus简单使用
			
    oracle简单配置文件 数据文件目录 D:\app\inmeditation\oradata\orcl 以.CTL结尾得的文件是数据库的控制文件 以.LOG结尾的是数据库日志文件 以.DBF结尾的是 ...
    
			
    6. 
						
  6. VSCode 开发插件 推荐
			
    VSCode 必装的 10 个高效开发插件  本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视 ...
    
			
    7. 
						
  7. [转]在.NET Core 2.x中将多个强类型设置实例与命名选项一起使用
			
    自1.0版之前,ASP.NET Core已使用“ 选项”模式配置强类型设置对象.从那时起,该功能获得了更多功能.例如,引入了ASP.NET Core 1.1 IOptionsSnapshot,它允许您 ...
    
			
    8. 
						
  8. antV G2 为柱状图添加背景颜色
			
    工作中需要在基础柱状图的基础上添加一个自定义高度的背景颜色, 基础柱状图: 目标柱状图: 由于chart绘图可以重叠,通过该特性,我们可以在画两次图重叠在一起,第一次绘图描述背景,第二次绘图描述数据, ...
    
			
    9. 
						
  9. 模型可视化工具netron
			
    https://github.com/lutzroeder/Netron 支持各种格式的模型 caffe模型实测效果: 右侧可以看到卷积核的具体的值．
    
			
    10. 
						
  10. c# Winform 继承窗体 无法拖动修改控件大小
			
    问题描述: 一个窗体集成父窗体,发现无法直接拖动修改的控件,比如修改大小等 特征: 不禁使父窗体控件,就算新加一个控件也会这样:鼠标放到控件移动手方块上会出现一个“继承的控件”的tooptip, 异常 ...
    
			
    11.