整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          學會用HTML-flex布局制作漂亮的網頁

          、摘 要

          (OF作品展示)

          OF之前介紹了用python實現數據可視化、數據分析及一些小項目,但基本都是后端的知識。想要做一個好看的小系統,我們還要學一些前端的知識,今天OF將講解如何用pycharm(全棧開發不錯的工具)做一張好看的網頁,以后我們就可以自己開發網頁/網站放到互聯網上。

          主要內容:網頁前端布局

          適用人群:Python初學者,前端初學者

          準備軟件:pycharm

          二、pycharm操作說明

          1. 創建項目

          1) 下載完成pycharm, 點擊file-New Project...

          2) 按下圖步驟創建一個項目,目前我們選擇Pure python即可,以后我們可以學習用Django/flask等框架來做完整的系統

          2. 創建HTML文件

          1)在創建的項目空白處鼠標右鍵-New-HTML File

          2)輸入英文的網頁名字,盡量不要輸入中文/特殊字符

          3. HTML格式說明

          當雙擊打開我們創建后的HTML文件,大家會看到下面的界面

          三、網頁設計

          1. 草圖繪制

          在開始開發網頁前,我們需要自己設計下想要把網頁做成什么樣,為了節省成本OF都是自己設計的頁面樣式,可以手繪,也可以在PPT上畫。

          2. css名字定義

          我們先學習一個比較簡單的布局如下圖,大家可以看到下圖已經畫出了我們需要添加的內容,要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住,否則Taylor圖片與文字將會是左右的關系,而不是上下

          四、網頁開發

          1. body部分

          根據上述的css名字定義,先填充<body>內的代碼,那么我們就完成一半的工作了,代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
          </head>
          <body>
          <div id="intro">
              <p class="peo">人物介紹</p>
          </div>
          <div id="pic1">
              <div class="bord">
                  <img class="img" src="pic/Taylor.png"/>
                  <p class="word">Taylor</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/yan.png"/>
                  <p class="word">東</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/song.png"/>
                  <p class="word">喬</p>
              </div>
          </div>
          </body>
          </html>

          2. 網頁測試

          1)鼠標移到代碼處,在右上角我們會看到一排瀏覽器,我們點擊其中一個運行

          2)目前看到的網頁內容從上到下顯示

          3. head部分

          首先我們簡要了解下flex布局,大家可以看到下圖中#main的style樣式中display:flex,在body部分將3個顏色內容框在<div id="main">中,運行結果是3個顏色的內容橫向展示了,而不是上下

          1)那么我們先從“人物介紹”的布局開始,“人物介紹”居中展現(用flex中justify-content:center),而且下面有一條黑線,OF準備用border樣式來實現,所以在<div id=intro>里另加了個<div class=peo>,代碼如下:

          (注:style中的#main對應body中的id=main, .main對應class=main)

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  #intro {
                      display: -webkit-flex; /* Safari */
                      display: flex;
                      justify-content: center;
                  }
                  .peo {
                      max-width: 10rem;
                      border-bottom: 0.2rem solid #000000;
                      font-family: sans-serif;
                      font-size: 1.5rem;
                      color: #0070C0;
                      line-height: 3rem;
                  }
              </style>
          </head>
          <body>
          <div id="intro">
              <p class="peo">人物介紹</p>
          </div>
          <div id="pic1">
              <div class="bord">
                  <img class="img" src="pic/Taylor.png"/>
                  <p class="word">Taylor</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/yan.png"/>
                  <p class="word">東</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/song.png"/>
                  <p class="word">喬</p>
              </div>
          </div>
          </body>
          </html>

          運行結果:

          2)圖片部分是3個<div class=bord>橫向展示,所以要在框住它們的<div id=pic1>樣式中設置flex布局,在<style>里加入以下代碼:

          #pic1 {
              display: -webkit-flex; /* Safari */
              display: flex;
              justify-content: center;
          }

          運行結果:

          3)圖片之間靠太近,圖片大小不一致,文字沒居中,我們在<style>里加入以下代碼:

          .bord{
              padding: 1rem 2rem;
          }
          
          
          .img {
              border: 0.2rem solid #e3e3e3;
              max-width: 15rem;
              height: 22rem;
          }
          
          
          .word {
              text-align: center;
          }

          運行結果:

          五、總 結

          今天我們學會了flex布局,今后所有的網頁排版都可以實現了,祝愿大家都有所收獲,完整的代碼如下:

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <title>Title</title>
              <style>
                  #intro {
                      display: -webkit-flex; /* Safari */
                      display: flex;
                      justify-content: center;
          
          
                  }
          
                  .peo {
                      max-width: 10rem;
                      border-bottom: 0.2rem solid #000000;
                      font-family: sans-serif;
                      font-size: 1.5rem;
                      color: #0070C0;
                      line-height: 3rem;
                  }
          
                  #pic1 {
                      display: -webkit-flex; /* Safari */
                      display: flex;
                      justify-content: center;
                  }
          
                  .bord{
                      padding: 1rem 2rem;
                  }
          
                  .img {
                      border: 0.2rem solid #e3e3e3;
                      max-width: 15rem;
                      height: 22rem;
                  }
          
                  .word {
                      text-align: center;
                  }
              </style>
          </head>
          <body>
          <div id="intro">
              <p class="peo">人物介紹</p>
          </div>
          <div id="pic1">
              <div class="bord">
                  <img class="img" src="pic/Taylor.png"/>
                  <p class="word">Taylor</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/yan.png"/>
                  <p class="word">東</p>
              </div>
              <div class="bord">
                  <img class="img" src="pic/song.png"/>
                  <p class="word">喬</p>
              </div>
          </div>
          </body>
          </html>

          今天的知識比較基礎但非常實用,每天學會一個小技能,積少成多,以后就能成為大神。如果大家對網頁上的實現有什么不懂的,盡請留言,OF一定會一一解答的。

          是否好奇網頁制作么,只要打開查看元素就能夠看到網頁的代碼啦。

          <html>

          <head>

          </head>

          <body>

          <h1>靜夜思</h1>

          床前明月光,疑似地上霜。<br>

          舉頭望明月,低頭思故鄉

          </body>

          </html>

          這就是一個簡單的格式,網頁中屬于一個完整的存在,html在此相當于靈魂被識別,head是標簽相當于頭部,body也是身體事網頁顯示內容的地方。

          代碼寫出來一定要有結尾,這表示規范,當然也可以不用這么做,只是不會被太菜的瀏覽器識別。而且隨著版本的更新內容也更多了。

          新建文本文件,代碼復制后保存為.html的格式,雙擊點開就會被le瀏覽器檢測就能看到了,試試效果吧。

          序列表

          經過之前關于表格、表單的學習后,再來學習列表,就顯得非常的簡單和容易理解了。

          學習是構建知識體系的過程,沒有形成體系的知識學習再多也是碎片,是很難形成技能或深刻理解的,因此,如果您是零基礎的初學者,第一次看我的教程,如果時間允許的話,請務必從目錄中找尋第一篇,循序漸進的學習。

          列表分為有序列表、無序列表和定義列表,同時列表之中還能嵌套列表,和表格非常相似。

          首先介紹有序列表

          要用<ol></ol>標簽告訴瀏覽器這里是列表。

          然后在里面添加<li></li>標簽,在這個標簽中添加內容即可。

          示例代碼如下

          <p>我喜歡的水果</p>
          <ol>
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ol>

          大家可以把它放到一個新的html框架中看看效果。

          完整代碼如下:

          <!DOCTYPE HTML>
            <html>
            <head> 
            <title>列表</title>
            </head> 
            <body>
            <h>有序列表</h>
            <p>我喜歡的水果</p>
            <ol> 
              <li>葡萄</li> 
              <li>西瓜</li> 
              <li>蘋果</li> 
              <li>桃子</li>
              </ol>
            </body> 
            </html>

          頁面效果如下:

          通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式,默認的是數字,大家看一下不同的type值的不同效果吧!示例代碼如下:

          <ol type="A">
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ol>
          <ol type="a"> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
            、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

          頁面效果如下:

          下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。

          step1.點擊"輸入方式"

          step2.點擊"特殊符號"后選擇數字序號,找到羅馬數字即可

          除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值;"

          示例代碼如下:(使用日語中的片假名表示序號)

          <ol style="list-style-type:hiragana;"> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ol>

          頁面效果如圖所示:

          是不是很有趣,這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明,大家自己課下去嘗試,這個列表中既有有序列表的值也有無序列表的值。

          如圖:

          資料來自w3school

          無序列表

          無序列表與有序列表的區別在于最外層的標簽,它的寫法是這樣的:<ul></ul>。

          有一個記憶的小技巧,有序的英文是order,故有序列表為order list(列表),縮寫為ol。

          無序為unorder,無序列表為unorder list,縮寫為ul。

          無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。

          示例代碼如下:

          <h>無序列表</h>
          <p>我喜歡的水果</p>
          <ul> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ul>
          <ul type="disc"> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ul>
          <ul type="circle"> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ul>
          <ul type="square"> 
            <li>葡萄</li> 
            <li>西瓜</li> 
            <li>蘋果</li> 
            <li>桃子</li>
          </ul>

          頁面效果如下:

          通過圖片我們可知,無序列表默認的列表標識就是type="disc"。

          style屬性的話大家自己試試吧,這里就不啰嗦了。

          定義列表

          這個列表比較特殊,也比較不常見,主要就是顯示名詞定義的。

          首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表,和<ol>或<ul>一樣。

          定義的英文是definition,定義列表就是definition list,縮寫是dl。

          下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title(標題)。

          與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe(描述)。

          示例代碼如下:

          <dl> 
            <dt>計算機</dt> 
            <dd>用來計算的儀器 ... ...</dd> 
            <dt>顯示器</dt> 
            <dd>以視覺方式顯示信息的裝置 ... ...</dd>
          </dl>

          頁面效果如下:

          今天的內容結束了!

          列表嵌套列表的測試大家自己試試吧,學到現在,相信你們都可以完成了!

          如果您喜歡我的教程請關注我,點贊也能讓我充滿動力!

          如果您有任何疑問請給我留言,如有問題或錯誤請予以斧正!

          HTML完整學習目錄

          HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作

          HTML是什么?——零基礎自學網頁制作

          第一個HTML頁面如何寫?——零基礎自學網頁制作

          HTML頁面中head標簽有啥用?——零基礎自學網頁制作

          初識meta標簽與SEO——零基礎自學網頁制作

          HTML中的元素使用方法1——零基礎自學網頁制作

          HTML中的元素使用方法2——零基礎自學網頁制作

          HTML元素中的屬性1——零基礎自學網頁制作

          HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作

          使用HTML添加表格1(基本元素)——零基礎自學網頁制作

          使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作

          使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作

          使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作

          16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

          HTML中的塊級元素與內聯元素——零基礎自學網頁制作

          初識HTML中的<div>塊元素——零基礎自學網頁制作

          在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

          封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作

          HTML表單元素初識1——零基礎自學網頁制作

          HTML表單元素初識2——零基礎自學網頁制作

          HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作

          HTML表單4(form的action、method屬性)——零基礎自學網頁制作

          HTML列表制作講解——零基礎自學網頁制作

          為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

          音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

          HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作


          主站蜘蛛池模板: 中文字幕亚洲一区| 成人精品一区二区电影| 久久一区二区精品| 国产午夜三级一区二区三 | 无码人妻精品一区二区三区东京热 | 人妻激情偷乱视频一区二区三区| 伊人无码精品久久一区二区| 一区二区三区在线观看视频| 无码欧精品亚洲日韩一区| 精彩视频一区二区| 国产福利一区二区三区在线视频 | 欧美日韩精品一区二区在线观看 | 日本免费一区二区三区 | 国产一区二区三区夜色| 极品尤物一区二区三区| 亚洲永久无码3D动漫一区| 国产视频一区二区| 无码国产精成人午夜视频一区二区| 深夜福利一区二区| 国产日本亚洲一区二区三区| 亚洲线精品一区二区三区影音先锋| 日韩三级一区二区| 国产日韩精品视频一区二区三区 | 国产精品视频一区二区三区无码 | asmr国产一区在线| 国产怡春院无码一区二区| 日本精品一区二区三区在线观看| 精品一区二区三区无码视频| 国产精品一区二区久久精品涩爱| 久久国产视频一区| 精品一区二区在线观看| 一区二区高清在线观看| 国产福利在线观看一区二区| 无码人妻精品一区二区三区99性 | 国产成人一区二区三区电影网站| 青青青国产精品一区二区| 一区二区视频传媒有限公司| 国产韩国精品一区二区三区| 一区二区三区日本视频| 亚洲一区二区三区在线视频| 美女视频一区二区|