CSS基础（十二）-- Float样式之标签两种样式叠加
随笔记录方便自己和同路人查阅，学习CSS时最好先学会HTML。
#------------------------------------------------我是可耻的分割线-------------------------------------------
我们想把一个div标签涂成两个颜色，根据以前只是可以使用百分比显示比例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<div style="width:30%;background-color:red;">1</div>
<div style="width:70%;background-color:black;">2</div>
</body>
</html>
效果：
为什么会这样呢？因为div是块级标签，默认只要有div就会换行，想要让两个颜色拼接起来需要使用float样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input系列</title>
</head>
<body>
<div style="width:30%;background-color:red;float:left;">1</div>
<div style="width:70%;background-color:black;float:right;">2</div>
</body>
</html>
效果：
Float是漂浮，float-left是向左飘，float-right是向右飘，只要百分比不超过100%就会拼接在一起，如果超过就会换行。
注意：想要拼接两个标签必须都要float，两个标签占比不能超过100%。这个必须会。
做一个简单网页（部分）
首先是首页的灰色标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> <style> .pg-header{ height:30px; background-color:#999; line-height:30px; } </style> </head> <body style="margin:0 auto;"> <div class="pg-header"> <div style="float:left;">收藏本站</div> <div style="float:right;">登入 注册</div> </div> <div style="width:300px;border:1px solid red;"> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> </div> </body> </html>
效果：
优化一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> <style> .pg-header{ height:30px; background-color:#999; line-height:30px; } </style> </head> <body style="margin:0 auto;"> <div class="pg-header"> <div style="float:left;">收藏本站</div> <div style="float:right;">登入 注册</div> </div> <div style="width:300px;border:1px solid red;"> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="width:96px;height:30px;border:1px solid green;float:left;"></div> <div style="clear:both"></div> </div> </body> </html>
效果：
<div style="clear:both"></div>相当于把子集变成和父级一样的格式
优化首页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input系列</title> <style> .pg-header{ height:30px; background-color:#999; line-height:30px; width:980px; margin:0 auto; } </style> </head> <body style="margin:0 auto;"> <div class="pg-header"> <div style="float:left;">收藏本站</div> <div style="float:right;"> <a>登入<a> <a>注册</a> </div> </div> </body> </html>
效果：
在header中增加了两行代码width:980px;和margin:0 auto;
width:980px;表示该标签所占宽度
margin:0 auto; 表示边框为0，自动调整
