當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记

發布時間：2024/2/28 HTML 23 豆豆

生活随笔收集整理的這篇文章主要介紹了【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

頁面展示
技術要點
代碼實現
html代碼
- CSS代碼
- 用到的圖片

頁面展示

本項目將使用HTML5+CSS3繪制出HTML5的logo，頁面效果如下所示。

技術要點

HTML5新特性

HTML5基本語法

CSS3新特性

在HTML中引入樣式

代碼實現

html代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />  <title>HTML5 logo</title>  <link href="css/logo.css" type="text/css" rel="stylesheet"> </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(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><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><img src="images/HTML.png"></div></div> </body> </html>

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

用到的圖片

整理不易，有用就點個贊吧！

總結

以上是生活随笔為你收集整理的【附全部代码+图片】使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解弹性盒布局（fiex-box）—
下一篇：一站式服务！图片+代码-构建移动版旅游网