一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起。

日子就这么过,一天一个样字,时间多了自己写博客,写心得,时间紧张了,要么转载别人的,要么干脆就不写了,这种心情不知道大家能理解不?今天心血来潮,决定自己尝试一下这个传说中的CSS,其实做布局首先是要分块,将界面分为自己想要的几个部分,在Winform中,一般都是通过panel+doc属性搞定,如果仔细想想,其实这个panel实际上是起到了划分占位的作用,那么在CSS中布局,划分就应该是用div来完成,本人不才,习惯了Winform的开发,所以第一个布局还是按照Winform的风格来练习的。

在CSS中DIV 属于块级别元素,块元素(例如div)在没有任何布局属性作用时,默认排列方式是换行排列,也就是说宽度是100%,即便它的高度是1px,它也会占居整行。但是在今天使用div的时候,发现一个问题,这个问题让我找了半天,我的效果本应该是下面的:

效果的代码如下,大家不要嘲笑,这个布局在做C/S开发的时候很常见,也很容易,但是在CSS这,我搞了半天。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="_10_1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#t1
{
float:left; } body
{
width : 100%;
height:100%;
margin:0,0,0,0
}
#top
{
width : 100%;
height:50px; background-color:Silver }
.mapstyle1
{
height : 100%;
width:40px; background-color:Purple
} #t2
{
height: 60px;
width :100%; }
#main
{
width:100%;
height:300px; } #main #t2 #t3
{
width:56px;
height:100%;
float:right;
background-color:Red; }
#main #t2 #map
{
height: 60px;
width:95%;
background-color:Orange;
float:left
}
#main .bottom
{
height:10px;
background-color: Green } </style>
<script type="text/javascript"> window.onload = function () {
// var btn1 = document.getElementById("map");
// btn1.className = "mapstyle1" // btn1.onclick = function () {
// alert("hello");
// }
} </script>
</head>
<body>
<div id="main"> <div id ="top"></div> <div id="t2" >
<div id="t1" class="mapstyle1" >
</div>
<div id="map"></div>
<div id="t3"> </div>
</div> <div id ="bt" class="bottom"></div> </div>
</body>
</html>

在开始的时候,我将id为top的div 写成

<div  id ="top"/>

结果效果成了下面的样子:

这个结果是id为top的div没有出现,在google浏览器中调试发现高度为0,当将

<div  id ="top"/>

改成

<div  id ="top"></div>

效果就出来了,看来div必须成对出现呀!

在这里还学习了float的用法。

上面说过,如果给div不做任何布局,那么这个div会占据正行,该div下面的一个新的div会另起一行,如何让这两个div元素并排显示呢?float就可以解决这个问题。

CSS的float属性,作用就是改变块元素(block element)对象的默认显示方式,HTML标签设置了float属性之后,它将不再独自占据一行,使用了float标记的元素将脱离标准流, 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则,块状元素从上往下,内联元素从左向右的排列,当使用了relative,float等设置后,排列就不是按照标准流了。

浮动(float)细节:
      1.左(右)浮动元素,尽量靠近父元素左(右)内边沿。
      2.浮动元素尽量不去重叠交叉。
      3.浮动元素尽可能高,当不会高于父元素顶内边沿。

CSS+DIV布局初练—DIV元素必须成对出现?的更多相关文章

  1. DIV布局-高度不同DIV,自动换行并对齐

    最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方 ...

  2. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  3. [转]CSS网页布局:div水平居中的各种方法

    http://jingyan.baidu.com/article/fa4125ac90a2a328ac70929e.html 在Web标准中的页面布局是使用Div配合CSS来实现的.这其中最常用到的就 ...

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

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

  5. DIV+CSS 网页布局之:混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  6. DIV+CSS 网页布局之:一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  7. DIV+CSS 自适应布局

    两栏布局,左边定宽200px,右边自适应.如何实现?我的第一个反应就是:用flex伸缩盒呀,然后balabala...说完之后,面试官说,还有没有别的方法?flex有些浏览器不支持嗯...我愣了一下, ...

  8. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  9. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

随机推荐

  1. 使用DNSSCrypt解决DNS污染问题

    本文转自 月光博客,如有需要,请阅读原文. google近期在国内是不能访问了,dropbox这货居然也被DNS污染了,幸好发现DNSCrypt这一神器,防止DNS污染的绝佳工具. 基本原理:DNSC ...

  2. VC6配置OpenCV1.0

    懒得写字,故扫描:

  3. [java学习笔记]java语言基础概述之运算符&程序流程控制&for循环嵌套

    一.运算符 算数运算符 +,-,*,/,%,++,-- 1.+,-,*,/ 整数除以整数的结果为舍弃了小数部分的整数. 2.%:取余 %左右都为正数,左边小于右边结果为左边值,如,4%5=4 %左边大 ...

  4. .net 页面跳转方式【转】

    1 Response.Redirect这个跳转页面的方法跳转的速度不快,因为它要走2个来回(2次postback),但他可以跳 转到任何页面,没有站点页面限制(即可以由雅虎跳到新浪),同时不能跳过登录 ...

  5. 两个list 求交集效率对比

    __author__ = 'daitr' #--coding:utf-8-- import datetime #方法一: #a=[2,3,4,5] #b=[2,5,8] #tmp = [val for ...

  6. String类源码分析(JDK1.7)

    以下学习根据JDK1.7String类源代码做注释 public final class String implements java.io.Serializable, Comparable<S ...

  7. KM3

    本科:读完一本书,知道book里讲的是什么,带有知识吸收: 硕士:读完一本书,知道book里的内容,而且还能发现相关的问题,带有知识的思考: 博士:读完一本书,知道book里的内容,而且还能发现相关的 ...

  8. JS 原型链图形详解

    JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语 ...

  9. Linux远程备份—ftp方式、NFS方式

    问题:现在项目中每天都有从其它各个系统发过来的数据文件(存放在/var/data目录下,以.txt结尾),虽然很久以前的文件很少用到,占用了很多空间,却不能删除.于是,想把一个月以前的文件都压缩了传到 ...

  10. 二、记一次失败的 CAS 搭建 之 证书配置

    ==================================================================================================== ...