整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
日常开发网站中，我们常常会用到div容器
但是在使用的过程中我们发现div为块级元素会铺满整个宽度
但是在一些业务需求中 需要多个容器排列在一排
那么我们该如何解决这种问题呢 在这里介绍两种方法
第一种
给父级div设置属性display值为flex，
给子级div设置属性flex值为1，
这样就可以实现多个div排列在同一行了
第二种
利用浮动的知识可以实现 ，
给想要排列在一行的div设置左浮动属性float:left;
既可以实现！
（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一定会一一解答的。
于学习Web前端开发的小伙伴来说，掌握HTML是基本功，今天陕西优就业小编就为大家带来HTML中各类标签语义化的解释。
1.p标签和br标签
先说个最简单的。分段要用p标签而不是用br(甚至连续两个)。这个似乎不用多说。但是有时候我们不得不放弃这个原则。一个常见的例子是论坛发帖，如果我想分段，便打回车。而如此传输到后台并显示出来的，显然就是用分段的。
2.table 和 th
由于大力宣扬div+css的结果，似乎现在谁用table布局谁就是未开化的土著。但我认为这种观点是不正确的。table的含义是表格，因此凡是应该以表格形式出现的数据，仍然应该用table布局。简单的例子是班级同学的花名册，包括姓名学号性别等等，这明显是一个表格形式的数据，因此应该用table布局。另一个比较值得探讨的例子是，blog里面的日历导航。我曾经有见过一个blog程序，它的日历导航里的各个日期，从1号到30号全用div套好，再使用float:left样式7个一排的排出当月的日历。当我取消浏览器的CSS显示之后，日历的那部分则从1号到30号一竖排下来。我认为这是不对的。因为日历应该是一个表格形式的数据，因此仍然应该用table布局。当取消css之后，应该仍然按照一排7个的样子归成一个表格。
th则是另一个会被忽视的标签。由于CSS的万能，所有的表格单元都可以用td加一个class属性搞定。但是从语义上讲，一些表格单元应该用th标签。比如上文说到的日历表格，里面的“MON TUE WED... SUN”这些标识星期的单元，就应该用th而不是td。
3.h1-h6
对于h1-h6标签，从语义上讲，它们应该适用于所有标题文字。因此，一些如但是值得注意的是，这样又有可能犯之前h1里面提到的问题。因为有些文字的样式其实是有现成的标签的，比如 strong 标签 sub标签 等，我们也应该适当的给它们一些机会。
4.a标签
a是控制超连接的标签。但有些特殊的情况，我们不一定喜欢用它。比如需要弹出一个小窗口。我没怎么留心，但我想有些设计师会将onclick直接定义到“播放”小图标的标签里还是应该在img外面加一个a，然后将onclick定义到a里面，并记住在js函数最后写上return false。如果可以，该a标签的href属性也应该写上弹出窗口的URL,保证用户在禁止JS的情况下仍能够有效的打开页面。
暂时介绍这么多最后再总结一下遵循HTML标签语义的重要性。Web标准的其中一个要求是低配置的兼容性：当用户禁用图片、禁用CSS或禁用JS的时候，我们仍能够让他有效的浏览网页内容。众所周知强制alt属性就是为禁用图片时的兼容性作考虑。而正确的遵循HTML标签的语义，则是保证禁用CSS时的兼容性。只有当正确使用了HTML标签，我们的网页在“CSS裸奔”的时候，才会仍然让人看得出哪里是导航菜单，哪里是文章标题，日历表格也不会分崩离析。
陕西优就业Web前端学习:http://www.ujiuye.com/zt/webqianduan/?wt.mc_id=17009350
*请认真填写需求信息，我们会在24小时内与您取得联系。
