前端开发需要用到数据库吗 软件开发 web前端 华为需要前端开发的吗
例:
<html>
<head>
<style type=”text/css”>
{margin:0;padding:0;}
#main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left<div class=”right”>right
</body>
</html>
浏览器中浏览,发现定义的#main {background-color:#000;}不起作用,是因为left/right浮动了
清除浮动方法:
第一种,用.clearfix,即after伪对象清楚浮动
(这法子是一同事教的、而且几乎不存在兼容性问题)
/ For Safari /
注:对于.clearfix,一位仁兄(ruyingfei )指教了另一精辟:.clearfix { zoom:1;} (可参阅外文:http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx)
改好后例子如下:
<html><br> <head><br=””> <style type=”text/css”>
{margin:0;padding:0;}
main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}</br>>
.clearfix:after {content:”.”; display:block;clear:both;visibility:hidden;line-height:0;height:0;}
/ For Safari /
</style>
</head>
<body>
<div id=”main” class=”clearfix“>
<div class=”left”>left
<div class=”right”>right
</body>
</html>
小结:1.优点:兼容性强,使用方便(在css文件里加个.clearfix,在写html时可以随时调用)…有待更新…
2.缺点:html中需要添加多余的class,css文件量大…有待更新…
第二种,用clear,即空标签清除浮动
.clear {clear:both;}
修改后例子:
<html>
<head>
<style type=”text/css”>
* {margin:0;padding:0;}
#main {width:500px;background-color:#000;color:#FFF;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
.clear {clear:both;height:0;font-size:0;overflow:hidden;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left<div class=”right”>right
<div class=”clear“>
</body>
</html>
注:<div class=”clear“> 中的div也可用p/hr..
小结:1.优点:简单,通俗…有待更新…
2.缺点:增加了无意义的结构元素<div class=”clear“>…有待更新…
第三种,用overflow,同时加个“zoom:1;”用于兼容IE6
#main {overflow:auto;zoom:1;}
修改后的例子:
<html>
<head>
<style type=”text/css”>
{margin:0;padding:0;}
main {width:500px;background-color:#000;color:#FFF; overflow:auto;zoom:1;}
.left {float:left;width:200px;height:200px;background-color:#900;}
.right {float:left;width:200px;height:300px;background-color:#009;}
</style>
</head>
<body>
<div id=”main”>
<div class=”left”>left <div class=”right”>right
</body>
</html>
小结:1.优点:简单,无需修改html代码,兼容性强:FF3.6,chrome5.0, IE7, IE8, Safari, Opera…有待更新…
使用access 作为sql前端开发工具 wed前端开发视频 oppo前端开发面试
评论前必须登录!
注册