布局篇(1)—If you love css …（2）
作者：Jorux 来源：Jorux博客 发布时间：2008-04-16 14:14:00
标签：布局,photoshop,网页
这样我们就完成了第一次切割，并且把一切涉及布局的背景图片切了下来。接着就是如何用css布局了，我们的目标是实现以下效果图(Fig.07)：
那么现在就开始编写html代码。既然我们有了一清晰的布局效果图，编写html代码应该是很简单的一件事情。但是越是简单的事，人们忽略的东西就越多。以下Jorux的观点请一定仔细考量：
***对于DIV的使用，请一定从大到小，把那些能在一起的元素划分到一个DIV，然后再在此DIV中继续划分小DIV。
所以为实现(Fig.07)的效果图，需要做以下几步：
1. 我们首先把header，content，sidebar，footer归为一个DIV，ID=“AllWrap”；用其实现向左浮动；
2. 接着把header作为一个DIV，ID=“Header”；
3. 把content和sidebar划分在一个DIV，ID=“MidWrap”；然后在其内继续划分为两个DIV，ID分别为Content和Sidebar；
4. 最后把footer作为一个DIV，ID=“Footer”；
最终得到Html代码为：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<HTML>
<HEAD>
<TITLE>My layout</TITLE>
</HEAD>
<BODY>
<div id=”AllWrap”>
<div id=”Header”>Header</div>
<div id=”MidWrap”>
<div id=”Content”>Content</div>
<div id=”Sidebar”>Sidebar</div>
</div>
<div id=”Footer”>Footer</div>
</div>
</BODY>
</HTML>
给读者留一个问题，请有能力的朋友在留言中给出实现效果图样式的css代码。有如下要求：
1. 向左浮动；
2. AllWrap宽为760px；Content宽为560px，高400px；Sidebar宽为200px，高400px；Footer高为80px，宽760px；
3. 在800×600，1024×768，或是宽屏显示器都能正常显示；
4. 在IE6/7, Opera, Firefox均能显示正常；
0
投稿猜你喜欢
1. 获取时间函数功能返回格式CURDATE(), CURRENT_DATE()返回当前日期，只包含年、月、日2022-03-08CURTI- php创建JSON数据详解：<?php //创建一个字符数组 $arr=array( 'id'
- 1 什么是 NumpyNumPy，是 Numerical Python 的简称，用于高性能科学计算和数据分析的基础包，像数学科学工具（pan
- 一、Oracle 11g安装安装之前要先确定自己的电脑配置，以windows为例，如果是win7以下系统如xp等，可以选择Oracle 10
- 继承与threading.Thread实现有返回值的子类MyThread，废话不多说，大家直接看代码import threadingclas
- 引言从他人的错误中学习，通过本指南避免常见陷阱和坏习惯，提高你的 Go 编程技巧在 Go 语言中，就像在任何编程语言中一样，了解常见陷阱和坏
- 前言总结一下最近看的关于opencv图像几何变换的一些笔记. 这是原图: 1.平移import cv2import numpy as npi
- 编号标准宗地编码(landCode)所在区段编码(sectCode)1131001BG001G0012131001BG002G0013131
- Django中的静态文件夹static在创建好Django项目时默认是没有的，需要我们手动自己去创建，static文件夹里主要存放一些能暴露
- 一、检测它是不是整数function Is_Int(a_str) if&
- 本文实例讲述了jsp中select的onchange事件用法。分享给大家供大家参考，具体如下：<script language = &
- 1.python版本与matlab版本的对应关系在MAC中安装了Anaconda3，其中自带的python版本为3.8，通过python版本
- 概述源码地址torch版本训练环境没有按照torch的readme一样的环境，自己部署环境为：torch==1.9.1torchvision
- 数据迁移需要从mysql导入clickhouse, 总结方案如下，包括clickhouse自身支持的三种方式，第三方工具两种。create
- <％@ Page Language="C#" AutoEventWireup="true" C
- 一. 介绍一个计数器工具提供快速和方便的计数，Counter是一个dict的子类，用于计数可哈希对象。它是一个集合，元素像字典键(key)一
- 常用Mysql查询语句记录一、授权1.授权本地用户对所有数据库具有所有权限> grant all privileges on
- 简单的说,析构函数是用来在对象关闭时完成的特殊工作,比如我写的上例,在实例化同时打开某文件,但是它什么时候关闭呢,用完就关闭呗,所以析构函数
- 我就废话不多说了，大家还是直接看代码吧~import kerasfrom sklearn.model_selection import tr
- 引言这算是一个高级用法了，前面我们只说到对类型、变量的几种反射的用法，包括如何获取其值、其类型、以及如何重新设置新值。但是在项目应用中，另外
