作为一个WEB小萌新，自学了有一段时间，总是感觉停滞不前。最近反思中，想到前贤一句话：书读百遍其义自见。说到底，还是项目做的少，如果做多了，想必自然会得心应手。
利用HTML5+CSS3绘制HTML5的Logo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
以上为H5基本样式。
【项目分析】
1定位出整个页面背景区域，并实现背景光束
2定义logo样式，并画出盾牌的左半边
3画出盾牌的右半边
4画出浅橘色区域
5画出“5”的左半边
6画出“5”的右半边
7用色块遮盖多余的地方
8在盾牌上添加“HTML”字样
【代码实现】
先新建一个文件夹，创建一个CSS文件夹，内新建一个style.css的文件 。创建一个images文件夹，内放需要的图片，在根目录新建一个 index.html文件，用来存放html代码。
一、html架构（整体 html 代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="bg"><!-- logo最外层的盒子div -->
<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> <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> <!-- logo5的左半边灰色 -->
<div class="gray1"></div>
<div class="gray2"></div>
<div class="gray3"></div>
<div class="gray4"></div> <!-- logo5的右半边白色 -->
<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="data:images/HTML.png" alt="">
</div>
</div>
</body>
</html>
二、分步实现CSS样式
①背景
body{
margin:;padding:;
}
div{
position: absolute;
}
/*给整个容器设置样式*/
.bg{
width: 800px; height: 600px; background: #f2f2f2; overflow: hidden;
}
/*给beam元素设置样式*/
.beam{
width: 1600px; height: 20px; background: #fff; top: 290px; left: -400px;
}
效果：
②给所有的盾牌设置样式
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
background:#e15016;
}
.d_shield1{
left: 32px; width: 140px; height: 346px;
}
.d_shield2{
transform: skewX(5deg); /*变形：水平方向斜切5度*/ 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;
}
效果：
④右边灰色 “5” 部位
.gray1,.gray2,.gray3,.gray4{
background:#ebebeb;
}
.gray1{
height: 43px; width: 102px; left: 70px; top: 70px;
}
.gray2{
width: 46px; transform: skewX(5deg); height: 216px; top: 70px; left: 75px;
}
.gray3{
width: 95px; height: 43px; left: 77px; top: 156px;
}
.gray4{
width: 87px; height: 47px; top: 251px; transform: skewY(15deg); left: 87px;
}
效果：
⑤左边白色 “5” 部位
.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);
}
img{
position: fixed; top: 8px; left: 225px; width: 350px; height: 110px;
}
效果：
项目小结：
1.分步设置样式
2.CSS3属性 transform : rotate(10deg); 旋转 / scale(0.5) ; 缩放 / skew(10deg); 倾斜
【项目1-1】使用HTML5+CSS3绘制HTML5的logo的更多相关文章
-
css3绘制腾讯logo
CSS3绘制的腾讯LOGO,下边是对比图. 演示地址
-
HTML5+CSS3学习笔记（一）
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...
-
HTML5+CSS3学习笔记（一） 概述
HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就 ...
-
HTML5+CSS3静态页面项目-PayPaul的总结
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...
-
HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
-
HTML5+CSS3整体回顾
http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...
-
《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
-
html5/css3常考面试题
一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gra ...
-
零基础学 HTML5+CSS3 全彩版 明日科技 编著
第1章 基础知识 1.1 HTML概述 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.2 HTML文件的基本结构 1.2.1 HTML的基本结构 1.2.2 HTML的基本标记 1. ...
随机推荐
-
BPM配置故事之案例14-数据字典与数据联动
小明遇到了点麻烦,他昨天又收到了行政主管发来的邮件,要求把出差申请单改由H3 BPM进行,表单如下 行政主管的出差申请表 小明对表单进行了调整,设计出了一份适合在系统中使用的表单,但在"出差 ...
-
div span
无牵无挂,不带任何样式,因此经常使用div完成整体样式的构建,span完成细微样式的构建. div为块级元素,span为行内元素. 使用div完成显示区域的居中.左右浮动等,完成整体的样式布局,然后在 ...
-
python爬虫之爬取百度图片
##author:wuhao##爬取指定页码的图片,如果需要爬取某一类的所有图片,整体框架不变,但需要另作分析#import urllib.requestimport urllib.parseimpo ...
-
JustMock .NET单元测试利器（二）JustMock基础
JustMock API基础 Mock是Telerik®JustMock框架中的主要类.Mock用于创建实例和静态模拟,安排和验证行为. 本文将介绍 "Mock"的基本用法: 首先 ...
-
oracle安装教程
首先下载oracle 12c的安装包(一共有两个组成),下载完之后将两个压缩文件解压到同一个目录下 https://pan.baidu.com/s/1ydsClsHv04RAwaoGmHrFVQ ht ...
-
ubuntu12下subversion 1.6升级为1.8版本
应用场景是.android源码体积太大.我从服务器上svn co过来,速度很慢.服务器是ubuntu14版本,我工作的机器是ubuntu12版本,14上面svn版本是1.8.8,12上svn的版本是1 ...
-
团队项目（MVP------新能源无线充电管理网站）（总结）
经过了几个月的学习时间与团队的磨合以及一系列的困难之后,我们mvp小组一起完成了这个项目,内心也是十分激动和有成就感的.其实一开始基础并不好,很多都不知道,但是通过在慕课网上的学习以及老师严厉地督促下 ...
-
sql操作总结
SQL 语句的多表查询方式例如:按照 department_id 查询 employees(员工表)和 departments(部门表)的信息.方式一(通用型):SELECT ... FROM ... ...
-
java 路径的问题
在项目开发中会碰到各种各样的获取项目路径的一些问题: 1:java项目: 以获取 类路径下的mess.properties 为例来说明: 文件在项目中的位置: src/bz/beppe/demo/r ...
-
Scala工具库
1. Scala json解析库:https://github.com/json4s/json4s