html学习-day02:div布局与css控制

来源：互联网发布：淘宝卖家密码修改编辑：程序博客网时间：2024/04/19 09:59

一》html布局：

思路：可能很多的朋友跟我一样也是对前端页面开发没什么经验的，而且一看到网上的那些复杂的页面布局，就觉得头痛，确实。我是没有什么经验，那我们的要求就不要那么高了，先从大体上着手就

行。意思就是，先将从上到下，由左到右将网页的大局先画出来，然后再慢慢的修改。

二》布局流程：

1）用div布局：

<body>
        <div id="myDiv"></div>
        <div id="myDiv1"></div>
        <div id="myDiv2"></div>
     </body>

2）用css控制
<style>
         div{
          height:500px;
          background:black;
         }
         #myDiv{
           background:red;
         }
         #myDiv1{
           background:yellow;
         }
       </style>

三》注意事项

1）css有几种引入方式。
要说出CSS的引入方式，没有什么难度，但要说到为什么使用不同的引入方式，就有些学问在里面了。

CSS的引入方式最常用的有三种，

第一：在head部分加入<link rel="stylesheet" type="text/css" href="my.css"/>,引入外部的CSS文件。

这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法；最能体现DIV+CSS中的内容与显示分离的思想，也最易改版维护，代码看起来也是最美观的一种。

第二：在head部分加入
<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度快，所有的CSS控制都是针对本页面标

签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻

烦些。　但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进行复杂的维护工作。

第三：直接在页面的标签里加　<div style="border:1px red solid;">测试信息</div>

这种方法现在用的很少，很多公司不了解前端技术的领导还对这种写法很痛恨。认为ＨＴＭＬ里不能出现ＣＳＳ命令。其实有时候使用下也没有什么大不了。比如通用性差，效果特殊，使用ＣＳＳ命令

较少，并且不常改动的地方，使用这种方法反而是很好的选择。

除了这三种常用的ＣＳＳ引入方式，还有种很多人都没有见过的引入方式
<style type="text/css">
@import url(my.css);
</style>

这就是第四种引入方式。在ＩＢＭ工作的时候，只能使用一种Ajax框架，就是ＤＯＪＯ。而ＤＯＪＯ的CSS引用，就是采用了@import的方式。这种情况非常少，主要用在CSS文件数量庞大的负责的系统中

。另外@important本身是一个CSS命令，是放在CSS文件里的，这个跟LINK标签有很大的区别。
实例如下：
<DOCTYPE html>
<html>
     <head>
     
     
       <style>
       
       @import url(my.css);
       
       
       </style>
     </head>
     <body>
        
        <div id="myDiv" style="border:1px red solid;height:200px;width:800px"></div>
        <div id="myDiv1"></div>
        <div id="myDiv2"></div>
     </body>
</html>

2）div除了可以声明id来控制，还可以声明什么来控制。
div除了用ID赋予它一个名称外，还可以用class来赋予它一个名称。还可以不用赋予它一个名字，直接用style来直接设定它的样式。
唯一区别就是ID是唯一的，只能用一次。反而CLASS是可以反复使用的，可以多个div同时时候class来定义样式。
一般JS中常用ID，因为JS是获取div名字来进行判断的，也是唯一判断，如果用class会出错，如果我们写普通html，用class会好些哦。

3）如何让2个div，并排显示（浮动布局）（float:left或者float:right）。
如果div不指定width,就会往自己的父元素的两边挤，就算声明宽度，也会独占一行。那应该怎么办呢，这是就应该使用float漂浮属性了
实例：
<html>
     <head>
       <style>
         div{
          height:200px;
          background:black;
         }
         #myDiv{
           background:red;
           float:left;
         }
         #myDiv1{
           background:yellow;
           float:right;
         }

          #a{
           background:blue;
           float:left;
           clear:both;
         }
         #b{
           background:green;
           float:right;
           clear:both;
         }
       </style>
     </head>
     <body>
        
        <div id="myDiv">我是左</div>
        <div id="myDiv1">我是右</div>
           <div id="a">fafdaf</div>
           <div id="b">fafdaf</div>
     </body>

4）如果父div中有2个子div是浮动的，父div的高度，有没有被子div撑起来，父div的高度是多高？
答：父元素要设置width属性。

一般在<body>里面都声明一个总的div ，命名为containner

总结：本篇主要介绍的知识点有：div,css,float,clear

0 0