div布局如下

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>HTML基础：利用div进行布局</title>

 <style type="text/css">

  *{margin:0;padding:0}

 </style>

 </head>

 <body>

  <div class="container" style="width:500px;margin:0 auto">

     <!--头部-->

     <div class="header" style="background-color:#FFA500;">

        <h1>主要的网页标题</h1>

     </div>

     <!--左侧菜单-->

     <div class="menu" style="background-color:#FFD700;height:200px;width:100px;float:left">

        <h4>菜单</h4><br>

        HTML<br>

        CSS<br>

        JavaScript

     </div>

     <!--内容部分-->

     <div class="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left">

       内容在这里

     </div>

     <!--版权-->

     <div class="footer" style="background-color:#FFA500;clear:both;text-align:center">

       版权 @ bokeyuan.com

     </div>

  </div>

 </body>

 </html>

浏览器打开如下:

看到这里你是不是对布局有一点感觉了呢？我们继续把例子完成

HTML基础 用div布局实现一个简单网页的更多相关文章

  1. CSS布局中一个简单的应用BFC的例子

    什么是BFC BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子 ...

  2. css基础-2 div布局

    div布局 <html> <head> <title>div布局 </title> <meta charset="utf-8" ...

  3. 【Java基础】用LinkedList实现一个简单栈的功能

    栈的基本功能 栈的最基本功能是保障后进先出,然后在此基础上可以对在栈中的对象进行弹入弹出,此外,在弹出时,如果栈为空,则会报错,所以还需要提供获取当前栈大小的方法. 构造存储对象Student /** ...

  4. nodejs基础 用http模块 搭建一个简单的web服务器 响应JSON、html

    前端在开发中,大多会想浏览器获取json数据,下面来用nodejs中的http模块搭建一个返回json数据的服务器 var http = require("http"); var ...

  5. nodejs基础 用http模块 搭建一个简单的web服务器 响应纯文本

    首先说一下,我们平时在浏览器上访问网页,所看到的内容,其实是web服务器传过来的,比如我们访问www.baidu.com.当我们在浏览器地址栏输入之后,浏览器会发送请求到web服务器,然后web服务器 ...

  6. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  7. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  8. Linux内核分析第三周学习总结：构造一个简单的Linux系统MenuOS

    韩玉琪 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内 ...

  9. 第三周：构造一个简单的LINUX系统MENUOS

    吕松鸿 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.Linux内 ...

随机推荐

  1. Redis之数据类型

    一.概念: Redis:一个开源.支持网络.基于内存.键值对存储数据库. 特点:它可以支持多种数据类型. 二.数据类型 1)Redis String 具体说明: 一般的普通的k到v一个映射是Strin ...

  2. Ckeditor IE下粘贴word中图片问题

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  3. （转）Installing Cloudera Manager and CDH

    转:https://blog.csdn.net/qq_26222859/article/details/79976506 译自官网: Installing Cloudera Manager and C ...

  4. centos7升级kernel之后,vmware无法打开

    12.57版本的vmware: https://my.vmware.com/group/vmware/details?downloadGroup=WKST-1257-LX&productId= ...

  5. vue2.0 之 douban （六）axios的简单使用

    由于项目中用到了豆瓣api,涉及到跨域访问,就需要在config的index.js添加代理,例如 proxyTable: { // 设置代理,解决跨域问题 '/api': { target: 'htt ...

  6. Log4j Threshold、Append

    报错ERROR日志单独存放 Threshold属性可以指定日志level Log4j根据日志信息的重要程度,分OFF.FATAL.ERROR.WARN.INFO.DEBUG.ALL 比如我们指定某个a ...

  7. p5339 [TJOI2019]唱、跳、rap和篮球

    分析  代码 #include<bits/stdc++.h> using namespace std; #define int long long ; ; ],inv[],G,cc[][] ...

  8. HTML中margin与padding的区别！(转)

    我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名 ...

  9. Vue混入：基础

    混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能. 一 App组件 <template> <div id="app"> & ...

  10. 学习：多项式算法----FWT

    FWT也称快速沃尔什变换,是用来求多项式之间位运算的系数的.FWT的思想与FFT有异曲同工之妙,但较FFT来说,FWT比较简单. 前言 之前学习FFT(快速傅里叶变换)的时候,我们知道FFT是用来快速 ...