banzhiyan1828
banzhiyan1828
2015-07-30 10:20
采纳率: 20%
浏览 1.7k

这样一个布局如何用HTML5和CSS3来显示?

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • showbo
    已采纳

    border-radius变为圆形,2个圆形嵌套

     <!doctype html>
    <style>
    body{background:#ccc}
    div.line{height:30px;background:#000;position:relative}
    div.line div{-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-khtml-border-radius:30px;background:#000;position:absolute;width:60px;height:60px;left:50%;margin-left:-30px;bottom:0}
    div.line div.orange{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-khtml-border-radius:20px;background-color:orange;width:40px;height:40px;left:50%;margin-left:-20px;bottom:10px}
    </style><br /><br /><br />
    <div class="line">
        <div></div>
        <div class="orange"></div>
    </div>
    
    
    点赞 2 评论
  • caozhy

    这算什么布局,无非就是上下两栏,某一栏的某侧边距上放一个背景图,中间的球。另一个背景为黑色。

    点赞 评论
  • june_ruikang
    june_ruikang 2015-07-30 11:18

    div背景颜色设成灰色,把黑色部分做成一条,放在下面,红色球外包一圈黑做成一张图,放在中间

    点赞 评论
  • function_cc
    function_cc 2015-07-31 04:05

    分层就好了,很简单的。把那个圆放到最上面一层

    点赞 评论

相关推荐