HTML5-logo设计

制作html5的logo是由div块元素拼接而成，css样式控制每一块的样式和位置，为了体现代码的重要性采用style的内嵌式，页面拼接的步骤如下：

定位出整个页面的背景区域“bg”,并实现背景光束。
定义logo样式，并画出盾牌得分左半边
画出盾牌的右半边
画出浅橘色区域
画出5的左半边
画出5的右半边
用白色的区块遮挡多余的部分

***下面就是最后显示效果：*** 在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 logo</title>
    <style type="text/css">
        body{margin: 0;padding: 0;}
        div{position: absolute;}
        .bg{width: 800px;height: 600px;background: #f2f2f2;overflow: hidden;}
        .beam{width: 1600px;height: 20px;background: #fff;top: 290px;left: -400px;}
        .d_shield1,.d_shield2,.d_shield3,.d_shield5,.d_shield4,.d_shield6,.d_shield7{
            background: #e15016;}
        .d_shield1{left: 32px;width: 140px;height: 346px;}
        .d_shield2{transform: skewX(5deg);left: 16px;width: 100px;height: 346px;}
        .d_shield3{transform: skewY(15deg);top: 265px;left: 32px;width: 140px;height: 100px;}
        .d_shield4{left: 172px;width: 140px;height: 346px;}
        .d_shield5{transform: skewX(-5deg);left: 227px;width: 100px;height: 346px;}
        .d_shield6{transform: skewY(-15deg);top: 265px;left: 172px;width: 140px;height: 100px;}
        .d_shield7{height: 20px;top: 199px;width: 80px;left: 60px;}
        .l_shield1,.l_shield2,.l_shield3,.l_shield4{background: #ee6812;;}
        .l_shield1{left:172px;width: 140px;height: 346px;}
        .l_shield2{transform: skewX(-5deg);left: 227px;width: 100px;height: 363px;}
        .l_shield3{transform: skewY(-15deg);top: 282px;left: 172px;width: 138px;height: 100px;}
        .l_shield4{height: 43px;top: 113px;width: 100px;left: 180px;}
        .gray1,.gray2,.gray3,.gray4{background: #ebebeb;}
        .gray1{height: 43px;width: 102px;left:70px;top:70px;}
        .gray2{width: 46px;height: 216px;transform: skewX(5deg);top: 70px;left: 75px;}
        .gray3{width: 95px;height: 43px;left: 77px;top: 156px;}
        .gray4{width: 87px;height: 47px;left: 85px;top: 251px;transform: skewY(15deg);}
        .white1,.white2,.white3,.white4{background: #fff;}
        .white1{width: 102px;height: 43px;left: 172px;top: 70px;}
        .white2{width: 46px;height: 216px;transform: skewX(-5deg);top: 70px;left: 223px;}
        .white3{height: 43px;width: 95px;left: 172px;top: 156px;}
        .white4{height: 47px;width: 87px;left: 172px;top: 251px;transform: skewY(-15deg);}

    </style>
</head>
<body>
<div class="bg">
    <div class="beam" style="transform:rotate(5deg)"></div>
    <div class="beam" style="transform:rotate(15deg)"></div>
    <div class="beam" style="transform:rotate(25deg)"></div>
    <div class="beam" style="transform:rotate(35deg)"></div>
    <div class="beam" style="transform:rotate(45deg)"></div>
    <div class="beam" style="transform:rotate(55deg)"></div>
    <div class="beam" style="transform:rotate(65deg)"></div>
    <div class="beam" style="transform:rotate(75deg)"></div>
    <div class="beam" style="transform:rotate(85deg)"></div>
    <div class="beam" style="transform:rotate(95deg)"></div>
    <div class="beam" style="transform:rotate(105deg)"></div>
    <div class="beam" style="transform:rotate(115deg)"></div>
    <div class="beam" style="transform:rotate(125deg)"></div>
    <div class="beam" style="transform:rotate(135deg)"></div>
    <div class="beam" style="transform:rotate(145deg)"></div>
    <div class="beam" style="transform:rotate(165deg)"></div>
    <div class="beam" style="transform:rotate(175deg)"></div>

    <div class="logo" style="top:120px;left: 229px">
        <div class="d_shield1"></div>
        <div class="d_shield2"></div>
        <div class="d_shield3"></div>

        <div class="d_shield4"></div>
        <div class="d_shield5"></div>
        <div class="d_shield6"></div>

        <div style="transform: scale(0.82);left: 31px;top: 25px">
            <div class="l_shield1"></div>
            <div class="l_shield2"></div>
            <div class="l_shield3"></div>
        </div>

        <div class="gray1"></div>
        <div class="gray2"></div>
        <div class="gray3"></div>
        <div class="gray4"></div>

        <div class="white1"></div>
        <div class="white2"></div>
        <div class="white3"></div>
        <div class="white4"></div>

        <div class="d_shield7"></div>
        <div class="l_shield4"></div>


    </div>
</div>
</body>
</html>

洋毛

发布了16 篇原创文章 · 获赞 2 · 访问量 603

私信关注

猜你喜欢