作為一個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="images/HTML.png" alt=""> </div> </div> </body> </html>
二、分步實現CSS樣式
①背景
body{ margin: 0;padding: 0; } 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); 傾斜