一個小小的轉盤 【HTML+CSS+JS】

 

放假去哪玩?

敲代碼 敲代碼 敲代碼
敲代碼 出去玩 敲代碼
敲代碼 敲代碼 敲代碼

 

 

 

 

<p>&nbsp;</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>
代碼:
相關文章
相關標籤/搜索