首页 > 代码库 > html(三)

html(三)

2024-08-23 18:31:32   220人阅读

今天自己画了个安卓机器人,之前听徐大大讲过一次,查手册去动手的时候其实发觉不是很难,这种规则的图像还是很好画的,主要是用<div>标签和<span>标签去做的,通过CSS添加样式,感觉display这个属性蛮有用的,transform用起来也很方便.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>网页标题</title>
    <meta name="keywords" content="关键字列表" />
    <meta name="description" content="网页描述" />
    <link rel="stylesheet" type="text/css" href="" />
    <style type="text/css">
        .box{
            width:600px;
            margin:50px auto;
        }
        /*头部*/
        .head{
            width:200px;
            height:100px;
            background-color:#A4CA39;
            margin:0px auto;
            border-radius:100px 100px 0 0;
        }
        .span1{
            display:block;
            width:24px;
            height:24px;
            border-radius:12px;
            transform:translate(40px,42px);
            background-color:#fff;

        }
        .span2{
            display:block;
            width:24px;
            height:24px;
            border-radius:12px;
            transform:translate(133px,17px);
            background-color:#fff;

        }
        /*身体*/
        .middle{
            width:200px;
            height:200px;
            margin:10px auto 0px;
            background-color:#A4CA39;
            border-radius:0px 0px 27px 27px;
        }
        .box .middle .span3{
            display:block;
            width:40px;
            height:160px;
            border-radius:45px;
            background-color:#A4CA39;
            transform:translate(-52px,14px);
        }
        .box .middle .span4{
            display:block;
            width:40px;
            height:160px;
            border-radius:45px;
            background-color:#A4CA39;
            transform:translate(209px,-143px);
        }
        /*脚部*/
        .box .span5{
            display:block;
            width:50px;
            height:100px;
            border-radius:0px 0px 30px 30px;
            transform:translate(231px,0px);
            background-color:#A4CA39;
        }
        .box .span6{
            display:block;
            width:50px;
            height:100px;
            border-radius:0px 0px 30px 30px;
            transform:translate(321px,-100px);
            background-color:#A4CA39;
        }
    </style>
    <script type="text/javascript"></script>
</head>
<body>
<div class="box">
    <div class="head">
        <span class="span1"></span>
        <span class="span2"></span>
    </div>
    <div class="middle">
        <span class="span3"></span>
        <span class="span4"></span>
    </div>
    <span class="span5"></span>
    <span class="span6"></span>
</body>
</html>

my robot:

技术分享

html(三)


联系
我们