34-jQuery電影排行榜之頁(yè)面布局

lt;!DOCTYPE html>

<html>

<head>

<title>34-jQuery電影排行榜之頁(yè)面布局</title>

margin: 0;

padding: 0;

}

.box{

width: 300px;

height: 450px;

margin: 50px auto;

border: #000000 solid 1px;

}

.box>h1{

font-size: 20px;

line-height: 35px; /*設(shè)置行間的距離（行高）。*/

color: deeppink;

padding-left: 10px;

border: #000000 dashed 1px; /* 邊框虛線黑色 1像素 */

}

ul>li{

list-style: none; /*去除li標(biāo)簽前面的點(diǎn)*/

padding: 5px 10px;

border: #000000 dashed 1px; /* 邊框虛線黑色 1像素 */

}

ul>li:nth-child(-n+3) span{ /* 這句話只選擇前三個(gè)span標(biāo)簽比較特別，，需要了解一種方法*/

background: deeppink;

}

ul>li>span{

display: inline-block; /*在元素之后不添加換行符，因此該元素可以位于其他元素旁邊*/

width: 20px;

height: 20px;

background: #ccc;

text-align: center; /* 就是把HTML元素中的文本排列到中間的意思*/

line-height: 20px; /* 行高，也可以定義行間距用line-height只對(duì)文字起作用對(duì)于圖片時(shí)失效 */

margin-right: 10px;

}

.content{

overflow: hidden; /* 給一個(gè)盒子定義了一個(gè)顯示范圍。內(nèi)部的物體。只有在這個(gè)范圍內(nèi)部才會(huì)被顯示。不然就被隱藏。 */

margin-top: 5px;

}

.content>img{

width: 80px;

height: 120px;

float: left; /* 左浮動(dòng) */

}

.content>p{

width: 180px;

height: 120px;

float: right; /* 右浮動(dòng) */

font-size: 12px;

line-height: 20px; /* 行高，也可以定義行間距 */

}

</style>

$(function(){

})

</script>

</head>

<body>

<h1>電影排行榜</h1>

<ul>

<li><span>1</span>電影名稱

<p>戰(zhàn)神再現(xiàn) 甲賀忍發(fā)帖赤影生死格斗忍者小英雄《RED SHADOW 赤影》（2001年）改編自橫山光輝的漫畫(huà)作品《仮面の忍者赤影》劇情簡(jiǎn)介：為了世界的光明，赤影成為了影子武士。在戰(zhàn)國(guó)時(shí)期的騷亂中，赤影擔(dān)負(fù)著成為影子武士一族首領(lǐng)的命運(yùn)</p>

</div>

</li>

</ul>

</div>

</body>

</html>

、畫(huà)板

影視音樂(lè)類網(wǎng)站一般以界面龐大、結(jié)構(gòu)復(fù)雜（<ul>、<ol>、<dl>標(biāo)簽應(yīng)用最多的場(chǎng)合）為主。該網(wǎng)站主要分為以下幾大塊：搜索模塊、熱門(mén)影片模塊、頻道模塊。搜索模塊一般包含導(dǎo)航和影片搜索等部分；熱門(mén)影片模塊可以從最受歡迎影片、新片、電影排行、最新熱門(mén)影評(píng)等方面劃分；頻道模塊可根據(jù)適應(yīng)人群劃分多個(gè)頻道：電影頻道、動(dòng)漫頻道、電視劇頻道、綜藝頻道等。根據(jù)預(yù)設(shè)的這些模塊，初步在稿紙上畫(huà)出頁(yè)面布局的草圖，如下圖所示。

畫(huà)板最終設(shè)計(jì)圖

二、設(shè)計(jì)圖

通過(guò)畫(huà)板對(duì)將要做的頁(yè)面分析以及畫(huà)板設(shè)計(jì)圖中的各個(gè)欄目區(qū)域的劃分有一個(gè)大概的了解，對(duì)整個(gè)頁(yè)面大體有一個(gè)輪廓。現(xiàn)在需要將各個(gè)欄目的具體內(nèi)容通過(guò)Photoshop設(shè)計(jì)出來(lái)，在后面的重構(gòu)中將給出欄目劃分的HTML結(jié)構(gòu)，在布局中將給出頁(yè)面的大體結(jié)構(gòu)以及具體內(nèi)容編寫(xiě)結(jié)構(gòu)的實(shí)現(xiàn)過(guò)程，如下圖所示。

設(shè)計(jì)模塊劃分圖

三、切圖

使用Photoshop將設(shè)計(jì)圖以下部分切出來(lái)，因限于篇幅，本章只講解設(shè)計(jì)圖的一部分，重復(fù)部分將不再講解，故使用以下圖片，這些圖片作為背景圖或作為插入元素至網(wǎng)頁(yè)，如下圖所示。

切圖

四：重構(gòu)

根據(jù)設(shè)計(jì)模塊劃分圖的區(qū)域劃分，標(biāo)記出6個(gè)大區(qū)域（在這里有重復(fù)區(qū)域，即結(jié)構(gòu)相同或相似，內(nèi)容不同的區(qū)域），在編寫(xiě)HTML結(jié)構(gòu)時(shí)，整個(gè)網(wǎng)站需要設(shè)計(jì)的樣式包括3個(gè)大區(qū)域：A區(qū)、F區(qū)，余下幾個(gè)區(qū)域作為一個(gè)大區(qū)（不妨命名為M區(qū)）。在后面講解中也將按照該思路講解。M區(qū)包含B區(qū)、C區(qū)、D區(qū)、E區(qū)，M區(qū)定義在火狐瀏覽器下居中，并設(shè)置下外邊距，沒(méi)有其他CSS屬性設(shè)置。

五：布局

、摘要

（OF作品展示）

OF之前介紹了用python實(shí)現(xiàn)數(shù)據(jù)可視化、數(shù)據(jù)分析及一些小項(xiàng)目，但基本都是后端的知識(shí)。想要做一個(gè)好看的小系統(tǒng)，我們還要學(xué)一些前端的知識(shí)，今天OF將講解如何用pycharm（全棧開(kāi)發(fā)不錯(cuò)的工具）做一張好看的網(wǎng)頁(yè)，以后我們就可以自己開(kāi)發(fā)網(wǎng)頁(yè)/網(wǎng)站放到互聯(lián)網(wǎng)上。

主要內(nèi)容：網(wǎng)頁(yè)前端布局

適用人群：Python初學(xué)者，前端初學(xué)者

準(zhǔn)備軟件：pycharm

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

1) 下載完成pycharm, 點(diǎn)擊file-New Project...

2) 按下圖步驟創(chuàng)建一個(gè)項(xiàng)目，目前我們選擇Pure python即可，以后我們可以學(xué)習(xí)用Django/flask等框架來(lái)做完整的系統(tǒng)

2. 創(chuàng)建HTML文件

1）在創(chuàng)建的項(xiàng)目空白處鼠標(biāo)右鍵-New-HTML File

2）輸入英文的網(wǎng)頁(yè)名字，盡量不要輸入中文/特殊字符

3. HTML格式說(shuō)明

當(dāng)雙擊打開(kāi)我們創(chuàng)建后的HTML文件，大家會(huì)看到下面的界面

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

在開(kāi)始開(kāi)發(fā)網(wǎng)頁(yè)前，我們需要自己設(shè)計(jì)下想要把網(wǎng)頁(yè)做成什么樣，為了節(jié)省成本OF都是自己設(shè)計(jì)的頁(yè)面樣式，可以手繪，也可以在PPT上畫(huà)。

2. css名字定義

我們先學(xué)習(xí)一個(gè)比較簡(jiǎn)單的布局如下圖，大家可以看到下圖已經(jīng)畫(huà)出了我們需要添加的內(nèi)容，要注意的地方是比如Taylor的圖片和文字一定要用<div class=bord>框住，否則Taylor圖片與文字將會(huì)是左右的關(guān)系，而不是上下

四、網(wǎng)頁(yè)開(kāi)發(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)頁(yè)測(cè)試

1）鼠標(biāo)移到代碼處，在右上角我們會(huì)看到一排瀏覽器，我們點(diǎn)擊其中一個(gè)運(yùn)行

2）目前看到的網(wǎng)頁(yè)內(nèi)容從上到下顯示

3. head部分

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

1）那么我們先從“人物介紹”的布局開(kāi)始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準(zhǔn)備用border樣式來(lái)實(shí)現(xiàn)，所以在<div id=intro>里另加了個(gè)<div class=peo>，代碼如下：

(注：style中的#main對(duì)應(yīng)body中的id=main, .main對(duì)應(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）圖片之間靠太近，圖片大小不一致，文字沒(méi)居中，我們?cè)?lt;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é)會(huì)了flex布局，今后所有的網(wǎng)頁(yè)排版都可以實(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>

今天的知識(shí)比較基礎(chǔ)但非常實(shí)用，每天學(xué)會(huì)一個(gè)小技能，積少成多，以后就能成為大神。如果大家對(duì)網(wǎng)頁(yè)上的實(shí)現(xiàn)有什么不懂的，盡請(qǐng)留言，OF一定會(huì)一一解答的。

在線咨詢

上一篇：設(shè)置div高度等于動(dòng)態(tài)寬度
下一篇：網(wǎng)頁(yè)編程：如何在HTML中插入一條水平線？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

34-jQuery電影排行榜之頁(yè)面布局

、摘 要

二、pycharm操作說(shuō)明

1. 創(chuàng)建項(xiàng)目

2. 創(chuàng)建HTML文件

3. HTML格式說(shuō)明

三、網(wǎng)頁(yè)設(shè)計(jì)

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁(yè)開(kāi)發(fā)

1. body部分

2. 網(wǎng)頁(yè)測(cè)試

3. head部分

五、總 結(jié)

您的項(xiàng)目需求

、摘要

五、總結(jié)