1.网页展示
2.网页代码
1）html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>邑人同心</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="head">
<div class="head1 wrapper">
<img src="./images/logo.png" alt="">
<div>
<h2>邑人同心
</h2>
<p>YiRenTongXin</p>
</div>
<ul >
<li>
<a href="login.html" target="_blank">登录</a>
</li>
<li>
<a href="">网站支持IPv6</a>
</li>
<li>
<a href="" id="fanti">繁体</a>
</li>
<li class="none">
<a href="" >无障碍阅读</a>
</li>
</ul>
</div>
<div class="head2 ">
<div class="wrapper underline">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">帮扶政策</a>
</li>
<li>
<a href="">企业服务</a>
</li>
<li>
<a href="">职业技能培训</a>
</li>
<li>
<a href="">工作反馈</a>
</li>
<li>
<a href="">个人服务</a>
</li>
</ul>
</div>
</div>
<div class="head3 wrapper">
<div class="left">
<h2>欢迎来到稳岗服务平台</h2>
<input type="text" placeholder="请输入要办理的事项" class="seacrh">
<button>搜索</button>
<span>热门搜索：</span>
<ul>
<li><a href="http://www.gdzwfw.gov.cn/portal/v2/search?region=440000&keyword=%E5%9F%BA%E5%B1%82%E5%B0%B1%E4%B8%9A%E8%A1%A5%E8%B4%B4&areaCode=440100&departmentCode=&onlyCorrespondingLevel=0&type=&guideGroup=true" target="_blank" >基层就业补贴
</a></li>
<li><a href="http://www.gdzwfw.gov.cn/portal/v2/search?region=440000&keyword=%E7%96%AB%E6%83%85%E9%98%B2%E6%8E%A7&areaCode=440000&departmentCode=&onlyCorrespondingLevel=0&type=&guideGroup=true" target="_blank">疫情防控
</a></li>
<li><a href="http://www.gdzwfw.gov.cn/portal/personal/mattersLv2/hot?region=440000&lv2code=7700000028" target="_blank">职业资格
</a></li>
</ul>
</div>
<div class="right">
<div class="user">
<img src="./images/user.png" alt="">
<a href="login.html" target="_blank">登录账号</a>
<span>查看个人信息和个性化推荐服务</span>
</div>
<div class="content">
<ul>
<li>
<a href="">申领居住证</a>
</li>
<li>
<a href="">租房引进</a>
</li>
<li>
<a href="">社保查询</a>
</li>
<li>
<a href="">住房公积金查询</a>
</li>
<li>
<a href="">志愿者招募</a>
</li>
<li>
<a href="">就业补贴</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="service">
<div class="wrapper goods">
<h2>热门服务</h2>
<ul>
<li><a href="">企业培训消息</a></li>
<li><a href="">政府补贴消息</a></li>
<li><a href="">志愿者招募</a></li>
<li><a href="">相关技能培训</a></li>
<li><a href="">帮扶政策查询</a></li>
</ul>
</div>
</div>
</div>
<div class="person wrapper clearfix">
<h2><a href=""> 个人服务 ></a></h2>
<ul>
<a href="http://www.gdzwfw.gov.cn/portal/personal/mattersLv2/hot?region=440000&lv2code=7700000028" target="_blank"> <li>
<img src="./images/zhiye.png" alt="">
<div class="content">
<h3>职业资格</h3>
<p>职业技能培训</p>
<p>职业前景</p>
<p>资格考试</p>
</div>
</li> </a>
<a href="http://www.gdzwfw.gov.cn/portal/personal/mattersLv2/hot?region=440000&lv2code=7700000011" target="_blank"><li>
<img src="./images/shebao.png" alt="">
<div class="content">
<h3>社保</h3>
<p>社保查询</p>
<p>养老保险待遇申领</p>
<p>一次性失业保险金申领</p>
</div>
</li>
</a>
<a href="http://www.gdzwfw.gov.cn/portal/personal/mattersLv2/hot?region=440000&lv2code=7700000004" target="_bank">
<li>
<img src="./images/huzheng.png" alt="">
<div class="content">
<h3>户政</h3>
<p>出生登记</p>
<p>开局户籍证明</p>
<p>外来人员引进</p>
</div>
</li>
</a>
<a href="http://www.gdzwfw.gov.cn/portal/personal/mattersLv2/hot?region=440000&lv2code=7700000007" target="_blank">
<li>
<img src="./images/jiuye.png" alt="">
<div class="content">
<h3>就业创业</h3>
<p>灵活就业社会保险补贴</p>
<p>一次性创业补贴</p>
<p>创业租金补贴</p>
</div>
</li>
</a>
</ul>
</div>
<div class="jineng clearfix">
<div class="skill wrapper ">
<h2 class='title'>
<a href="" >
职业技能培训>
</a>
</h2>
<div class="left">
<ul>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7833" target="_blank">制造与工程技术</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7851" target="_blank">结构与建筑技术</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7863" target="_blank">信息与通讯技术</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7866" target="_blank">生活服务</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7911" target="_blank">餐饮服务</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7881" target="_blank">运输与物流</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7890" target="_blank">创意艺术与时尚</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=7983" target="_blank">农林与绿化</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/web/channel?categoryPId=6360" target="_blank">电子商务</a>
</li>
</ul>
</div>
<div class="right">
<h2><a href="http://gptj.chinahrt.com/web/channel?categoryPId=7401" target="_blank">
推荐视频 ></a></h2>
<ul>
<li>
<a href="http://gptj.chinahrt.com/goodsInfo/goodsDetailInfo?id=D8L4lHxCrOypK1Pqg7Hgoods" target="_blank">
<img src="./images/computer.png" alt="">
<h3>计算机软件工</h3>
<p>
<span>高级</span> · 155人正在学习
</p>
</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/goodsInfo/goodsDetailInfo?id=6L7rHVLc33zT7oOj2kWgoods" target="_blank">
<img src="./images/design.png" alt="">
<h3>室内装饰设计师</h3>
<p>
<span>高级</span> · 125人正在学习
</p>
</a>
</li>
<li>
<a href="http://gptj.chinahrt.com/goodsInfo/goodsDetailInfo?id=1ASygGH8nDumrEzmJ8xgoods" target="_blank">
<img src="./images/medicine.png" alt="">
<h3>药物制剂工四级</h3>
<p>
<span>高级</span> · 112人正在学习
</p>
</a>
</li>
</div>
</div>
</div>
<div class="policy wrapper clearfix">
<h2><a href=""> 政策新闻></a></h2>
<ul>
<a href="http://nrra.gov.cn/art/2022/3/31/art_46_194684.html" target="_blank">
<li>
<p>中国人民银行关于做好2022年金融支持全面推进乡村振兴重点工作的意见</p>
<span>2022-03-31 08:32:35</span>
</li>
</a>
<a href="http://nrra.gov.cn/art/2022/3/29/art_46_194644.html" target="_blank">
<li>
<p>农业农村部办公厅 国家乡村振兴局综合司关于征集全国乡村治理典型案例的通知</p>
<span>2022-03-09 10:11:55</span>
</li>
</a>
<a href="http://nrra.gov.cn/art/2022/3/25/art_46_194605.html" target="_blank">
<li>
<p>国家乡村振兴局关于做好2022年脱贫人口稳岗就业工作的通知</p>
<span>2022-03-25 18:12:35</span>
</li>
</a>
</ul>
</div>
<div class="evaluate clearfix">
<div class="view wrapper">
<h2><a href=""> 工作反馈></a></h2>
<ul>
<li class="box1">
<p>办件数</p>
<span class="count">1521</span>
<span class="count1">万条</span>
</li>
<li>
<p>收到差评数</p>
<span class="count">152</span>
<span class="count1">条</span>
</li>
<li>
<p>差评整改率</p>
<span class="count">100</span>
<span class="count1">%</span>
</li>
<li>
<p>平均分</p>
<span class="count">9.9</span>
<span class="count1">分</span>
<img src="./images/star.png" alt="">
</li>
</ul>
</div>
</div>
<div class="bottom ">
<div class="content">
<img src="./images/logo.png" alt="">
<ul>
<li>
<a href="">关于本网</a>
</li>
<li>
<a href="">网站纠错</a>
</li>
<li>
<a href="">网站声明</a>
</li>
<li class="special">
<a href="" >网站报表</a>
</li>
</ul>
<p>
主办单位：邑人同心团队
</p>
<p>
联系我们：xxxxxx
</p>
<a href="" class="xiaochengxun">扫一扫进入邑人同心小程序</a>
</div>
</div>
</body>
</html>2）css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.clearfix:before,.clearfix:after{
content:"";
display: table;
}
.clearfix:after{
clear: both;
}
.wrapper{
width: 1200px;
margin: auto;
}
.head{
width: 1519px;
height: 520px;
background-image: url(./images/background.jpg);
}
.head1{
height: 70px;
}
img{
margin-top: 10px;
float: left;
}
.head div{
position: relative;
}
.head p{
position: absolute;
top: 70px;
left: 120px;
font-size: 20px;
font-weight: 600;
color: #fff;
}
.head1 h2{
float: left;
font-size: 38px;
margin-top: 15px;
margin-left: 20px;
color: #ffffff;
}
.head1 li{
float: right;
margin-top: 30px;
margin-left: 20px;
border-left: 1px solid #fff;
}
.head1 .none{
border-left: 0px;
}
.head1 a{
margin-left: 20px;
color: #fff;
font-size: 16px;
}
.head2{
height: 53px;
margin-top: 40px;
border-bottom: 1px solid rgb(240, 235, 235);
}
.head2 li{
float: left;
line-height: 50px;
margin-right: 50px;
}
.head2 a{
font-size: 22px;
font-weight: 550;
color: #fff;
}
.head2 li:hover{
border-bottom: 3px solid rgb(124, 167, 233);
}
.head3{
padding: 20px;
margin-top: 40px;
height: 280px;
}
.head3 .left{
position: relative;
width: 550px;
height: 280px;
/* background-color: #fff; */
float: left;
}
.head3 h2{
font-size: 40px;
font-weight: 400px;
color: #fff;
}
.head3 input{
width: 450px;
height: 60px;
margin-left: 5px;
margin-top: 25px;
font-size: 20px;
float: left;
border: 0;
}
.head3 button{
margin-top: 25px;
height: 61px;
width: 80px;
float: left;
background-color:#E60000;
border: 0;
color: #fff;
font-size: 18px;
font-weight: 600;
}
.head3 .left span{
float: left;
color: #fff;
margin-left: 5px;
margin-top: 8px;
font-weight: 600;
}
.head3 li{
float: left;
margin-left: 15px;
margin-top: 8px;
}
.head3 li a{
color: #767373;
font-size: 16px;
font-weight: 600;
}
.head3 .right{
padding: 20px;
padding-top: 20px;
width: 320px;
height: 210px;
background-color: #fff;
float: right;
}
.head3 .user{
position: relative;
border-bottom: 1px solid #a5a5a5;
height: 85px;
}
.head3 .right img{
height: 60px;
width: 60px;
float: left;
}
.head3 .user a{
margin-top: 12px;
margin-left: 15px;
float: left;
display: block;
/* float: left; */
font-weight: 600;
font-size: 18px;
color: #74AFF6;
}
.head3 .user span{
display: block;
position: absolute;
font-size: 13px;
color: #a5a5a5;
margin-top: 15px;
top: 30px;
left: 75px;
}
.head3 .content li{
float: left;
width: 115px;
background-color: #fff;
margin-right: 25px;
margin-top: 20px;
list-style:circle;
margin-left: 20px;
}
.service{
height: 95px;
background-color: #f1f2f3;
padding-top: 12px;
}
.goods{
height: 80px;
width: 1166px;
background-color: #fff;
/* margin-top: 15px; */
box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);
padding-left: 34px;
line-height: 80px;
}
.goods h2{
float: left;
color: #00b4ff;
font-size: 22px;
}
.goods ul{
float: left;
}
.goods ul li{
float: left;
margin-left: 30px;
}
.goods ul a{
border-left: 2px solid #bfbfbf;
padding: 0px 0px 0px 30px;
font-size: 16px;
color: #050505;
}
.person{
margin-top: 35px;
}
.person a{
text-decoration: none;
color: #050505;
}
.person h2{
margin-bottom: 15px;
border-left: 5px solid #00b4ff;
font-size: 26px;
}
.person li{
margin-top: 20px;
float: left;
width: 290px;
margin-right: 10px;
height: 160px;
margin-bottom: 30px;
}
.person .content{
/* float: right; */
display: inline-block;
margin-top: 20px;
margin-left: 30px;
}
.person .content h3{
font-size: 22px;
}
.person .content p{
margin-top: 14px;
color:#767373;
}
.person li:hover{
box-shadow: 2px 2px 2px 2px rgba(118, 118, 118, 0.4);
cursor:pointer;
transform:translate(0,-10px);
transition: 0.7s;
}
.jineng{
/* background-color: #F1F2F3; */
background-color: #F6FAFE;
height:540px ;
}
.skill .left{
margin-top: 45px;
width: 270px;
height: 360px;
background-color: #fff;
box-shadow: 2px 2px 5px 2px rgba(118, 118, 118, 0.3);
float: left;
/* background-image: url(./images/logo.png); */
background-repeat: no-repeat;
background-position: 165px 255px;
}
.skill .left li{
margin-left: 40px;
margin-top: 16.5px;
}
.skill .left a:hover{
background-color: rgb(218, 212, 212);
}
.skill .left a{
color: #3e798f;
font-size: 17px;
font-weight: 550;
}
.skill .title{
margin-top: 45px;
border-left: 5px solid #00b4ff;
font-size: 26px;
}
.skill .title a{
color: #050505;
}
.skill .right{
margin-top: 45px;
width: 800px;
height: 350px;
background-color: #fff;
border: 5px solid rgb(157, 190, 227);
float: right;
}
.skill .right li{
float: left;
margin-left: 30px;
margin-top: 5px;
width: 228px;
height: 260px;
background-color: #fff;
box-shadow: 0px 2px 3px 1px rgba(118, 118, 118, 0.2);
}
.skill .right h2{
margin-top: 20px;
margin-left: 30px;
margin-right: 30px;
height: 40px;
font-weight: 530;
}
.skill .right a{
color: #5f5b5b;
margin: 0px;
}
.skill .right li:nth-child(5n){
margin-right: 0px;
}
.skill .right h3{
padding: 20px;
margin-top: 155px;
font-size: 18px;
color: #050505;
font-weight: 400px;
}
.skill .right p{
margin-left: 20px;
font-size: 12px;
color: #999;
margin-top: 8px;
}
.skill .right span{
color: orange;
}
.policy{
height: 400px;
}
.policy h2{
margin-top: 40px;
border-left: 5px solid #00b4ff;
font-size: 26px;
}
.policy a{
color: #050505;
}
.policy li{
float: left;
height: 150px;
width: 240px;
margin-left: 63px;
/* background-color: #4e4e4e; */
margin-top: 40px;
box-shadow: 0px 2px 3px 3px rgba(118, 118, 118, 0.2);
padding: 40px;
position: relative;
}
.policy ul p{
font-size: 18px;
font-weight: 550;
}
.policy ul span{
position: absolute;
color: #c1aeae;
top: 170px;
}
.policy ul li:hover{
background-color: #4293F4;
transform: translate(0,-10px);
transition: 0.7s;
}
.policy ul a:hover{
color: #fff;
}
.evaluate{
height: 290px;
background-color: #F6FAFE;
padding-top: 35px;
}
.view h2{
/* margin-top: 20px; */
border-left: 5px solid #00b4ff;
font-size: 26px;
}
.view a{
color: #050505;
}
.view li{
background-color:#fff;
box-shadow: 0px 2px 3px 3px rgba(118, 118, 118, 0.2);
width: 270px;
height: 150px;
float: left;
margin-left: 20px;
margin-top: 35px;
}
.view li p{
margin-top: 30px;
margin-left: 40px;
font-weight: 550;
font-size: 20px;
color: rgb(54, 52, 52);
}
.view li .count{
display: inline-block;
margin-top: 15px;
margin-left: 40px;
font-size: 50px;
color: black;
}
.view img{
float: right;
margin-top: 42px;
margin-right: 0.5px;
}
.view li:hover{
background-color: #a3c2e9;
transform: translate(0,-10px);
transition: 0.7s;
}
.bottom{
height: 140px;
border-top:3px solid #3174CE ;
}
.bottom .content{
margin: auto;
width: 500px;
height: 150px;
}
.bottom img{
margin-top:20px ;
}
.bottom li{
margin-top: 20px;
margin-left: 10px;
float: left;
border-right:1px solid rgb(155, 148, 148);
}
.bottom a{
margin-right: 15px ;
margin-left: 10px;
color: #4e4e4e;
font-size: 14px;
font-weight: 550;
}
.bottom .special{
border-right: 0;
}
.bottom p{
float: left;
margin-left: 20px;
margin-top: 15px;
font-size: 14px;
font-weight: 550;
color: #4e4e4e;
}
.bottom .xiaochengxun{
font-size: 14px;
float: left;
margin-top: 15px;
margin-left: 20px;
}3.小结
如果大家需要图片素材可以私信我
扫一扫
316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
