文摘汇
首页 > 美文 > IT好文章
    三步教你学会用浮动float制作div网页,div制作网页分三列怎么做
    编辑:酸辣粉  信息来源:文摘汇  发布时间:2016-10-31  阅读:次  WAP页
  • 三步教你学会用浮动float制作div网页,div制作网页分三列怎么做UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站


    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    很多人问我怎么利用浮动float,浮动div的时候,很多人说会跑到其他div的上边去,怎么处理。其实很多人习惯了表格,不过现在表格的网友确实过时了,div制作网页才是潮流,除非特殊需要很多表格的地方,一般还是建议大家用div制作网页,怎么用div制作三列网友呢,需要用到浮动float,每当我们用float的时候,伴随着就要用到,clear这个属性,在浮动的下边要把浮动清楚,这样浮动才不会跑到其他div的上边去。UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站


    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    先看效果图
    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    001.jpgUDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站


    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    可以用个div制作,第一个div是左浮动,第二个div也是左浮动,第三个div是右浮动,第四个div很关键,就是清楚浮动,这样。浮动的div才不会跑到其他父div的上边。可以设置左边的div的占比,中间div的占比,和右边的div占比,可以用百分数表示。这样就制成了三列的网页。UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站


    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    来看看原始代码。可以直接使用:UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站


    UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    <div style="border:#000 solid 1px; padding:10px; width:500px">UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

      <div style="float:left; width:30%; border:#000 solid 1px; margin:5px; height:300px; background:#9C0; padding:5px;">这里是左半部分</div>UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

      <div style="border:#000 solid 1px; float:left;margin:5px;height:300px; background:#F30; width:26%;padding:5px;">这里是中间部分这里是中间部这里是中间部这里是中间部</div>UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

      <div style="float:right; width:30%; border:#000 solid 1px;margin:5px; height:300px; background:#099;padding:5px;">这里是右半部分</div>UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

      <div style="clear:both"></div>UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    </div>UDP文摘汇—专注快乐段子推荐,手机天天看最快最好的减压网站

    本文链接:http://www.wenzhaihui.com/wenzhaihui/ITwenzhang/2016-10-31/15160.html
    文章标签:网页制作 div教程
    顶 踩
发表评论 共有条评论
匿名发表 | 还没有注册?验证码: 看不清楚,点击刷新

网友热评
查看更多
本栏目最新发布信息
本栏目信息点击排行
文摘汇全站最新发布信息