Html5之实现九宫格案例

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html>

         <head>

                   <meta charset="UTF-8" >

                   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale = 1, user-scalable=no"/>

                   <title></title>

                   <style type="text/css">

                            * {

                            margin: 0;

                            padding: 0;

                            }

                            div.wrap {

                                                        padding: 3% 0 0 3%;

                            }

                            div.square {

                                                        float: left;

                                                        background: #ffa500;

                                                        width: 30%;

                                                        padding: 30% 0 0 0;

                                                        margin: 0 3% 3% 0;

                                                        border-radius: 4%;

                            }

                   </style>

                  

         </head>

         <body>

         <div class="wrap">

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

                   <div class="square"></div>

         </div>

         </body>


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1803.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • HTML
  • head
  • Doctype
  • !