<!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. android binder 进程间通信机制3-Binder 对象生死
			
    以下概述Binder通信过程中涉及到的四个对象:Binder本地对象.Binder实体对象.Binder引用对象.Binder代理对象的生死. 1.Binder通信的交互过程 1.Client 进程发 ...
    
			
    2. 
						
  2. ping测试丢包率
			
    测试环境:Centos 6.4 增加参数:-i 例如: #ping -i 0.01 172.16.3.1 则每隔0.01秒ping一次
    
			
    3. 
						
  3. postman---Postman配置环境变量和全局变量
			
    我们在测试的过程中,遇到最多的问题也可以是环境的问题了吧,今天开发用了这个测试环境,明天又换了另一个测试环境,这样对于我们测试非常的麻烦,特别最接口的时候需要来回的输入环境地址比较麻烦,今天我们看看强 ...
    
			
    4. 
						
  4. Druid-代码段-1-2
			
    所属文章:池化技术(一)Druid是如何管理数据库连接的? 本代码段对应流程1.1,责任链的执行: //DruidDataSource类里的方法:获取连接 public DruidPooledConn ...
    
			
    5. 
						
  5. Note | 用Hugo搭建博客并部署到GitHub Pages
			
    目录 1. 本地搭建 1.1 安装Hugo 1.2 创建站点 1.3 新建页面和文章 1.4 使用主题 1.5 修改配置文件 1.6 预览 2. 部署 之前担心过现有博客平台(如博客园,CSDN)突然 ...
    
			
    6. 
						
  6. 《细说PHP》 第四版 样章 第二章 PHP的应用与发展 5
			
    2.5  如何学习PHP PHP以其简单易学的特点,以及敏捷开发的优势,从一个几乎不被人知的开源项目,慢慢成长为技术人员首选的动态Web设计工具,与其他语言相比,PHP表现得更好.更快.更简单易学.尽 ...
    
			
    7. 
						
  7. 【文本处理命令】之sed命令详解
			
    sed行处理命令详解 一.简介 sed命令是一种在线编辑器.一个面向字符流的非交互式编辑器,也就是说sed不允许用户与它进行交互操作.sed是按行来处理文本内容的,它一次处理一行内容.处理时,把当前处 ...
    
			
    8. 
						
  8. Javascript模块化开发1——package.json详解
			
    一.环境安装 Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/. 在该页面你可以根据不同平台系统选择你需要的 Node.js 安装包. Node. ...
    
			
    9. 
						
  9. Linux 下编写一个 PHP 扩展
			
        假设需求 开发一个叫做 helloWord 的扩展. 扩展里有一个函数,helloWord(). echo helloWord('Tom'); //返回:Hello World: Tom 本地 ...
    
			
    10. 
						
  10. 依赖注入组件 Autofac 的小记
			
    1.  批量给 Service 层自动注入.(支持 ASP.NET Core) builder.RegisterAssemblyTypes(typeof(IProductService).Assemb ...
    
			
    11.