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. Check the port occupy on Mac OSX

    Check the port occupy on Mac OSX lsof -i :7070 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME si ...

  2. Feign调用远程服务报错:Caused by: java.lang.IllegalStateException: Method getMemberInfo not annotated with HTTP method type (ex. GET, POST)

    org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'ord ...

  3. MJ瀑布流学习笔记

    1. 如果系统自带的布局的话,是这样: //系统自带的UICollectionViewFlowLayout 而不是UICollectionViewLayout UICollectionViewFlow ...

  4. 退役——halfrot's life in OI

    这是一个没有人看的博客里丢了两年的坑,还有很多事应该做,但是我很懒,所以今天把它填了. 前记:和很多人的竞赛生涯一样,一开始我也是奋不顾身,奔月而去,然而身处弱校,没有人引导方向,再加上自己很蒻的主要 ...

  5. 20180715-Java 数组

    double[] myList //首选方法 double myList[] //效果相同,但不是首选方法 该实例完整地展示了如何创建.初始化和操纵数组: public class TestArray ...

  6. 学习笔记11 EF查询相当于sql 中的 where in

    两种写法 1. int[] Ids={1,2,3} DBContainer db=new DBContainer(); var list=db.表明.where(a=>Ids.Contains( ...

  7. 后端技术杂谈7：OpenStack的基石KVM

    Qemu,KVM,Virsh傻傻的分不清 本文转载自Itweet的博客 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://gi ...

  8. 关于CSS你应该知道的基础知识 - 样式应用篇

    上一篇简单总结了一下选择器,如果一个元素被多个选择器选中,元素的样式就会以级联方式被应用到.要搞清最终那个样式被应用到元素上了,首先要明白引用CSS代码的几种方式. CSS代码引用方式 如何应用CSS ...

  9. 去掉注释index.html

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  10. 126、TensorFlow Session的执行

    # tf.Session.run 方法是一个执行tf.Operation或者计算tf.Tensor的一个主要的机制 # 你可以传递一个或者多个tf.Operation或者tf.Tensor对象来给tf ...