生活随笔
收集整理的這篇文章主要介紹了
WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
[html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?style="width:100%;height:200px;margin-top:500px;location:center;border:none;background-color:red;position:absolute">??</div>??<div?style="width:16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;style=clear:both;position:absolute">??</div>??</body>??</html>?? [html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?style="width:100%;height:100px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:100%;height:100px;margin-top:400px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:16%;height:1000px;margin-left:42%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute">??</div>??</body>??</html>?? [html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?style="width:100%;height:65px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:100%;height:65px;margin-top:435px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:100%;height:65px;margin-top:370px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:8%;height:1000px;margin-left:42%;margin-right:50%;margin-top:0px;border:none;background-color:red;position:absolute"></div>??<div?style="width:8%;height:1000px;margin-left:49%;margin-right:42%;margin-top:0px;border:none;background-color:red;position:absolute"></div>??</body>??</html>?? 法二：
具體思想為：兩個，用DIV創建一個矩形，然后復制一個，以中心點旋轉90度，兩個合并；三個，用DIV創建一個矩形，然后復制一個，以中心點旋轉90度，兩個合并，然后在外面包一個空的DIV盒子；五個，紅十字標志由五個正方形組成，代表五大洲，畫一個正方形，然后復制成五個，再將五個正方形擺放好位置，組成紅十字形狀，圈選五個正方形之后，選擇焊接選項，再填充紅色（C：0，M：100，Y：100，K：0），去除邊框顏色即可。
?
[html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>??</body>??</html>?? [html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?type="margin:auto">??<div?style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute"></div>??<div?style="width:1000px;height:200px;margin-left:180px;margin-top:500px;location:center;border:none;background-color:red;position:absolute;transform:rotate(90deg);"></div>??</div>??</body>??</html>?? [html]?view plain
?copy <!DOCTYPE?html>??<html>??<body>??<div?style="width:200px;height:200px;margin-left:500px;margin-top:100px;border:none;background-color:red;position:absolute"></div>??<div?style="width:200px;height:200px;margin-left:300px;margin-top:300px;border:none;background-color:red;position:absolute"></div>??<div?style="width:200px;height:200px;margin-left:500px;margin-top:300px;border:none;background-color:red;position:absolute"></div>??<div?style="width:200px;height:200px;margin-left:700px;margin-top:300px;border:none;background-color:red;position:absolute"></div>??<div?style="width:200px;height:200px;margin-left:500px;margin-top:500px;border:none;background-color:red;position:absolute"></div>??</body>??</html>??
轉載于:https://www.cnblogs.com/yangguoe/p/8467887.html
總結
以上是生活随笔為你收集整理的WEB前端面试题 分别使用2个、3个、5个DIV画出一个大的红十字的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
