实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
margin: 0 auto;
background-color: rgb(246, 246, 245);
position: relative;
}
/* 定义头部 */
.head {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
width: 100%;
height: auto;
background-color: white;
}
.head .top {
width: 100%;
height: 56px;
background-color: white;
min-width: 320px;
max-width: 768px;
margin: 0 auto
}
/* 设为弹性 */
.head .top {
display: flex
}
/* 设置头部左边 */
.head .top .left {
width: 100px;
height: 56px;
text-align: center;
line-height: 56px;
font-size: 14px
}
/* 设置头部左边a样式 */
.head .top .left a {
color: #ff7e3e;
text-decoration: none
}
/* 设置头部右边 */
.head .top .right {
width: 150px;
height: 56px;
text-align: center;
line-height: 56px;
font-size: 14px
}
/* 设置头部右边a样式 */
.head .top .right a {
color: #ff7e3e;
text-decoration: none
}
/* 中间填补 */
.head .top .main {
flex: 1
}
/* 头部文字居中 */
.head .top {
text-align: center
}
/* 头部图片样式 */
.head .top img {
width: 66px;
height: 27px;
margin-top: 15px
}
/* 搜索框 */
.soso {
width: 94%;
height: 56px;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
/* banner */
.banner {
width: 100%;
height: 113px;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
/* 导航区 */
.nav {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
height: 110px;
box-sizing: border-box
}
.nav ul {
margin: 0;
padding: 0
}
.nav ul li {
list-style-type: none;
text-align: center;
height: 100px;
margin: 10px
}
.nav ul li img {
width: 70px;
height: 55px;
text-align: center
}
.nav ul li a {
text-align: center;
text-decoration: none;
color: #444444
}
.nav ul {
display: flex
}
.nav ul li {
flex: 1
}
/* 企业框 */
.container {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
width: 100%;
height: 820px;
background-color: white;
margin-top: 10px
}
.container .ht {
position: relative;
height: 48px;
width: 98%;
margin: 0 auto;
border-bottom: 1px solid lightgrey
}
.container .ht {
display: flex
}
.container .ht .left {
width: 10px;
height: 30px;
margin-top: 9px;
background-color: #ff7e3e
}
.container .ht .right {
width: 200px;
height: 30px;
margin: 12px;
font-size: 18px
}
.container .ht .right a {
color: #ff7e3e;
text-decoration: none
}
.container .main {
width: 98%;
height: 47px;
background-color: white;
margin: 10px auto;
border-bottom: 1px solid lightgrey
}
/* 设为弹性 */
.container .main {
display: flex
}
/* 设置头部左边 */
.container .main .left {
width: 20px;
height: 20px;
text-align: center;
line-height: 56px;
font-size: 14px
}
/* 设置头部右边 */
.container .main .right {
width: 100px;
height: 47px;
;
text-align: center;
line-height: 56px;
font-size: 14px
}
/* 设置头部右边a样式 */
.container .main .right a {
color: #0060a9;
text-decoration: none
}
/* 中间填补 */
.container .main .centent {
flex: 1
}
/* 头部文字居中 */
.container .main .centent {
line-height: 47px;
color: #0060a9;
padding-left: 15px
}
/* 头部图片样式 */
.container .main img {
width: 20px;
height: 20px;
}
/* ul企业图片 */
.container .nav {
height: 90px;
box-sizing: border-box;
width: 98%;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
.container .nav ul {
margin: 10px 0;
padding: 0;
}
.container .nav ul li {
list-style-type: none;
text-align: center;
height: 90px;
}
.container .nav ul li img {
width: 56px;
height: 56px;
text-align: center;
border-radius: 10px;
border: 1px solid #d4d4d4;
}
.container .nav ul li a {
text-align: center;
text-decoration: none;
color: #444444;
font-size: 14px;
line-height: 26px
}
.container .nav ul {
display: flex
}
.container .nav ul li {
flex: 1
}
.container .nav hr {
border: 0.5px solid lightgrey
}
/* banner2 */
.ban2 {
width: 100%;
height: 112px;
margin: 0 auto;
}
.ban2 {
min-width: 20px;
max-width: 768px;
height: 112px;
margin: 10px auto;
text-align: center
}
.ban2 img {
margin: 0 auto;
text-align: center;
width: 100%;
height: 112px
}
/* banner图下面的新闻 */
.hbox {
min-width: 320px;
max-width: 768px;
height: 210px;
margin: 10px auto;
background-color: white
}
.hbox li {
width: 98%;
margin: 0 auto;
list-style-type: none;
height: 42px;
line-height: 41px;
box-sizing: border-box;
padding-left: 10px;
border-bottom: 1px solid #d4d4d4
}
.hbox li a {
text-decoration: none;
color: #444444;
font-size: 14px
}
.hbox li a:hover {
color: #444444
}
/* 求职服务 */
.container2 {
min-width: 320px;
max-width: 768px;
margin: 0 auto;
width: 100%;
height: 180px;
background-color: white;
margin-top: 10px
}
.container2 .ht {
position: relative;
height: 48px;
width: 98%;
margin: 0 auto;
border-bottom: 1px solid lightgrey
}
.container2 .ht {
display: flex
}
.container2 .ht .left {
width: 10px;
height: 30px;
margin-top: 9px;
background-color: #ff7e3e
}
.container2 .ht .right {
width: 200px;
height: 30px;
margin: 12px;
font-size: 18px
}
.container2 .ht .right a {
color: #ff7e3e;
text-decoration: none
}
/* 求职服务四个图片 */
.container2 .nav {
height: 90px;
box-sizing: border-box;
width: 98%;
min-width: 320px;
max-width: 768px;
margin: 0 auto;
}
.container2 .nav ul {
margin: 10px 0;
padding: 0;
}
.container2 .nav ul li {
list-style-type: none;
text-align: center;
height: 90px;
}
.container2 .nav ul li img {
width: 55px;
height: 55px;
text-align: center;
}
.container2 .nav ul li a {
text-align: center;
text-decoration: none;
color: #444444;
font-size: 14px;
line-height: 26px
}
.container2 .nav ul {
display: flex
}
.container2 .nav ul li {
flex: 1
}
/* 热门职位 */
.room {
min-width: 320px;
max-width: 768px;
height: 112px;
margin: 10px auto;
background-color: white
}
.room {
display: flex
}
.room .left {
width: 49%;
height: 112px;
border-right: 1px solid #d4d4d4
}
.room .right {
width: 49%;
height: 112px;
}
.room .left img {
width: 100%;
height: 112px;
}
.room .right img {
width: 100%;
height: 112px;
}
/* 热门职位四个图片 */
.box {
min-width: 320px;
max-width: 768px;
height: 270px;
margin: 10px auto;
background-color: white
}
.box .content {
width: 98%;
margin: 0 auto;
}
.box .content .nav {
margin: 0;
padding: 0;
height: 41px;
border-bottom: 1px solid lightgrey
}
.box .content .nav .itme {
list-style: none;
}
.box .content .nav .itme a {
float: left;
text-align: center;
color: #444444;
text-decoration: none;
font-size: 14px;
width: 25%;
height: 30px;
margin-top: 10px;
font-weight: bold
}
.box .content .nav .itme a:hover {
color: #444444;
border-bottom: 2px solid #ff7e3e;
}
/* 倒数第二个首页-登录 */
.dl {
min-width: 320px;
max-width: 768px;
height: 42px;
margin: 0 auto;
background-color: rgb(235, 235, 235)
}
.dl .text {
height: 42px;
line-height: 42px;
width: 98%;
margin: 0 auto
}
.dl .text a {
text-decoration: none;
color: #ff7e3e;
font-size: 14px
}
.dl .text a:hover {
text-decoration: none;
color: #ff7e3e
}
/* 底部 */
.foot {
min-width: 320px;
max-width: 768px;
height: 120px;
margin: 0 auto;
background-color: #fff2e3;
}
.foot p {
text-align: center;
font-size: 14px;
color: #7b7b7b;
}
/* 底部悬浮框 */
.botm {
position: fixed;
left: 0;
bottom: 0;
padding: 13px 0;
width: 100%;
text-align: center;
color: white;
background-color: rgba(84, 84, 84, 0.9);
}
</style>
</head>
<body>
<div class="head">
<!-- 头部 -->
<div class="top">
<!-- 头部左边 -->
<div class="left"><a href="">台州</a></div>
<!-- 头部中间 -->
<div class="main">
<a href=""><img src="http://img01.51jobcdn.com/im/m/logo.png" alt=""></a>
</div>
<!-- 头部右边 -->
<div class="right"><a href="">登录丨注册</a></div>
</div>
<!-- 搜索框 -->
<div class="soso">
<input type="text" id="" name="" style=" width: 100%; text-align: center; background-color: #ebebeb; border: none;height: 34px; border-radius: 34px" placeholder="请输入关键字">
</div>
<!-- banner -->
<div class="banner">
<img src="http://img01.51jobcdn.com/im/mkt/m/supplement/zhongqiu_ban_2019.png" alt="" height="113" width="100%">
</div>
<!-- 第一排五个选择框 -->
<div class="nav">
<ul>
<li>
<a href=""><img src="static/images/a1.png" alt=""><br>职位搜索</a>
</li>
<li>
<a href=""><img src="static/images/a2.png" alt=""><br>我的申请</a>
</li>
<li>
<a href=""><img src="static/images/a3.png" alt=""><br>职位分类</a>
</li>
<li>
<a href=""><img src="static/images/a4.png" alt=""><br>APP下载</a>
</li>
<li>
<a href=""><img src="static/images/a5.png" alt=""><br>51米多多</a>
</li>
</ul>
</div>
</div>
<!-- 企业框 -->
<div class="container">
<div class="ht">
<div class="left"></div>
<div class="right"><a href="">知名企业</a></div>
</div>
<div class="main">
<div class="left"><img src="static/images/a6.png" alt=""></div>
<div class="centent">互联网</div>
<div class="right"><a href="">更多></a></div>
</div>
<!-- ul企业图片 -->
<div class="nav">
<ul>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/guaziershouche.png" alt=""><br>瓜子***</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/jinritoutiao.png" alt=""><br>今日头条</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/meituandianping.png" alt=""><br>美团点评</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/yichewang.png" alt=""><br>易车网</a>
</li>
</ul>
<hr>
<ul>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/tengxun.jpg" alt=""><br>腾讯</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/alibaba.jpg" alt=""><br>阿里巴巴</a>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/xiechenglvxingwang.jpg" alt=""><br>携程</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/jingdong.jpg" alt=""><br>京东</a>
</li>
</ul>
<hr>
<ul>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/weipinhui.png" alt=""><br>唯品会</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/ele.jpg" alt=""><br>饿了么</a>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/lujing***png" alt=""><br>陆金所</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/ucyoushi.png" alt=""><br>UC优视</a>
</li>
</ul>
<!-- 第二个产品框 -->
<div class="main">
<div class="left"><img src="static/images/a6.png" alt=""></div>
<div class="centent">计算机软件/硬件/服务</div>
<div class="right"><a href="">更多></a></div>
</div>
<ul>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/shenzhoushuma.jpg" alt=""><br>神州数码</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/xiaomikeji.png" alt=""><br>小米</a>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/lianxiang.jpg" alt=""><br>联想</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/changhongjiahua.jpg" alt=""><br>长虹佳华</a>
</li>
</ul>
<hr>
<ul>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/huashuo.png" alt=""><br>华硕</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/weiruan.jpg" alt=""><br>微软</a>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/ziguangshuma.jpg" alt=""><br>紫光数码</a>
</li>
<li>
<a href=""><img src="https://img01.51jobcdn.com/im/careerpost/marketing/shixi51/images/mingqi/logo/jingshanbangongruanjian.png" alt=""><br>金山软件</a>
</li>
</ul>
</div>
</div>
<!-- 第二个banner -->
<div class="ban2">
<img src="http://img01.51jobcdn.com/im/mkt/tg/lp_wx64/750_169.jpg" alt="">
</div>
<!-- banner图下面的新闻 -->
<div class="hbox">
<li>
<a href="">快面试了，对公司不了解怎么办？</a>
</li>
<li>
<a href="">[名企急招]月入8000的服务岗在这</a>
</li>
<li>
<a href="">人手不够时离职，是不负责任吗？</a>
</li>
<li>
<a href="">这六个技巧让你的简历更***点</a>
</li>
<li>
<a href="">求职者全年十大跳槽目标城市</a>
</li>
</div>
<!-- 求职服务 -->
<div class="container2">
<div class="ht">
<div class="left"></div>
<div class="right"><a href="">求职服务</a></div>
</div>
<!-- 求职服务四个图片 -->
<div class="nav">
<ul>
<li>
<a href=""><img src="static/images/a7.png" alt=""><br>求职信</a>
</li>
<li>
<a href=""><img src="static/images/a8.png" alt=""><br>咨询</a>
</li>
<li>
<a href=""><img src="static/images/a9.png" alt=""><br>简历模板</a>
</li>
<li>
<a href=""><img src="static/images/a10.png" alt=""><br>薪酬查询</a>
</li>
</ul>
</div>
</div>
<!-- 热门职位 -->
<div class="room">
<div class="left">
<img src="http://img01.51jobcdn.com/im/mkt/mdd/APPguanggao/51m-button1212.png" alt="">
</div>
<div class="right">
<img src="http://img01.51jobcdn.com/im/mkt/tg/2019banner/app_but8/480_216.png" alt="">
</div>
</div>
<div class="box">
<div class="content">
<ul class="nav">
<li class="itme"><a href="">热门职位</a></li>
<li class="itme"><a href="">热门城市</a></li>
<li class="itme"><a href="">周边城市</a></li>
<li class="itme"><a href="">城市服务</a></li>
</ul>
</div>
<!-- 热门职位下面的新闻 -->
<div class="hbox">
<li>
<a href="">快面试了，对公司不了解怎么办？</a>
</li>
<li>
<a href="">[名企急招]月入8000的服务岗在这</a>
</li>
<li>
<a href="">人手不够时离职，是不负责任吗？</a>
</li>
<li>
<a href="">这六个技巧让你的简历更***点</a>
</li>
<li>
<a href="">求职者全年十大跳槽目标城市</a>
</li>
</div>
</div>
<!-- 倒数第二个首页-登录 -->
<div class="dl">
<div class="text"><a href="">首页 - 登录 - 注册</a></div>
</div>
<!-- 底部 -->
<div class="foot">
<br>
<p>使用帮助 | 用户反馈 | 企业入口</p>
<p>无忧工作网版权所有©1999-2019 <br>51job.com（沪ICP备12015550）
</p>
</div>
<!-- 底部悬浮框 -->
<div class="botm">
<span>快速注册，获取高薪职位</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
static/images文件下的图片
flex布局：是一种弹性布局 代码为 display:flex;
采用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。
我不知道怎么传文件夹里面的托=图片，所以就只能这样子放上去，请老师见谅
