服务平台网站设计（html+css）"/>
服务平台网站设计（html+css）
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="=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="=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="=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="=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="=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="=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="=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="=7833" target="_blank">制造与工程技术</a></li><li><a href="=7851" target="_blank">结构与建筑技术</a></li><li><a href="=7863" target="_blank">信息与通讯技术</a></li><li><a href="=7866" target="_blank">生活服务</a></li><li><a href="=7911" target="_blank">餐饮服务</a></li><li><a href="=7881" target="_blank">运输与物流</a></li><li><a href="=7890" target="_blank">创意艺术与时尚</a></li><li><a href="=7983" target="_blank">农林与绿化</a></li><li><a href="=6360" target="_blank">电子商务</a></li></ul></div><div class="right"><h2><a href="=7401" target="_blank">推荐视频 ></a></h2><ul><li><a href="=D8L4lHxCrOypK1Pqg7Hgoods" target="_blank"><img src="./images/computer.png" alt=""><h3>计算机软件工</h3><p><span>高级</span> · 155人正在学习</p></a></li><li><a href="=6L7rHVLc33zT7oOj2kWgoods" target="_blank"><img src="./images/design.png" alt=""><h3>室内装饰设计师</h3><p><span>高级</span> · 125人正在学习</p></a></li><li><a href="=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=".html" target="_blank"><li><p>中国人民银行关于做好2022年金融支持全面推进乡村振兴重点工作的意见</p><span>2022-03-31 08:32:35</span></li></a><a href=".html" target="_blank"><li><p>农业农村部办公厅 国家乡村振兴局综合司关于征集全国乡村治理典型案例的通知</p><span>2022-03-09 10:11:55</span></li></a><a href=".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.小结
如果大家需要图片素材可以私信我
更多推荐
服务平台网站设计（html+css）
发布评论