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. Incorporating ASP.NET MVC and SQL Server Reporting Services, Part 2

    In the last issue, I introduced you to the basics of incorporating SQL Server Reporting Services int ...

  2. Activiti插件安装(二)

    Eclipse安装 网络在线安装:1) 打开 Help -> Install New Software. 在如下面板中: 2) 在如下 Install 界面板中,点击 Add 按钮: 配置新装插 ...

  3. 【HDOJ6665】Calabash and Landlord（dfs）

    题意:二维平面上有两个框,问平面被分成了几个部分 x,y<=1e9 思路:分类讨论可以 但数据范围实在太小了,离散化以后随便dfs一下 #include<bits/stdc++.h> ...

  4. [CSP-S模拟测试]:数字（数学+高精度）

    题目描述 很简单,给出正整数$n$,求出$n!$在十进制表示下的从最末非零位开始的总共$k$位. 输入格式 第一行一个正整数$T$,表示有$T$组数据接下来$T$行,每行两个正整数$n$和$k$. 输 ...

  5. s6tu

    # -*- coding: utf-8 -*- # @Time : 2018/03/30 15:20 # @Author : cxa # @File : liuuchnagtu.py # @Softw ...

  6. Apache检查配置文件语法

    Windows环境:httpd -t或者: httpd.exe -w -t -f "C:\Apache2.2\conf\httpd.conf" -d "C:\Apache ...

  7. 解决Win7部分便笺的元数据已被损坏的方法

    Win7部分便笺的元数据已被损坏的方法 我们使用键盘上"Win+F"组合键搜索功能,直接找到"inkobj.dll"这个文件,一般会搜索出来好多,先随便选一个. ...

  8. CSS学习笔记2：选择器

    标签选择器 1.选择要给样式的目标标签,所以叫做标签选择器,也叫元素选择器. 2.给所有相同标签,给相同样式. <!DOCTYPE html> <html lang="en ...

  9. Bootstrap 学习笔记4 巨幕页头略缩图警告框

  10. CodeForce-1196D2-RGB Substring (hard version)

    原题链接 题目大意与上题完全一样,只是数据规模更大. 思路: 再用上题的暴力肯定TLE,所以需要优化一下搜索过程.上一题我们是外层遍历n,内层遍历3种情况.这题我们外层遍历3种情况,内层遍历数组,记录 ...