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

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問量 198438
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
12月29日練習(xí)：php中文網(wǎng)footer案例（組件footer）
李東亞1??3????12?
原創(chuàng)
1257人瀏覽過

練習(xí)一：
php中文網(wǎng)public_footer組件：
1、html代碼：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="public_footer.css">
  6.     <title>Title</title>
  7. </head>
  8. <body>
  9.     <div class="public-footer">
  10.         <div class="nav">
  11.             <a href=""><span>鏈接1</span></a>
  12.             <a href=""><span>鏈接2</span></a>
  13.             <a href=""><span>鏈接3</span></a>
  14.             <a href=""><span>鏈接4</span></a>
  15.             <a href=""><span>鏈接5</span></a>
  16.             <a href=""><span>鏈接6</span></a>
  17.             <a href=""><span>鏈接7</span></a>
  18.         </div>
  19.         <div class="logo">
  20.             <a href=""><img src="../../../images/logo.png" alt=""></a>
  21.         </div>
  22.         <div class="info">
  23.             <p>2019 fengniao.com. All rights reserved . 安徽鬧著玩（無聊網(wǎng)）版權(quán)所有</p>
  24.             <p>皖I(lǐng)CP證150110號(hào) 京ICP備14323013號(hào)-2 皖公網(wǎng)安備110108024357788號(hào)</p>
  25.             <p>違法和不良信息舉報(bào)電話: 0551-1234567 舉報(bào)郵箱: admin@baidu.com</p>
  26.         </div>
  27.         <div>
  28.             <p>關(guān)注公眾號(hào)</p>
  29.             <img src="../../../static/images/erwei-code.png" alt="">
  30.         </div>
  31.     </div>
  32. </body>
  33. </html>

2、css代碼：

  1. @import url(../../public_reset.css);
  3. .public-footer {
  4.     min-width: 800px;
  5.     max-width: 1200px;
  6.     height: 200px;
  7.     margin: 0 auto;
  8.     outline:1px dashed red;
  9.     color:#ffffff;
  10.     background-color: #404040;
  11.     display: grid;
  12.     grid-template-columns: 1.5fr 4.5fr 4fr;
  13.     grid-tempalte-rows: 2fr 8fr;
  16. }
  17. .public-footer > .nav {
  18.     grid-column:1/3;
  19.     margin-left: 30px;
  20.     align-self: center;
  22. }
  23. .public-footer > .nav > a {
  24.     margin-left:20px ;
  25.     color:#ffffff;
  26. }
  27. .public-footer > .logo {
  28.     grid-row:2/3;
  29.     margin-top: 21px;
  30.     /*align-self: end;*/
  31.     justify-self: end;
  32. }
  33. .public-footer > .logo  img {
  34.     width: 140px;
  35.     height: 60px;
  37. }
  38. .public-footer > .info {
  39.     grid-column: 2/3;
  40.     grid-row:2/3;
  41.     justify-self: center;
  44. }
  45. .public-footer > .info > p {
  46.     margin-top: 15px;
  47. }
  48. .public-footer > :last-child {
  49.     grid-column: 3/4;
  50.     grid-row:1/3;
  51.     align-self: center;
  52.     margin-left: 20px;
  53. }
  54. .public-footer > :last-child > p {
  55.     margin-left: 24px;
  56. }
  57. .public-footer > :last-child > img {
  58.     width: 120px;
  59.     margin-top: 10px;
  61. }

3、效果圖：在火狐瀏覽器中打開網(wǎng)格線

總結(jié)：
1、補(bǔ)充網(wǎng)格線定位練習(xí)；從1開始，整數(shù)遞增，反向 從-1開始 負(fù)數(shù)遞減
(1)劃網(wǎng)格線：grid-template-columns/rows:
屬性值：px; fr; 函數(shù)：repeat(1,1fr)——(1:重復(fù)次數(shù)，重復(fù)內(nèi)容）,minmax(100px,150px)伸縮空間
(2)網(wǎng)格線定位：grid-row/column-strat/end:1;
簡(jiǎn)寫：grid-row/column: start/end ; (start網(wǎng)格定位起點(diǎn)線-end定位終止線)
2、網(wǎng)格中單元格對(duì)齊方法：是否旨在有空隙的時(shí)候有作用？
3、單元格內(nèi)容對(duì)其：grid容器屬性和項(xiàng)目屬性易混淆：
容器屬性：
(1)align/justify（水平垂直）-items/content(內(nèi)容、單元格):
屬性值：start center end;
(2)簡(jiǎn)寫：place-items/content（內(nèi)容/單元格）：align justify;
項(xiàng)目屬性：align/justify-self:
屬性值：start center end :
4、網(wǎng)格間隙很少用：
（1）grid-column/row-gap: 屬性值：px;
(2) 簡(jiǎn)寫grid-gap: row column /gap

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

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

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