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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198508
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
iframe練習(xí)：小后臺demo和CSS入門（選擇器的優(yōu)先級）
李東亞1??3????12?
原創(chuàng)
1020人瀏覽過

小后臺demo練習(xí)：

1、代碼：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>我的后臺布局</title>
  8.     <style>
  9.         *{
  10.             padding: 0;
  11.             margin: 0;
  12.             text-decoration: none;
  13.             color:black;
  14.             box-sizing: border-box;
  15.         }
  16.         header{
  17.             width: 100%;
  18.             height: 60px;
  19.             background-color: #2C3E50;
  20.             line-height: 60px;
  21.             padding-left: 20px;
  22.             font-size: 20px;
  23.             /* color:white; */
  24.         }
  25.         header > span {
  26.             color:white;
  27.         }
  28.         .main{
  29.             width: 100%;
  30.             position: absolute;
  31.             top:60px;
  32.             left:0;
  33.             bottom: 0;
  34.         }
  35.         .main > aside{
  36.             text-align: center;
  37.             width: 140px;
  38.             float:left;
  39.             background-color: #66CDAA;
  40.             position: absolute;
  41.             top:0;
  42.             bottom:0;    
  44.         }
  45.         .main > aside > h3{
  46.             color:white;
  47.             margin: 15px auto;
  48.         }
  49.         .main > aside > ul{
  50.             list-style: none;
  51.         }
  52.         .main > aside > ul >li{
  53.             display: block;
  54.             width: 100%;
  55.             height: 40px;
  56.             line-height: 40px;
  57.             background-color: #42B983;
  58.             margin: 4px auto;
  60.         }
  61.         .main > aside > ul > li > a:hover{
  62.             color:white;
  63.         }
  64.         .main > aside > ul > li > a:active{
  65.             color:#D3D3D3;
  66.         }
  69.         .main > main{
  70.             background-color: #90EE90;
  71.             position: absolute;
  72.             top:0;
  73.             left:140px;
  74.             right: 0;
  75.             bottom:0;    
  77.         }
  78.         .main > main > iframe{
  79.             width: 100%;
  80.             height: 100%;        
  82.         }
  83.     </style>
  84. </head>
  85. <body>
  86.     <header>
  87.         <span>XXXX后臺管理</span>
  88.     </header>
  89.     <div class="main">
  90.         <aside>
  91.             <h3>功能菜單</h3>
  92.             <ul>
  93.                 <li><a href="http://www.baidu.com" target="backpage">百度首頁</a></li>
  94.                 <li><a href="https://www.zhongyequan.cn" target="backpage">種業(yè)圈</a></li>
  95.                 <li><a href="http://weibo.com" target="backpage">微博首頁</a></li>
  96.                 <!-- <li><a  target="backpage">項目四</a></li> -->
  97.                 <li><a href="https://j.map.baidu.com/aa/7uE" target="backpage">聯(lián)系我們</a></li>
  98.             </ul>
  99.         </aside>
  100.         <main>
  101.             <iframe srcdoc="<div style='text-align:center;position:relative;top:300px;font-size:38px;color:white;'> XXXX后臺管理界面</div>" name="backpage" frameborder="0"></iframe>
  102.         </main>
  103.     </div>
  104. </body>
  105. </html>

2、代碼運行結(jié)果：
小后臺demo
3、相關(guān)知識點（iframe標(biāo)簽相關(guān)屬性）：

  • name=”windows”(類似于id具有唯一性，配合a標(biāo)簽（target=”windows”）使用)
  • frameborder=”n”（設(shè)置iframe邊框）
  • width=”” height=””（設(shè)置iframe寬和高）
  • src=”url”（設(shè)置iframe 默認的url頁面）
  • srcdoc=”html內(nèi)容”（iframe，在沒有url是默認顯示的內(nèi)容支持html 標(biāo)簽）
  • scrolling=”auto|yes|no”（設(shè)置iframe顯示內(nèi)容超過ifrme大小時是否顯示滾動條）

CSS入門

1、CSS使用的的三種方式：

  • 元素標(biāo)簽內(nèi)使用（行內(nèi)樣式）：通過sytle屬性來設(shè)置
  • 引入外部CSS樣式文件：通過link標(biāo)簽來引入；例如：<link rel="stylesheet" href="文件路徑地址"/>
  • html文檔直接使用：通過style標(biāo)簽來寫入

2、CSS基本選擇（標(biāo)簽選擇器，類選擇器，id選擇器)的選擇器：

  1.     ***元素內(nèi)CSS>id>類>標(biāo)簽***
  2.     通過`!important`來設(shè)置可以把優(yōu)先級提到最高 
  3.     標(biāo)簽[]屬性選擇器
批改老師：天蓬老師天蓬老師

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(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
隨時隨地碎片化學(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+教程免費學(xué)