<p> </p> <style><!-- /*初始邊距 爲0*/ body { margin: 0; padding: 0; } /*設置h1左邊界*/ h1 { margin-left: 300px; } /* 每行dvi的寬度*/ .div1 { width: 400px; height: 100px; } /*設置每一個span*/ .left1 { text-align: center; /* 內容居中*/ line-height: 100px; /* 字體行高*/ width: 120px; /*高度*/ height: 120px;/*寬度*/ border: 0.3px solid beige; /*邊框*/ background-color: #b2b2b2; /*背景色*/ float: left; /*向左浮動*/ } /*設置包含按鈕的DIV */ .button1 { margin-left: 270px; margin-bottom: 20px; } /*設置按鈕*/ .button1 button { width: 100px; height: 30px; background-color: #00a2d4; border-radius: 60%; margin-right: 20px; } /*清除按鈕點擊後的焦點樣式*/ button:focus{ outline: none; } /*設置大DIV的屬性*/ #ddiv { width: 360px; height: 360px; margin-left: 200px; padding: -2px; background-color: #00a2d4; overflow: hidden; /*設置溢出效果爲:內容被剪切,並不可見*/ border-radius: 20%; /* 實現圓角框的效果*/ } --></style> <h1>放假去哪玩?</h1> <div class="button1"><button id="b1"> 開始</button> <button id="b2"> 中止</button></div> <div id="ddiv"> <div class="div1"><span class="left1">敲代碼</span> <span class="left1">敲代碼</span> <span class="left1">敲代碼</span></div> <div class="div1"><span class="left1">敲代碼</span> <span class="left1">出去玩</span> <span class="left1">敲代碼</span></div> <div class="div1"><span class="left1">敲代碼</span> <span class="left1">敲代碼</span> <span class="left1">敲代碼</span></div> </div> <script type="text/javascript" src="https://blog-static.cnblogs.com/files/tyler-bog/aaa.js"></script>