略过了安装教程以及htm的介绍。
这里使用的是sublime进行html的编译。
首先是在html的学习中，布局是首先要熟悉的，就像雕刻和画画一样，你不可能从头开始，把所有的细节都刻画上去。这样做会导致效率低下，而且很有可能会让布局出现问题，所以，要先做的应该是把大体的模块规划完成以后再去刻画细节部分，html也是这样。首先我们创建一个普通的html页面，有三个div通过css来控制
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#test1{
width: 800px;
height: 200px;
background: gray;
}
#test2{
width: 800px;
height: 200px;
background: red;
}
#test3{
width: 800px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
</body>
</html>
如上是创建了一个普通的网页，大致效果如下
这时如果我们需要让不同模块进行左右相对要怎么办呢？比如说我想让第一个模块和第二个模块在同一行需要怎么做呢？
这时就需要使用浮动布局—float。
浮动布局通俗点来讲，按照英文本身的意思float有漂浮浮动的意思，如果在模块的css里添加float属性，我们就可以看到两个模块的变化。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#lside{
height: 100px;
width: 20px;
background: red;
float: left;
}
#rside{
height: 100px;
width: 20px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div id="lside">我是左边</div>
<div id="rside">我是右边</div>
</body>
</html>
效果图大致如下
既然说到了float有浮动的意思，那么该怎么理解float属性本身呢，你可以理解为在添加了这个属性之后，div模块就会漂浮起来，这里只需要添加一个简单的无float属性的div即可验证。
#test1{
height: 300px;
width: 200px;
background: green;
}
<div id=test1>我是测试</div>
此时的效果图如下
我们可以看到，test1的div模块有一部分被我是左边和我是右边挡住了，其实就可以理解为我是左边和我是右边漂浮起来以后，这时在插入了test1以后，test1就相当于在他们下面。
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
