CSS浮动设计_php.cn手记

abstract：<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"/> <title>CSS浮动</title> &nb

<!DOCTYPE HTML>
<html>
<head>
    <meta charset = "utf-8"/>
    <title>CSS浮动</title>
    <style>
    ul li{width:100px;height:40px;line-height:40px;background-color:#ccc;text-align:center;float:left;
    margin:0px 5px;position:relative;}
    .clear{clear:both;}
    .box{width:200px;height:200px;background-color:pink;float:right;}
     
    </style>
</head>
<body>
    <ul>
        <li>HTML</li>
        <li>JavaScript</li>
        <li>CSS</li>
        <li>jQuery</li>
        <li>php</li>
    </ul>
    <div class="clear"></div>
    <div class="box"></div> 
    <div class="box"></div>
    <div class="box"></div>   
</body>
</html>

Correcting teacher：韦小宝Correction time：2019-03-02 13:28:04
Teacher's summary：css中的浮动在网站的布局中起到了很大的作用但是使用多了也还要记得清除浮动哦

CSS浮动设计

Popular Entries