整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
lt;!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>34-jQuery电影排行榜之页面布局</title>
<style type="text/css">
*{
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; /* 给一个盒子定义了一个显示范围。内部的物体。只有在这个范围内部才会被显示。不然就被隐藏。 */
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>
<script src="../static/js/jquery-3.6.0.js"></script>
<script>
$(function(){
})
</script>
</head>
<body>
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>电影名称
<div class="content">
<img src="../static/image/电影.jpg" >
<p>战神再现 甲贺忍发帖 赤影 生死格斗 忍者小英雄 《RED SHADOW 赤影》（2001年） 改编自 横山光辉 的漫画作品《仮面の忍者 赤影》 剧情简介：为了世界的光明，赤影成为了影子武士。在战国时期的骚乱中，赤影担负着成为影子武士一族首领的命运</p>
</div>
</li>
<li><span>2</span>电影名称</li>
<li><span>3</span>电影名称</li>
<li><span>4</span>电影名称</li>
<li><span>5</span>电影名称</li>
<li><span>6</span>电影名称</li>
</ul>
</div>
</body>
</html>
、画板
影视音乐类网站一般以界面庞大、结构复杂（<ul>、<ol>、<dl>标签应用最多的场合）为主。该网站主要分为以下几大块：搜索模块、热门影片模块、频道模块。搜索模块一般包含导航和影片搜索等部分；热门影片模块可以从最受欢迎影片、新片、电影排行、最新热门影评等方面划分；频道模块可根据适应人群划分多个频道：电影频道、动漫频道、电视剧频道、综艺频道等。根据预设的这些模块，初步在稿纸上画出页面布局的草图，如下图所示。
画板最终设计图
二、设计图
通过画板对将要做的页面分析以及画板设计图中的各个栏目区域的划分有一个大概的了解，对整个页面大体有一个轮廓。现在需要将各个栏目的具体内容通过Photoshop设计出来，在后面的重构中将给出栏目划分的HTML结构，在布局中将给出页面的大体结构以及具体内容编写结构的实现过程，如下图所示。
设计模块划分图
三、切图
使用Photoshop将设计图以下部分切出来，因限于篇幅，本章只讲解设计图的一部分，重复部分将不再讲解，故使用以下图片，这些图片作为背景图或作为插入元素至网页，如下图所示。
切图
四：重构
根据设计模块划分图的区域划分，标记出6个大区域（在这里有重复区域，即结构相同或相似，内容不同的区域），在编写HTML结构时，整个网站需要设计的样式包括3个大区域：A区、F区，余下几个区域作为一个大区（不妨命名为M区）。在后面讲解中也将按照该思路讲解。M区包含B区、C区、D区、E区，M区定义在火狐浏览器下居中，并设置下外边距，没有其他CSS属性设置。
五：布局
（OF作品展示）
OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。
主要内容：网页前端布局
适用人群：Python初学者，前端初学者
准备软件：pycharm
1) 下载完成pycharm, 点击file-New Project...
2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统
1）在创建的项目空白处鼠标右键-New-HTML File
2）输入英文的网页名字，尽量不要输入中文/特殊字符
当双击打开我们创建后的HTML文件，大家会看到下面的界面
在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。
我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下
根据上述的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>1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行
2）目前看到的网页内容从上到下显示
首先我们简要了解下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一定会一一解答的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
