CSS制作华为mate8手机模型效果图
1.HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="phone"> <div class="body"></div> <div class="head"></div> <div class="cinema"></div> <div class="button"></div> <div class="screen"></div> <div class="probutton"></div> <div class="brobutton"></div> </div> <hr> <div class="RotateButton"></div> </body> </html>
2.CSS代码
*{ list-style: none; text-decoration: none; font-family: "微软雅黑 UI"; font-size: 14px; padding: 0; margin: 0; } body { padding: 20px; margin: 0 auto; } .phone { position: relative; } .body { width: 240px; height: 400px; background-color: #daa520; border-radius: 5%; } .screen { width: 240px; height: 340px; background-color: #444; position: absolute; top: 30px; left: 0; } .screen:before { content: ‘HUAWEI‘; font-style: italic; position: absolute; top: 160px; left: 100px; color: #FFFFFF; } .cinema { background-color: #444; border-radius: 50%; position: absolute; top: 10px; left: 60px; width: 10px; height: 10px; } .cinema:before { content: ‘‘; background-color: #444; border-radius: 50%; position: absolute; top: 0; left: 115px; width: 10px; height: 10px; } .cinema:after { content: ‘‘; background-color: #444; border-radius: 15px; position: absolute; top: 2px; left: 28px; width: 70px; height: 5px; } .button { border-radius: 0 10px 10px 0; width: 3px; height: 50px; position: absolute; top: 40px; left: 240px; background-color: #DAA520; } .button:before { content: ‘‘; border-radius: 0 10px 10px 0; width: 3px; height: 30px; position: absolute; top: 60px; left: 0; background-color: #DAA520; } .probutton { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #ffd700; position: absolute; top: 375px; left: 108px; } .probutton:before { content: ‘‘; width: 13px; height: 13px; border-radius: 20%; border: 2px solid #FFD700; position: absolute; top: -2px; left: -80px; } .probutton:after { content: ‘‘; border-style: solid; border-width: 12px; border-color: transparent #FFD700 transparent transparent; width: 0; height: 0; position: absolute; top: -4px; left: 74px; }
备注:伪类before、after配合使用,减少标签使用量。
Best wishes to you.
LaoYu
此文章为程序猿原创,特此声明。转载请注明出处,谢谢!
时间: 2024-08-04 10:16:39