HTML5-logo设计

最新推荐文章于 2022-07-16 12:10:05 发布

洋毛

最新推荐文章于 2022-07-16 12:10:05 发布

阅读量826

点赞数

本文链接：https://blog.csdn.net/weixin_45968014/article/details/104630490

版权

这篇博客介绍了如何使用HTML5和CSS设计一个logo。通过div元素拼接和内嵌式CSS样式，详细阐述了从背景光束到盾牌、数字5等各个部分的创建过程，最终展示了完整的HTML5 logo效果。

摘要由CSDN通过智能技术生成

制作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_

最低0.47元/天解锁文章

洋毛

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5-logo设计

制作html5的logo是由div块元素拼接而成，css样式控制每一块的样式和位置，为了体现代码的重要性采用style的内嵌式，页面拼接的步骤如下：定位出整个页面的背景区域“bg”,并实现背景光束。定义logo样式，并画出盾牌得分左半边画出盾牌的右半边画出浅橘色区域画出5的左半边画出5的右半边用白色的区块遮挡多余的部分***下面就是最后显示效果：***代码如下：<!D...
复制链接

扫一扫