亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 6
粉絲 0
評論 0
訪問量 5335
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
實(shí)例演示模態(tài)框
似水流年
原創(chuàng)
556人瀏覽過

源碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>實(shí)例演示模態(tài)框</title>
  8.   <style>
  9.     @import 'static/media.css';
  10.     @import 'static/modal.css';
  11.   </style>
  12. </head>
  13. <body>
  14. <header>
  15.   <h1>似水流年の博客</h1>
  16.   <button  onclick="showModal()">登陸</button>
  17. </header>
  18. <nav>
  19.   <a href="">首頁</a>
  20.   <a href="">日記</a>
  21.   <a href="">資訊</a>
  22.   <a href="">資料</a>
  23. </nav>
  24. <section>
  25.   <article>
  26.     <h2>文章標(biāo)題</h2>
  27.   </article>
  28.   <aside>
  29.     <dt>分類</dt>
  30.     <dd>日記</dd>
  31.     <dd>資訊</dd>
  32.     <dd>資料</dd>
  33.   </aside>
  34. </section>
  35. <footer>
  36.   <div class="contact">
  37.     <a class="contact" href="">關(guān)于我們</a><a href="">版權(quán)聲明</a><a href="">聯(lián)系我們</a>
  38.   </div>
  39.   <div class="line"></div>
  40.   <div class="copyright">
  41.     <p>copyright &nbsp;? &nbsp; 2022 &nbsp; 似水流年</p>
  42.   </div>
  43. </footer>
  44. <!-- 模態(tài)框 -->
  45.     <div class="modal">
  46.       <!-- 1. 半透明的遮罩 -->
  47.       <div class="modal-bg" onclick="closeModal()"></div>
  48.       <!-- 2. 彈層表單 -->
  49.       <form action="" class="modal-form">
  50.           <fieldset style="display: grid; gap: 1em">
  51.               <legend>用戶登錄</legend>
  52.               <input type="email" name="email" placeholder="user@email.com" />
  53.               <input type="password" name="password" placeholder="不少于6位" />
  54.               <button>登錄</button>
  55.           </fieldset>
  56.       </form>
  57.   </div>
  58. <script src="static/modal.js" ></script>
  59. </body>
  60. </html>

media.css樣式：

  1. <style>
  2.   *{margin: 0;padding: 0;box-sizing: border-box;}
  3. /* 媒體尺寸小于767的顯示樣式 */
  4. @media (max-width:767px) {
  5.   .header{
  6.     background-color: #ccc;
  7.   }
  8.   /* 未寫完 */
  9. }
  10. /* 媒體尺寸大于768的顯示樣式 */
  11. @media  (min-width:768px){
  12. header{
  13.  background-color: indigo;
  14.  padding: 0.5em 1em;
  15.  display: flex;
  17. }
  18. header h1{
  19.   color: #fff;
  20.   font-weight:lighter;
  21.   letter-spacing: 2px;
  22.   /* 字間距 */
  23.   text-shadow: 1px 1px 1px #fff;
  24.   /* 字體陰影 向左距離，向下的距離，模糊的距離，顏色 */
  25. }
  26. header button{
  27.   color: #000;
  28.   margin-left: auto;
  29.   background-color: bisque;
  30.   font-size: 15px;
  31.   width: 4em;
  32.   height: 2em;
  33.   border: none;
  34.   border-radius: 0.3em;
  35.   cursor: pointer;
  36. }
  37. header button:hover{
  38.   color: #fff;
  39.   margin-left: auto;
  40.   background-color: bisque;
  41.   font-size: 15px;
  42.   width: 4em;
  43.   height: 2em;
  44.   border: none;
  45.   border-radius: 0.3em;
  46.   cursor: pointer;
  47.   box-shadow: 0 0 0.2em #fff;
  48. }
  49. nav{
  50. background-color: rgb(53, 6, 53);
  51. height: 2.5em;
  52. line-height: 2.5em;
  53. font-size: 2em;
  54. }
  55. nav>a:nth-of-type(-n+3){
  56. border-right: 1px solid #fff;
  58. }
  59. nav a{
  60.   color: #fff;
  61.   padding: 0 0.5em 0.5em ;
  62.   text-decoration: none;
  63. }
  64. nav a:hover{
  65.   color: #fff;
  66.   padding: 0 0.5em 0.5em ;
  67.   background-color: darkorchid;
  68. }
  69. section{
  70. display: flex;
  71. }
  72. article{
  73. border: 1px solid #ccc;
  74. margin: 1em 1em;
  75. border-radius: 0.5em;
  76. padding: 1em ;
  77. width: 70%;
  78. }
  79. article>h2{
  80.   color: rgb(4, 71, 216);
  81.   border-bottom: 1px dashed #ccc;
  82.   margin-bottom: 5em;
  83. }
  84. aside{
  85.   margin:1em 1em 1em 0.5em;
  86.   width: 20%;
  87.   border: 1px dashed #ccc;
  88.   border-radius: 0.5em;
  89. }
  90. aside>dt{
  91.   font-weight: bold;
  92.   border-bottom: 1px dashed #ccc;
  93. }
  94. aside>dd{
  95.   padding: 0.1em;
  96. }
  97. footer{
  98.   background-color: indigo;
  99.   padding: 0.1em 0.2em;
  100.   color: #fff;
  101.   font-size: 16px;
  102. }
  103. .contact{
  104.   margin: 0 auto;
  105. }
  106. .contact a{
  107.   color: #fff;
  108.   text-decoration: none;
  109.   letter-spacing: 0.1em;
  110.   padding-left: 0.5em;
  111. }
  112. .line{
  113.   margin: 0.5em 0em;
  114.   height: 1px;
  115.   background-color: rgb(166, 51, 177);
  116. }
  117. .copyright{
  118.   margin: 0 auto;
  119. }
  121. }
  123. /* 模塊框表單部分樣式是復(fù)制的老師的 */
  125. /* 模態(tài)框 */
  127. .modal .modal-form fieldset {
  128.   height: 15.5em;
  129.   background-color: #dd5a57;
  130.   border: none;
  131.   padding: 2em 3em;
  132.   box-shadow: 0 0 5px #888;
  133. }
  136. /* 模態(tài)框表單標(biāo)題 */
  138. .modal .modal-form fieldset legend {
  139.   padding: 7px 1.5em;
  140.   background-color: rgb(4, 71, 216);
  141.   color: white;
  142. }
  144. .modal .modal-form fieldset input {
  145.   height: 3em;
  146.   padding-left: 1em;
  147.   outline: none;
  148.   border: 1px solid #ddd;
  149.   font-size: 14px;
  150. }
  153. /* :focus: 表單控件,獲取焦點(diǎn)時(shí)的樣式 */
  155. .modal .modal-form fieldset input:focus {
  156.   box-shadow: 0 0 8px #888;
  157.   border: none;
  158. }
  160. .modal .modal-form fieldset button {
  161.   background-color: rgb(4, 71, 216);
  162.   color: white;
  163.   border: none;
  164.   height: 3em;
  165.   font-size: 16px;
  166.   height: 2.5em;
  167. }
  169. .modal .modal-form fieldset button:hover {
  170.   background-color: coral;
  171.   cursor: pointer;
  172. }
  173. /* 定位 */
  174. .modal .modal-form {
  175.   position: fixed;
  176.   top: 10em;
  177.   left: 38em;
  178.   right: 38em;
  179. }
  180. /* 遮罩 */
  181. .modal .modal-bg {
  182.   position: fixed;
  183.   /* 坐標(biāo)全部清0,請定位到四個(gè)頂點(diǎn) */
  184.   top: 0;
  185.   left: 0;
  186.   right: 0;
  187.   bottom: 0;
  188.   background-color: rgb(0, 0, 0, 0.5);
  189. }
  190. .modal {
  191.   display: none;
  192. }
  193. </style>

預(yù)覽圖：

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)