Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲综合国产一区二区三区,女人被男人躁得好爽免费视频,国产资源在线免费观看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          學(xué)會用HTML-flex布局制作漂亮的網(wǎng)頁
          
        
           
          
	
	
          
		
                        
          、摘 要
          （OF作品展示）
          OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識，今天OF將講解如何用pycharm（全棧開發(fā)不錯的工具）做一張好看的網(wǎng)頁，以后我們就可以自己開發(fā)網(wǎng)頁/網(wǎng)站放到互聯(lián)網(wǎng)上。
          主要內(nèi)容：網(wǎng)頁前端布局
          適用人群：Python初學(xué)者，前端初學(xué)者
          準(zhǔn)備軟件：pycharm
          二、pycharm操作說明
          1. 創(chuàng)建項(xiàng)目
          1) 下載完成pycharm, 點(diǎn)擊file-New Project...
          2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來做完整的系統(tǒng)
          2. 創(chuàng)建HTML文件
          1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File
          2）輸入英文的網(wǎng)頁名字，盡量不要輸入中文/特殊字符
          3. HTML格式說明
          當(dāng)雙擊打開我們創(chuàng)建后的HTML文件，大家會看到下面的界面
          三、網(wǎng)頁設(shè)計(jì)
          1. 草圖繪制
          在開始開發(fā)網(wǎng)頁前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁面樣式，可以手繪，也可以在PPT上畫。
          2. css名字定義
          我們先學(xué)習(xí)一個(gè)比較簡單的布局如下圖，大家可以看到下圖已經(jīng)畫出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會是左右的關(guān)系，而不是上下
          四、網(wǎng)頁開發(fā)
          1. body部分
          根據(jù)上述的css名字定義，先填充<body>內(nèi)的代碼，那么我們就完成一半的工作了，代碼如下：
          <!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. 網(wǎng)頁測試
          1）鼠標(biāo)移到代碼處，在右上角我們會看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行
          2）目前看到的網(wǎng)頁內(nèi)容從上到下顯示
          3. head部分
          首先我們簡要了解下flex布局，大家可以看到下圖中#main的style樣式中display:flex，在body部分將3個(gè)顏色內(nèi)容框在<div id="main">中，運(yùn)行結(jié)果是3個(gè)顏色的內(nèi)容橫向展示了，而不是上下
          1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：
          (注：style中的#main對應(yīng)body中的id=main, .main對應(yīng)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>
          運(yùn)行結(jié)果：
          2）圖片部分是3個(gè)<div class=bord>橫向展示，所以要在框住它們的<div id=pic1>樣式中設(shè)置flex布局，在<style>里加入以下代碼：
          #pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}
          運(yùn)行結(jié)果：
          3）圖片之間靠太近，圖片大小不一致，文字沒居中，我們在<style>里加入以下代碼：
          .bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}
          運(yùn)行結(jié)果：
          五、總 結(jié)
          今天我們學(xué)會了flex布局，今后所有的網(wǎng)頁排版都可以實(shí)現(xiàn)了，祝愿大家都有所收獲，完整的代碼如下：
          <!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>
          今天的知識比較基礎(chǔ)但非常實(shí)用，每天學(xué)會一個(gè)小技能，積少成多，以后就能成為大神。如果大家對網(wǎng)頁上的實(shí)現(xiàn)有什么不懂的，盡請留言，OF一定會一一解答的。
          是否好奇網(wǎng)頁制作么，只要打開查看元素就能夠看到網(wǎng)頁的代碼啦。
          <html>
          <head>
          </head>
          <body>
          <h1>靜夜思</h1>
          床前明月光，疑似地上霜。<br>
          舉頭望明月，低頭思故鄉(xiāng)
          </body>
          </html>
          這就是一個(gè)簡單的格式，網(wǎng)頁中屬于一個(gè)完整的存在，html在此相當(dāng)于靈魂被識別，head是標(biāo)簽相當(dāng)于頭部，body也是身體事網(wǎng)頁顯示內(nèi)容的地方。
          代碼寫出來一定要有結(jié)尾，這表示規(guī)范，當(dāng)然也可以不用這么做，只是不會被太菜的瀏覽器識別。而且隨著版本的更新內(nèi)容也更多了。
          新建文本文件，代碼復(fù)制后保存為.html的格式，雙擊點(diǎn)開就會被le瀏覽器檢測就能看到了，試試效果吧。
          序列表
          經(jīng)過之前關(guān)于表格、表單的學(xué)習(xí)后，再來學(xué)習(xí)列表，就顯得非常的簡單和容易理解了。
          學(xué)習(xí)是構(gòu)建知識體系的過程，沒有形成體系的知識學(xué)習(xí)再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎(chǔ)的初學(xué)者，第一次看我的教程，如果時(shí)間允許的話，請務(wù)必從目錄中找尋第一篇，循序漸進(jìn)的學(xué)習(xí)。
          列表分為有序列表、無序列表和定義列表，同時(shí)列表之中還能嵌套列表，和表格非常相似。
          首先介紹有序列表
          要用<ol></ol>標(biāo)簽告訴瀏覽器這里是列表。
          然后在里面添加<li></li>標(biāo)簽，在這個(gè)標(biāo)簽中添加內(nèi)容即可。
          示例代碼如下
          <p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
          大家可以把它放到一個(gè)新的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>標(biāo)簽中的type屬性我們可以改變序號顯示的樣式，默認(rèn)的是數(shù)字，大家看一下不同的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>
          頁面效果如下：
          下面給大家介紹一下搜狗輸入法中如何輸入羅馬數(shù)字。
          step1.點(diǎn)擊"輸入方式"
          step2.點(diǎn)擊"特殊符號"后選擇數(shù)字序號，找到羅馬數(shù)字即可
          除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標(biāo)簽中修改style屬性可以直接調(diào)用這些css中的屬性。寫法是style="list-style-type:屬性值；"
          示例代碼如下：(使用日語中的片假名表示序號)
          <ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
          頁面效果如圖所示：
          是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個(gè)列表中既有有序列表的值也有無序列表的值。
          如圖：
          資料來自w3school
          無序列表
          無序列表與有序列表的區(qū)別在于最外層的標(biāo)簽，它的寫法是這樣的：<ul></ul>。
          有一個(gè)記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。
          無序?yàn)閡norder，無序列表為unorder list，縮寫為ul。
          無序列表<ul>標(biāo)簽的type屬性用來控制列表前的標(biāo)記顯示演示。
          示例代碼如下：
          <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>
          頁面效果如下：
          通過圖片我們可知，無序列表默認(rèn)的列表標(biāo)識就是type="disc"。
          style屬性的話大家自己試試吧，這里就不啰嗦了。
          定義列表
          這個(gè)列表比較特殊，也比較不常見，主要就是顯示名詞定義的。
          首先要寫入<dl></dl>標(biāo)簽。這是告訴瀏覽器這里是個(gè)定義列表，和<ol>或<ul>一樣。
          定義的英文是definition，定義列表就是definition list，縮寫是dl。
          下面在<dl></dl>標(biāo)簽中間寫入定義的名稱<dt></dt>,即definition title（標(biāo)題）。
          與定義名稱標(biāo)簽并列的是定義描述<dd></dd>,即definition describe（描述）。
          示例代碼如下：
          <dl> 
  <dt>計(jì)算機(jī)</dt> 
  <dd>用來計(jì)算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
          頁面效果如下：
          今天的內(nèi)容結(jié)束了！
          列表嵌套列表的測試大家自己試試吧，學(xué)到現(xiàn)在，相信你們都可以完成了！
          如果您喜歡我的教程請關(guān)注我，點(diǎn)贊也能讓我充滿動力！
          如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！
          HTML完整學(xué)習(xí)目錄
          HTML序章（學(xué)習(xí)目的、對象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          第一個(gè)HTML頁面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML頁面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          初識meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          初識HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          封閉在家學(xué)網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單元素初識1——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單元素初識2——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁制作
          HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁制作
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产亚洲一区二区手机在线观看
|
日韩在线视频不卡一区二区三区|
国产主播福利一区二区|
在线精品亚洲一区二区|
国产亚洲福利精品一区二区|
中文精品一区二区三区四区|
无码日韩精品一区二区三区免费
|
国产激情一区二区三区小说
|
99久久精品国产一区二区成人|
一区三区三区不卡|
亚洲AV无码一区二区乱子仑|
国产福利一区二区三区在线视频
|
成人在线观看一区|
亚洲国产一区二区三区在线观看|
无码精品人妻一区二区三区免费看
|
色婷婷综合久久久久中文一区二区
|
久久久无码精品国产一区|
亚洲精品伦理熟女国产一区二区|
一区二区三区免费视频播放器|
天天躁日日躁狠狠躁一区|
日本一区二区三区日本免费|
日韩成人一区ftp在线播放|
国产一区二区三区精品久久呦|
国产在线观看一区二区三区四区
|
精品无码成人片一区二区98|
国产精品免费一区二区三区四区|
波多野结衣免费一区视频|
国产免费一区二区三区在线观看|
亚洲啪啪综合AV一区|
国产成人精品一区二区三区免费
|
波多野结衣一区二区三区88|
国产亚洲综合精品一区二区三区|
人成精品视频三区二区一区
|
亚洲综合色自拍一区|
日韩av无码一区二区三区|
日韩毛片基地一区二区三区|
福利国产微拍广场一区视频在线
|
亚洲国产系列一区二区三区|
久久青青草原一区二区|
国产一区二区三区在线观看免费
|
无码人妻一区二区三区免费看|