DIV&CSS布局

1、DIV+CSS布局与HTML表格定位方式不同。现在网站设计标准已经不再使用表格定位技术了,而是使用DIV+CSS的布局来实现各种定位。div盒子模型结构将各部分内容分配到不同的区块,再用CSS来设置盒子模型的位置、大小、边框、内外边距、排列方式等等。也即:div用来搭建网站结构即框架,css用来创建网站的外观表现即样式或美化。注意:不是所有的网页都需要DIV布局,如数据页面、报表之类的页面,使用HTML的表格会比较好。
2、DIV&CSS标准的优点:a:表现和内容分离,在HTML文件中只存放文本信息,而控制样式格局的设计是单独存放在样式文件中的,实现了HTML文件的简洁性。b:代码简洁,提高页面浏览器速度。c:易于维护和改版。d:提高搜索引擎对网页的索引效率(搜素引擎会绕过样式表去直接抓取网页内容)

<html>
    <head>
        <title>div+css网页    标准化布局title>
        <style>

                style>
    head>
    <body>
    <span>span也是区块标签定义的内容默认是不换行的,它是内联的,定义的是一个小块span>
    <span>span也是区块标签定义的内容默认是不换行的span>
    <div>div区块标签定义的内容,默认是换行的,定义的是一个大块div>
    <div>div区块标签定义的内容,默认是换行的div>
    body>
html>

2、盒子模型的介绍
每个HTML元素都可以看做一个装有东西的盒子,盒子具有宽度(width)和高度(height),盒子里放的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间还有边界(margin)。

<head>
    <style>
    #bor{}
    #main{}
    span{}
    style>
head>
<body>
    <div id="bor">
        <div id="main">
        <span>内容元素span>
        div>
    div>
body>

3、在body体中,默认有一个外边距margin,若需去掉,则在body的style设计中加上margin:0px;
4、用padding 设置为固定的内边距可以使区块随窗口变化而变化。

<style>
body{
background:green;
margin:0px;
padding:100px
}
#main{
width:100px;
height:400px;
background:yellow;
}
style>
<body>
    <div id="main">
    div>
body>

4、区块框浮动

<style>
body{
margin:0px;
}
#main{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:red
}
#one{
float:left;(脱离文档流想左浮动)
width:200px;
height:200px
background:green
}
style>
<body>
    <div id="main">
    wwww
    div>
    <div id="one">
    bbbb
    div>
body>
.clear{
clear:both;
}
<div class="clear">div>
此作用相当于给浮动的区块换行

5、一个实例

建一个css文件夹放单独设计的.css文件:globle.css(全局样式设计文件),layout.css(布局设计文件),font.css(字体设计文件),link.css(链接样式文件),print.css(打印样式文件)

divcss.html设计

<html>
<head>
    <title>页面布局实例title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    /*(链接样式文件)*/<link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <style>
        #one{
        float:left;/*(脱离文档流想左浮动)*/
        width:200px;
        height:200px
        background:green
}
    style>
head>
<body>
    <div id="container">
        <div id="header">
            <div id="logo">
            div>
            <div id="banner">
            div>
            <div id="tool">
            div>
            <div class="nav"> 
         div>/*设计一个分隔区块*/
            <div id="menu">
            div>
         div>
        <div class="nav"> 
         div>/*设计一个分隔区块*/
        <div id="main">
        div>
        <div class="nav"> 
         div>/*设计一个分隔区块*/
        <div id ="footer">
        div>
    div>
body>
html>

layout.css设计

body{
        margin:0px;
        padding:0px;
        font:12px Arial,宋体;
        text-align:center;
        /*这样对于IE浏览器会有居中效果*/
        }
#container{
    margin-left:auto;
    margin-right:auto;
    /*这样对于FF火狐浏览器效果会居中*/
                    /*float:left;(脱离文档流想左浮动)*/
    width:960px;
    height:800px;/*临时用*/
    background:green;/*临时用*/
    text-align:left;/*在container区块里面的内容左对齐*/
}
#header{
width:100%;
height:80px;
background:red;
}/*IE会自动调整高度,FF不会,指定多高就为多高(解决方法:在header的设计中将高度去掉)*/
#header #logo{
float:left;/*像左摆放logo*/
width:200;
height:80px;
margin-right:10px;
background:#ff00ff;
}
#header #banner{
float:left;/*像左摆放banner*/
width:600px;
height:80px;
background:blue;
}
#header #tool{
float:left;/*像左摆放tool*/
width:140px;
height:80px;
background:#ff0000;
}
#header #menu{
float:left;
width:100%;
height:28px;
background:#eee;
clear:both;
}
#main{
width:100%;
height:600px;
background:yellow;
}
#footer{
width:100%;
height:80px;
background:yellow;
}
.nav{
width:100%;
height:10px;/*但是IE浏览器最小高度为18px,所以当小于18px时都为18px*/
clear:both;
overflow:hidden;/*解决高度小于18px时不同浏览器显示效果不同的问题*/
}/*将header、main、footer三个区块用10个像素分开*/

DIV&CSS布局_第1张图片

IE浏览器与FF浏览器居中设计方式不同;IE指定的最小高度为18px(解决方法:overflow:hidden;);IE会自动调整高度,FF不会,指定多高就为多高(解决方法:在header的设计中将高度去掉);FF如果使用浮动才是正常的,(解决方法:让所有的区块都脱离文档流);IE和FF在列表的外边距和内边距有区别(解决方法:ul{margin:0px; padding:0px; list-style:none;})

#header #menu.tiao{}/*这是一个关联选择器,优先级最高*/

你可能感兴趣的:(DIV&CSS布局)