简单的网页布局（Div+CSS）<CSS盒模型+Div嵌套>：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>新浪网局部布局</title>
  <style>
    *{
     margin: 0px auto;
     padding: 0px;
    }
   .top-nav{
    width: 100%;
    height: 40px;
    background-color:#CCCCCC;
    }
   .container{
    width: 100%;
    border: 1px solid black;
   }
   .content{
    width: 1000px;
    height: 800px;
    border: 1px solid black;
   }
   .logo-banner, .content-nav{
    width: 100%;
    height: 40px;
    border: 1px solid black;
   }
   .logo-left{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float: left;
   }
   .logo-right{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float:right;
   }
   .content-nav{
    background-color: darkgreen;
   }
   .content-2{
    width: 60%;
    height: 400px;
    background-color: blueviolet;
    float: left;
   }
   .content-3{
    width: 40%;
    height: 400px;
    background-color:brown;
    float: left;
   }
  </style>
 </head>
 <body>
   <div class="top-nav"></div>
   <div class="container">
    <div class="content">
     <div class="logo-banner">
      <div class="logo-left"></div>
      <div class="logo-right"></div>
     </div>
     <div class="content-nav"></div>
     <div class="content-1">
      <div class="content-2"></div>
      <div class="content-3"></div>
     </div>
    <div style="clear: both;"></div>
   </div>
    
   </div>
 </body>
</html>

利用Div+CSS整体布局页面的操作流程的更多相关文章

  1. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  2. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  3. 表格布局扩展/DW设计界面中快速整体布局页面的操作

    DW设计界面中快速整体布局页面的操作流程: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  4. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  5. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  6. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  7. div,css&table布局有哪些区别

    DIV+CSS布局与TABLE布局相比,有哪些优点? 1.代码少,页面文件小,下载快 Div+css的布局现在属于国际W3C标准,table不是. 都知道用div的布局代码肯定少,所有的样式都在CSS ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

随机推荐

  1. Selective Search for Object Recognition 论文笔记【图片目标分割】

    这篇笔记,仅仅是对选择性算法介绍一下原理性知识,不对公式进行推倒. 前言: 这篇论文介绍的是,如果快速的找到的可能是物体目标的区域,不像使用传统的滑动窗口来暴力进行区域识别.这里是使用算法从多个维度对 ...

  2. MyBatis源码解析【3】生命周期

    经过之前的项目构建,我们已经得到了一个可以使用的最基本的项目. 其中已经包括整个执行的过程.但是我们在完成之后也遇到了很多问题,我们就要慢慢的一步步解决这些问题. 讲道理,今天我们其实应该直接开始看源 ...

  3. （转载）MQ基本操作

    摘自:http://blog.sina.com.cn/s/blog_4892cf780100erga.html 一．MQ基本操作 MQ中有几个很重要的组件:队列管理器(QueueManager).队列 ...

  4. 利用fputcsv导出数据备份数据

    今天,分享一个利用fputcsv导出数据备份数据的方法,我也时看到些零零散散的代码,想着拼起来,所以我只提供些思路,以及简单的代码,至于怎么组合能够让它更强大,尽情去探索吧 讲之前先上一段获取数据库里 ...

  5. dotpeek的导出

    在开始写之前先说明下,搜了很久的度娘,就是没找到dotpeek的导出功能,····,看来用的人不多, ------------------------------------------------- ...

  6. 如何制作一个完美的全屏视频H5

    写在前面的话: 最近一波H5广告火爆整个互联网圈,身为圈内人,我们怎能     不! 知!道! :( 嘘!真不知道的也继续看下去,有收获 ↓ ) So,搞懂这个并不难. 这篇文章将带你从头到尾了解H5 ...

  7. SQL Server2008 安装及概述

    最近在学习SQL Server 数据库,用的版本是2008 R2的版本,如下图所示,本人学习时间不长,写这篇文章一是为了锻炼自己加深印象,二也可以与和诸多朋友进行交流以及得到大家的指教. 安装教程网上 ...

  8. VerilogHDL概述与数字IC设计流程学习笔记

    一.HDL的概念和特征 HDL,Hard Discrimination Language的缩写,翻译过来就是硬件描述语言.那么什么是硬件描述语言呢?为什么不叫硬件设计语言呢?硬件描述语言,顾名思义就是 ...

  9. 【canvas学习笔记一】基本认识

    <canvas>标签定义了一块画布,画布可以在网页中绘制2D和3D图象,现在先学习如何绘制2D图象,绘制3D图象属于WebGL的内容(也就是网页版的OpenGL,3D图形接口). 属性 & ...

  10. tomcat的常用配置方法

    1.tomcat配置某个站点的欢迎页面的方法 2.tomcat配置虚拟目录的方法 3.tomcat配置虚拟主机的方法