HTML5的loge.html

       <!-- 盾牌左 --><div class="loge" 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组成loge5的左边 --><div class="gray1"></div><div class="gray2"></div><div class="gray3"></div><div class="gray4"></div><!-- 下面四个div组成loge的右边 --><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="HTML.png"/></div></div>
</body>

CSS文件：

body{
margin: 0;
padding: 0;
}

div{
position: absolute;
}

.bg{
width: 800px;
height: 600px;
background-color: #f2f2f2;
overflow: hidden;

}

.bean{
width: 1600px;
height: 20px;
background-color: #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);
left: 16px;
width: 100px;
height: 346px;
}

.d_shield3{
transform: skewY(15deg);
top: 265px;
height: 100px;
left: 32px;
width: 140px;
}

.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);
}

img{
position: fixed;
top: 8px;
left: 225px;
width: 350px;
height: 110ox;
}

HTML5的loge.html相关推荐

html5代码转换为视频,HTML5中的视频代码详解
摘要腾兴网为您分享:HTML5中的视频代码详解,智学网,云闪付,易推广,小红书等软件知识,以及360win10,流量魔盒,fitbit,上港商城,安卓2.3.7,全民惠,五年级下册英语单词表图片,t ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
HTML5调用手机的Datepicker(日期选择器)
HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证,包含了如下新的输入类型: email url number range Date pickers (date, month, ...
android h5弹窗,Android嵌套html5页面中alert 弹出框问题
最近项目中遇到一个头疼的问题,那就是在安卓里嵌套html5的时候发现alert弹出框出现了问题那就是弹出的时候会出现串来自http://xxxxx 网页的提示然后下面出来具体的弹出信息,还有更奇 ...
HTML5 本地文件操作之FileSystemAPI整理（二）
一.文件目录操作 1.DirectoryEntry对象属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
Notepad++支持jQuery、html5、css3
Notepad++里的代码提示文件是以XML文件存放于目录 ....\Notepad++\plugins\APIs\下的. 将这三个文件:html.xml, css.xml, javascript.x ...
使用按钮控制HTML5背景音乐开关
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
[重磅] 让HTML5达到原生的体验系列之中的一个避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
html5 FileReader初识
使用html5的FileReader可以实现多媒体文件的预览功能,代码如下: <html> <head> <script type="text/javascri ...

HTML5的loge.html

HTML5的loge.html相关推荐

最新文章

热门文章