<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style type="text/css">
/*为了让页面效果跟随浏览器窗口大小的变化而改变*/
html {
font-size: 26.67vw;
} /*font-size:100px;*/
html,
body {
height: 100%;
}
a{
display: block;
}
header {
height: 0.44rem;
background: #387ec2;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
}
header .logoImg {
height: 0.3rem;
margin: 0 auto;
padding-top: 0.09rem;
}
header a:nth-child(1) {
display: block;
height: 0.3rem;
}
header .heaBtn {
width: 0.22rem;
position: absolute;
right: 0.27rem;
top: 0.12rem;
}
main {
/* background: pink; */
height: 100%;
padding: 0.44rem 0 0.5rem;
box-sizing: border-box;
}
.banner img {
width: 3.75rem;
}
nav {
display: flex;
height: 0.32rem;
background: #f2f2f2;
align-items: center; /*在侧轴上居中*/
}
nav b {
font-size: 0.15rem;
padding-left: 0.1rem;
padding-right: 0.1rem;
display: flex;
align-items: center; /*在侧轴上居中*/
}
nav b img {
width: 0.13rem;
margin-right: 0.05rem;
}
nav a {
font-size: 0.11rem;
color: #000;
margin-left: 0.39rem;
}
.list{
border-bottom: 0.11rem solid #f2f2f2;
overflow: hidden;
}
.li{
width: 0.93rem;
height: 0.93rem;
font-size: 0.13rem;
overflow: hidden;
float: left;
border-bottom: 0.01rem solid #efeff4;
border-right: 0.01rem solid #efeff4;
box-sizing: border-box;
}
.li:nth-child(4n){
border-right: none;
}
.li img {
width: 0.27rem;
margin: 0.21rem auto 0.07rem;
}
.li p{
margin: 0 auto;
text-align: center;
}
.news{
height:0.37rem ;
background:#fff;
padding-left: 0.16rem;
padding-right: 0.12rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 0.01rem solid #efeff4;
}
.news img{
width: 0.18rem;
height: 0.15rem;
margin-right: 0.11rem;
}
.news h2{
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
font-size: 0.16rem;
padding-left: 0.13rem;
}
.news a{
display: inline;
font-size: 0.13rem;
color: #6c6c6c;
}
.conList{
margin-left: 0.15rem;
/* background: pink; */
}
dl{
border-top:1px solid #e4e4e4;
padding: 0.14rem 0;
/* background: skyblue; */
display: flex;
}
dt{
width: 0.95rem;
height: 0.69rem;
margin-right: 0.15rem;
}
dt img{
width: 100%;
}
dd{
width: 200px;
height: 0.69rem;
/* background: red; */
}
.conList h2{
font-size: 0.15rem;
width: 2.11rem;
font-family: "宋体";
line-height: 0.18rem;
}
.conList .txt{
font-size: 0.1rem;
}
.conLast{
font-size: 0.11rem;
display: flex;
width: 2.33rem;
justify-content: space-between;
align-items: center;
padding-top: 0.07rem;
}
.conLast span{
/* padding-right: 0.16rem; */
color: #8a8a8a;
}
.conLast .txt{
width: 0.6rem;
height: 0.2rem;
border: 1px solid #ed7150;
line-height: 0.2rem;
text-align: center;
color: #ed7150 ;
}
footer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 0.5rem;
background: #e1e1e1;
display: flex;
justify-content: space-around;
color: black;
font-size: 0.09rem;
}
footer a {
display: block;
color: #929292;
margin-top: 0.07rem;
text-align: center;
/* margin: 0.07rem 0.32rem 0.02rem 0.32rem; */
}
footer a img {
height: 0.24rem;
width: 0.24rem;
}
footer p{
text-align: center;
margin-top: 5px;
}
footer .active{
color: #387ec2;
}
/*ps中测量出来的大小减半 再除以100*/
</style>
</head>
<body>
<header>
<a href="">
<img class="logoImg" src="img1/logo.jpg" alt="" />
</a>
<a href="">
<img class="heaBtn" src="img1/btn.jpg" alt="" />
</a>
</header>
<main>
<div class="content">
<div class="banner">
<img src="img1/banner.jpg" alt="" />
</div>
<nav>
<b><img src="img1/btn2.jpg" />学员必看:</b>
<a href="">退考须知</a>
<a href="">退考须知</a>
</nav>
<div class="con">
<div class="list">
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
<a class="li">
<img src="./img1/home.jpg" alt="" />
<p>企业发展</p>
</a>
</div>
<div class="news">
<h2><img src="./img1/images/audio_03.png" alt=""> 新闻资讯</h2>
<a href="#">查看更多</a>
</div>
<div class="conList">
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
<dl>
<dt><img src="./img1/con1.jpg" alt=""></dt>
<dd>
<h2>哈哈哈哈哈哈哈哈哈哈或海带丝哦豁</h2>
<div class="conLast">
<p class="txt">海驾活动</p>
<span>14天前</span>
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</main>
<footer>
<a href="#" class="active">
<img src="./img1/circle.jpg" alt="" />
<p>首页</p>
</a>
<a href="#">
<img src="./img1/circle.jpg" alt="" />
<p>首页</p>
<a href="#">
<img src="./img1/circle.jpg" alt="" />
<p>首页</p>
<a href="#">
<img src="./img1/circle.jpg" alt="" />
<p>首页</p>
</a>
</footer>
</body>
</html>
效果图如下: