搭建第一个商业化主页（上）
试着写一个建议的HTML文档，看一下淘宝的导航栏，那么我们也可以开始做一个简易的HTML网页
打开hbuilder进行操作，在hbuilder里面，可以通过tab键快速补齐代码，比如要打一个<div></div>只需要输入div三个字母，然后通过点击键盘上的Tab键，就可以快速补齐。或者要得到三个li，只需要输入ul>li*3再按tab键
<ul>
<li></li>
<li></li>
<li></li>
</ul>具体操作
网页上显示的结果为
已经得到的是HTML输出的内容，但是他和我们的截图中淘宝首页并不相同，原因是因为缺少了CSS中的代码
可以发现前面的小数点消失了
style中设置li的style中的float属性为left
可以看见此时的网页发生了变化，文字变成了横向，但是文字内容全部接在了一起
下面继续更改style中的内容 ，li中添加一个属性，margin
添加背景颜色，以及字体颜色
居中
整体代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div.taobao{
width: 990px;/*taobao标签的宽度*/
height: 30px;/*taobao标签的高度*/
background-color: #FF9000;/*背景颜色*/
margin:0 auto;/*让整个块居中*/
}
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
li{/*li是个块结构*/
color: #ffffff;/*字体颜色*/
margin: 0 10px;/*使导航中间有一定间隔*/
float: left;/*使导航文字横向显示*/
line-height: 30px;
text-align: center;/*让字居中*/
font-weight: bold;/*字体加粗*/
font-size: 16px;/*字体大小*/
}
</style>
</head>
<body>
<div class="taobao">
<ul>
<li>天猫</li>
<li>聚划算</li>
<li>天猫超市</li>
</ul>
</div>
</body>
</html>
块状元素与内联元素
<!--块元素：
1.一般是一个容器，可以容纳其他的块元素和内联元素
2.块元素，排斥与其他元素在同一行
3.块元素的宽度和高度都起作用，意思是可以设置块的大小
内联元素：
1.内容只能容纳文本或者其他内联元素
2.可以与其他内联元素排在同一行
3.width、height不起作用，大小无法设置,也就是可以设置高宽，但是并不会显示出来，不起作用
-->
接下来进行具体操作，可以发现块元素和内联元素并没有出现在同一行
那么有一个问题，如何让一个内联元素能够有大小、有宽高，只需要给内联元素的css样式设置display:block即可，但是只要编程块状元素后，他后面就不能跟其他的元素了，此时，内联元素2就跑到了下一行，如下所示
接下来给出代码，并在代码中已加以注释具体含义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;
}
#div2{/*因为div2是一个id，所以在此处div2时，在他前面加一个#号，*/
width: 200px;
height: 200px;
background-color: #900000;
}
#div3{
width: 120px;
height:120px;
background-color: #000090;
}
#aid{
display: block;/*将内联元素的显示改为块状元素*/
width: 80px;
height: 80px;
background-color: #000000;
color:#FFFFFF
}
#aid2{
background-color: #aaaaaa;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">块状元素</div>
<div id="div3">块状元素2</div>
<a id="aid" href ="#">内联元素</a>
<a id="aid2" href ="#">内联元素2</a>
</div>
</body>
</html>
浮动和定位
在body中添加两个块，并设置其css样式，记得div*2再按一下tab键，则可以出现两个<div></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;/*设置无边框*/
}
#div1{
float:left;
width: 300px;
height: 300px;
background-color: #900;
}
#div2{
width: 300px;
height: 300px;
background-color: #090;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
</body>
</html>
其实绿色的块被置于红色的块的下方，我们将绿色的块的大小更改成400即可查看
其他浏览器：IE（IE7）浏览器，基本差不多
但是有一点就是IE6中会出现一个小问题
再接着给css中添加其他属性，margin-left属性
而IEtester中IE6
原因是：<!--IE 在浮动中的一个bug：
1.块元素
2.float:left
3.margin-left不为0
只要同时满足上面的三个条件，那得到的margin-left就会double，也就是如果设置为30，结果就会变成60
-->
然后我们给他添加一个属性：display:inline;/*显示变成内联元素，只针对于IE6*/，根据上面的了解，inline内联元素是没有大小的，所以此处查看一下，他的大小会不会消失
再看一下IE浏览器 ，可以发现一样有大小，并且左边的间距也没有变成2倍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;/*设置无边框*/
}
#div1{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 300px;
height: 300px;
background-color: #900;
display:inline;/*显示变成内联元素，只针对于IE6*/
}
#div2{
float:left;
margin-left: 30px;
margin-top: 30px;
width: 400px;
height: 400px;
background-color: #090;
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<!--
IE6 在浮动中的一个bug：
1.块元素
2.float:left
3.margin-left不为0
只要同时满足上面的三个条件，那得到的margin-left就会double，也就是如果设置为30，结果就会变成60
-->
</body>
</html>
添加一个div块
#div3{
width: 100px;
height: 100px;
background-color: #009;
margin-left: 10px;
margin-top: 10px;
}查看此时网页显示的状态，可以发现IE会自动把下一个块也当成float：left，但是Chrome会无视他。
那么怎么做，才能使得蓝色的块并排与绿色的块的后面 ，在div2和div3之间添加一个<div class="clear"></div>，添加并在其css样式中添加，并查看结果
.clear{/*class前面加小数点“.”,如果是一个id，则id前加一个#号*/
clear:both;/*在Chrome中，让后续的块重启一行*/
}
在div3中，如果也添加float：left的话，那么蓝色的块就能继续在绿色的块后面显示，而clear:both的功能主要就是重启一行
但是如果设置了clear：both之后，就需要继续对div3添加一个display:inline的属性，否则，IE6中，块3前方的间距又会变成双倍，如下所示，所以记得重启一行后要加上display:inline
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div{
margin: 0;
padding: 0;/*设置无边框*/
}
#div1{
float:left;/*从左到右显示*/
margin-left: 10px;
margin-top: 10px;
width: 100px;
height: 100px;
background-color: #900;
display:inline;/*显示变成内联元素，只针对于IE6*/
}
#div2{
float:left;/*从左到右显示*/
margin-left: 10px;/*靠左边的距离*/
margin-top: 10px;/*上边的距离*/
width: 150px;
height: 100px;
background-color: #090;
}
.clear{/*class前面加小数点“.”,如果是一个id，则id前加一个#号*/
clear:both;/*在Chrome中，让后续的块重启一行*/
}
#div3{
float: left;/*从左到右并排显示*/
width: 100px;
height: 100px;
background-color: #009;
margin-left: 10px;/*靠左边的距离*/
margin-top: 10px;/*上边的距离*/
display:inline;/*块状元素变为内联元素，针对于IE浏览器，使他可以margin-left不会变成double，因为内联元素是没有大小的*/
}
</style>
</head>
<body>
<div id='div1'></div>
<div id='div2'></div>
<div class="clear"></div>
<div id="div3"></div>
<!--
IE 在浮动中的一个bug：
1.块元素
2.float:left
3.margin-left不为0
只要同时满足上面的三个条件，那得到的margin-left就会double，也就是如果设置为30，结果就会变成60
-->
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
