学习float

  • A+
所属分类:不忘初心

今天学习了前端的float浮动,原来之前听过一个php教程,交的浮动,把我绕晕完,今天复习了昨天的float内容,今天终于换了个知更鸟的,感觉不差于大前端,可以说各有千秋,等转到正式的,我想购买个整版的支持一下作者,幸好价格不是太离谱。

微博慢慢的修正,一点点摸,还是能找到规律的。明天继续,看书,今天都没有来得及。

今天早上乌当区给会计送发票,累。



  1. 此处为隐藏的内容!
    发表评论并刷新,才能查看

 

  1. <pre lang=”html5” line=”1″>//
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <style type="text/css">
    li{
    /*下面是去掉司法拍卖前面的圆点*/
    list-style: none;
    width: 140px;
    height: 190px;
    /*下面设置浮动*/
    float: left;
    margin-left: 5px;
    }
    #bg{
    /*下面属于简写,所有省略了默认的尺寸,*/
    background: url(img/jdpm/clock.jpg);
    }
    #bg2{
    background: url(img/jdpm/delivery.jpg);
    }
    #bg3{
    background: url(img/jdpm/gift.jpg);
    }
    #bg4{
    background: url(img/jdpm/heart.jpg);
    }
    #bg5{
    background: url(img/jdpm/lock.jpg);
    }
    #bg6{
    background: url(img/jdpm/mail.jpg);
    }
    #bg7{
    background: url(img/jdpm/phone.jpg);
    }
    #bg,#bg2,#bg3,#bg4,#bg5,#bg6,#bg7{
    /*下面控制图片大小*/
    background-size:140px 190px ;
    border: 1px solid red;
    }
    a{
    /*下面是去掉a标签的下划线*/
    text-decoration: none;
    color: yellow;
    }
    /*bgcolor是div 的背景*/
    .bgcolor,.bgcolor2,.bgcolor3,.bgcolor4,.bgcolor5,.bgcolor6,.bgcolor7{
    text-align: center;
    height: 90px;
    margin-top:100px ;
    }
    .bgcolor{
    background: green;
    }
    .bgcolor2{
    background: hotpink;
    }
    .bgcolor3{
    background: deepskyblue;
    }
    .bgcolor4{
    background: blueviolet;
    }
    .bgcolor5{
    background: #343336;
    }
    .bgcolor6{
    background: #B8860B;
    }
    .bgcolor7{
    background: yellow;
    }
    /*这是是同时作用越h4和p元素*/
    h4,p{
    padding: 0;
    margin: 0;
    }
    h4{
    padding-top: 20px;
    }
    p{
    margin-top: 10px;
    }
    </style>
    <title></title>
    </head>
    <body>
    <ul>
    <!--
                用ul来做一般导航或小盒子,li就是一个盒子
                -->
    <li id="bg">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg2">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor2">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg3">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor3">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg4">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor4">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg5">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor5">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg6">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor6">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    <li id="bg7">
    <!--内部盒子,用来装文字
                    -->
    <div class="bgcolor7">
    <a href="http://www.gz95.com">
    <h4>司法拍卖</h4>
    <p>法院好货 公开抢拍</p>
    </a>
    </div>
    </li>
    </ul>
    </body>
    </html>

    </pre>

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: