使用HTML5+CSS3绘制HTML5的logo

最新推荐文章于 2022-01-22 19:46:59 发布
最新推荐文章于 2022-01-22 19:46:59 发布
阅读量1.8k 收藏 6
点赞数 7
分类专栏： HTML5 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxl513513/article/details/104634828
版权

一.了解HTML5 logo 的构造

1.对HTML5的logo进行分析：

在这里插入图片描述

2.logo的实现步骤：

图1：定位出整个页面的背景区域“bg”,并实现背景光束。
图2：定义logo样式，并画出盾牌的左半边。
图3：画出盾牌的右半边。
图4：画出浅橘色区域。
图5：画出“5”的左半边。
图6：画出“5”的右半边。
图7：用色块遮盖多余的部分。
图8：在盾牌上方添加“HTML”图片。

二：代码实现

1.HTML代码部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--网页标题为HTML5 logo-->
<title>HTML5 logo</title>
<!--链入式样式表，浏览器运行时会加载解析css/0101/目录下的logo.css文件-->
<link href="css/logo.css" type="text/css" rel="stylesheet">
</head>
<body>
   <!--这是HTML5 logo的最外层的盒子div，类名为bg-->
   <div class="bg" >
      <!--每一束白色光束的div盒子，行内样式style="transform:rotate(5deg)"用于设置div变形的样式，即旋转5度，这是CSS3新增的属性-->
      <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(155deg)"></div>
      <div class="white beam" style="transform:rotate(165deg)"></div>
      <div class="white beam" style="transform:rotate(175deg)"></div>
      <!--中心logo的div盒子类名为logo，设置行内样式为绝对定位，距离上边120px,距离左边229px-->
      <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盒子进行某种变形（CSS3新增属性），缩放为原来的0.82倍，并给这个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组成logo里面数字5的左半边灰色部分-->
         <div class="gray1" ></div>
         <div class="gray2" ></div>
         <div class="gray3" ></div>
         <div class="gray4" ></div>
         <!--以下四个div组成logo里面数字5的右半边白色部分-->
         <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>
         <img src="images/HTML.png">
      </div>
   </div>
</body>
</html>

2.CSS代码部分

/*第1单元 项目1-1  使用HTML5+CSS3绘制HTML5的logo*/
body{
    margin:0;   /*设置body的外边距为0*/
    padding:0;  /*设置body的内边距为0*/
}
div{
    position:absolute;/*给所有的div设置绝对定位*/
}
/*给类名为bg的元素设置宽、高、背景颜色*/
.bg{

    width:800px;
    height:600px;
    background:#f2f2f2;
    overflow:hidden;/*隐藏内容溢出*/
}
/*给类名为beam的元素设置宽、高、背景颜色、以及绝对定位*/
.beam{
    width:1600px;/*宽度为1600像素*/
    height:20px;/*高度为20像素*/
    background:#fff;/*背景为白色*/
    top:290px;/*绝对定位，距父元素上边线290像素*/
    left:-400px;/*绝对定位，距父元素左边线-400像素*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
    background:#e15016;
}
/*给类名为d_shield1的元素设置宽、高以及绝对定位*/
.d_shield1{
    left:32px;/*绝对定位，距父元素左边线32像素*/
    width:140px;
    height:346px;
}
.d_shield2{
    transform:skewx(5deg);/*变形（CSS3新增属性）：水平方向斜切5度*/
    left:16px;/*绝对定位，距父元素左边线16像素*/
    width:100px;
    height:346px;
}
.d_shield3{
    transform:skewy(15deg);/*变形：垂直方向斜切15度*/
    top:265px;/*绝对定位，距父元素上边线265像素*/
    left:32px;/*绝对定位，距父元素左边线32像素*/
    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的元素设置宽、高以及绝对定位*/
.gray1{
    height:43px;
    width:102px;
    left:70px;
    top:70px;
}
/*给类名为gray2的元素设置宽、高、斜切变形以及绝对定位*/
.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的四个元素都设置背景颜色为白色*/
.white1,.white2,.white3,.white4{
    background:#fff;
}
/*给类名为white1的元素设置宽、高以及绝对定位*/
.white1{
    width:102px;
    height:43px;
    left:172px;
    top:70px;
}
/*给类名为white2的元素设置宽、高、斜切变形以及绝对定位*/
.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);
}
/*给img标签设置宽、高以及固定定位*/
img {
    position: fixed;/*固定定位*/
    top: 8px;
    left: 225px;
    width: 350px;
    height: 110px;
}

3.素材图片

在这里插入图片描述

三：最终呈现的效果

在这里插入图片描述

lxl。。
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5+CSS3 精美登陆界面源码
01-19
3个很精美的登陆界面，全都是用HTML5+CSS3开发的，所以可能不适合低版本IE浏览器。大家可以下来看看，做的超级漂亮的。
HTML5之 LOGO绘制
qq_45614713的博客
03-19 489
H5之LOG 1.定义整个页面背景区域"bg",并设置背景光束旋转5度[style=“transform:rotate(5deg)”] 定义’logo’样式，画出盾牌的左半边，css样式- ->d_shield 统一设置背景颜色，并分别设置盾牌每个不同位置的区域大小 同理画出盾牌右半边,css样式–>l_shield 画出5，样式->grayz、white 用色块遮盖多余的...
HTML5 LOGO绘制
zzfr_llex的博客
03-04 332
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页的标题伟html5 logo--> <title>HTML5 logo</title> <!--键入样式表，浏览器运行时会加载解析css/logo.css...
项目1-1使用html5+css3绘制html5的logo
weixin_43909464的博客
03-07 306
项目分析 ①定义出整个页面的背景区域“bg”，并且实现背景光束 ②定义logo的样式，并画出盾牌的左半边 ③画出盾牌的右半边 ④画出浅橘色区域 ⑤画出5的左半边 ⑥画出5的右半边 ⑦用色块遮盖多余的部分 ⑧在盾牌上方，添加HTML图片 第一步 ...
【项目1-1】使用HTML5+CSS3绘制HTML5的logo
weixin_30802171的博客
06-30 572
作为一个WEB小萌新，自学了有一段时间，总是感觉停滞不前。最近反思中，想到前贤一句话：书读百遍其义自见。说到底，还是项目做的少，如果做多了，想必自然会得心应手。 利用HTML5+CSS3绘制HTML5的Logo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...
HTML5网页设计基础——LOGO的制作
shengming_tutou的博客
01-22 4119
案例效果图： 代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title>Google的LOGO设计</title> <style> strong{ font-size: 100px;/*设置所有strong标签的文字大小为：100px*/ } .blue{ color:#3174f0; /*给类名为。blue的标
HTML5 logo源代码
Shmily_ox的博客
03-04 4003
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 logo</title> <style> body{ margin:0; p...
HTML5-logo设计
夏天De风ly
03-03 814
制作html5的logo是由div块元素拼接而成，css样式控制每一块的样式和位置，为了体现代码的重要性采用style的内嵌式，页面拼接的步骤如下： 定位出整个页面的背景区域“bg”,并实现背景光束。 定义logo样式，并画出盾牌得分左半边 画出盾牌的右半边 画出浅橘色区域 画出5的左半边 画出5的右半边 用白色的区块遮挡多余的部分 ***下面就是最后显示效果：*** 代码如下： <!D...
制作文字logo
昕昕子的博客
09-10 830
制作文字logo实验步骤代码效果 实验步骤 打开VSCode，在自己的文件夹中新建网页文件，文件名logo.html，输入 ！，按Tab键自动生成H5网页框架标签。 将title标签内容改为“文字Logo”，在内添加6个标签，分别设置标签内容和class以及id值 在自己的文件夹中新建文件夹css，在css中新建文件logo.css，在logo.html的标签中引入css文件 在logo.css中设置标签选择器、类选择器和id选择器的属性和值，两个文件分别保存后在浏览器查看效果 代码 04logo.ht
使用Dreamweaver/利用HTML5/CSS/制作一个简单的文字logo
No1banana的博客
01-22 2459
一、制作一个简单的logo 1. 结构与样式分析 首先我们根据logo的图片分析logo的效果，该logo由6个字母组成。在使用“数码测色计”测出logo的颜色，这里我们测出logo所用到的颜色为（十六进制）： .blue{color:#4384F4} .green{color:#34A753} .red{color:#EA4336} .yellow{color: #FBBD06} 字号为100像素、粗体 2.打开Dreamweaver2021，按command+N新建一个格式为HTML5的html文
HTML5+CSS3期末大作业——城市简介源码
05-05
HTML5+CSS3期末大作业——城市简介源码
HTML5+CSS3绘制锯齿状的矩形
09-28
主要教大家如何利用HTML5 CSS3绘制出锯齿状的矩形，绘制图形时可以用canvas标签，感兴趣的小伙伴们可以参考一下
html5+css3+JS代码
05-22
《精通html5+css3+JavaScript页面设计》代码
html5+css3笔记资料
02-14
html5+css3笔记资料
用HTML5编写课程表
lxl513513的博客
03-22 3373
代码部分： <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>课表</title> <style> td{ width: 13%; text-align: center; } td:first-child{ height: ...
初学HTML5——画布(canvas)
lxl513513的博客
04-04 3276
一.canvas介绍 canvas为画布， 使用canvas便可以轻松的在网页上绘制图形，文字，图片等。 二.画布的使用 1.创建画布： HTML5中提供了<canvas>标签，使用<canvas>标签可以在网页中创建一个矩形区域的画布： <canvas id="cavsElem" width=“400” height="300"> 你的浏览器不支持canva...
用HTML编写各式各样的图形
lxl513513的博客
03-22 3268
一.圆环 1.代码部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #one{ width: 400px; height: 400px; background-colo...
初学HTML5——CSS3圆角边框
lxl513513的博客
03-27 2931
border-radius属性 CSS3的圆角边框实际上是矩形的四个角分别做内切圆，然后通过内切圆的半径来控制圆角的弧度 CSS3的圆角边框使用border-radius属性来实现， 1.基本语法如下所示： border-radius：1-4 length|% / 1-4 length|%； 2.属性解释 length：用于设置对象的圆角半径长度，不可为负值。 ...
初学HTML5——响应式栅格系统
lxl513513的博客
04-20 1989
一.栅格系统： 在网页制作中，栅格系统就是用固定的格子进行网页布局，是一种清晰，工整的设计风格 二.弹性盒布局： 弹性盒分为容器，子元素，轴（横轴，纵轴） 弹性盒改进了块模块，既不使用浮动，也不会在弹性盒容器与其内容之间合并外边距，是一种非常灵活的布局方法。 1.display display用于指定弹性盒的容器，其值可以为flex；如果为行内元素，值为inline-flex. 2.flex-...
关于元旦节日的HTML5+css3
最新发布
12-12
很抱歉，根据您提供的引用内容，似乎没有关于元旦节日的HTML5+CSS3的内容。但是，我可以为您提供一些关于春节的HTML5+CSS3的内容。 以下是HTML5+CSS3实现春节主题的一些方法和步骤： 1.使用CSS3实现动画效果 ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值