34-jQuery電影排行榜之頁面布局

lt;!DOCTYPE html>

<html>

<head>

<title>34-jQuery電影排行榜之頁面布局</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; /*設置行間的距離（行高）。*/

color: deeppink;

padding-left: 10px;

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

}

ul>li{

list-style: none; /*去除li標簽前面的點*/

padding: 5px 10px;

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

}

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

background: deeppink;

}

ul>li>span{

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

width: 20px;

height: 20px;

background: #ccc;

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

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

margin-right: 10px;

}

.content{

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

margin-top: 5px;

}

.content>img{

width: 80px;

height: 120px;

float: left; /* 左浮動 */

}

.content>p{

width: 180px;

height: 120px;

float: right; /* 右浮動 */

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年）改編自橫山光輝的漫畫作品《仮面の忍者赤影》劇情簡介：為了世界的光明，赤影成為了影子武士。在戰(zhàn)國時期的騷亂中，赤影擔負著成為影子武士一族首領的命運</p>

</div>

</li>

</ul>

</div>

</body>

</html>

、畫板

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

畫板最終設計圖

二、設計圖

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

設計模塊劃分圖

三、切圖

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

切圖

四：重構

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

五：布局

、摘要

（OF作品展示）

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

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

適用人群：Python初學者，前端初學者

準備軟件：pycharm

二、pycharm操作說明

1. 創(chuàng)建項目

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

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

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

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

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

3. HTML格式說明

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

三、網(wǎng)頁設計

1. 草圖繪制

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

2. css名字定義

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

四、網(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）鼠標移到代碼處，在右上角我們會看到一排瀏覽器，我們點擊其中一個運行

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

3. head部分

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

1）那么我們先從“人物介紹”的布局開始，“人物介紹”居中展現(xiàn)（用flex中justify-content:center），而且下面有一條黑線，OF準備用border樣式來實現(xiàn)，所以在<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布局，今后所有的網(wǎng)頁排版都可以實現(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>

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

34-jQuery電影排行榜之頁面布局

、摘 要

二、pycharm操作說明

1. 創(chuàng)建項目

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

3. HTML格式說明

三、網(wǎng)頁設計

1. 草圖繪制

2. css名字定義

四、網(wǎng)頁開發(fā)

1. body部分

2. 網(wǎng)頁測試

3. head部分

五、總 結

您的項目需求

、摘要

五、總結