前言
主要是通过HTML5+CSS3+JS搭建的一个简易的静态的网页，还存在网页自适应问题，虽然不是很完美，但也是自己的一份心血。
一、比德人工静态网页
二、部分代码展示
1.HTML5
代码如下（示例）：
<!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>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="time5简易官网\js\index.js"></script>
<link rel="stylesheet" href="css/yangshi.css">
</head>
<body>
<div class="headr">
<!-- logo -->
<div class="headr-logo">
<h1>
<a href="#"> <img src="../time5简易官网/image/bide.jpg" alt="比德人工智能" title="比德人工智能"></a>
</h1>
</div>
<!-- 搜索框 -->
<div class="headr-form">
<input type="text" placeholder=" 比德人工智能">
<button>搜索</button>
</div>
</div>
<!-- 导航 -->
<div class="benter">
<ul>
<li><a href="#" target="_block">网站首页</a></li>
<li><a href="#"target="_block">产品内容</a></li>
<li><a href="#"target="_block">服务范围</a></li>
<li><a href="#"target="_block">新闻咨询</a></li>
<li><a href="#"target="_block">招聘人才</a></li>
<li><a href="#"target="_block">解决方案</a></li>
<li><a href="#"target="_block">联系我们</a></li>
</ul>
</div>
<!-- 内容部分 -->
<div class="main">
<div class="main-left">
<div class="main-left-a">● 公司简历 Company resume</div>
<a href="#"><img src="../time5简易官网/image/1.jpeg" alt="公司简历"></a>
<p>1.名称：比德人工智能基础软件有限责任公司. <br>
2.公司的主营业务：<br>
计算机软件 , 计算机硬件的研发 , 销售 , 人工智能科技 , 物联网科技 , 信息科技 , 云计算科技领域内的技术咨询 , 技术开发 , 技术转让 , 技术服务 , 计算机系统集成 , 数据处理服务 , 电子产品 , 集成电路 , 监测设备的研发和销售 , 企业管理咨询 , 市场信息咨询 , 网络工程的安装 , 调试 , 维护 , 动漫设计 , 广告的设计 , 制作 , 代理 , 发布。（依法须经批准的项目 , 经相关部门批准后方可开展经营活动。）<br>
3. 优势<br>
刘日辉 研发人员兼公司执行董事：<br>
4年程序员，3年项目经理，精通SQL Server、Mysql、Oracle、C#、Java、Python。
资历深，经验丰富，拥有长远目光，熟练运用市场资源，擅长数据与市场，可以有效地规避风险。
</p>
</div>
<div class="main-top">
<a href="#"><img src="../time5简易官网/image/04.png" alt="人工智能"></a>
<h3>一、公司产品内容</h3>
<p>比德人工智能研发方向：面向社会所使用的APP</p>
<p>
1、比德-体温监测app：
防控疫情的需要，比德人工智能研发了一款用于线上收集体温的体温检测app，主要用于上报体温。在app内输入体温，数据会立刻发送至后台，形成表格。有利于快速收集用户体温，便于监测。
2、比德-业务应用：
比德人工智能公司拥有丰富，与腾讯课堂、开源中国等、网易课程等合作网，该资源可用于日常学习、工作等，比德人工智能将提供广泛、深入的信息化学习服务及支持云基础设施，方便每位用户解决问题。
3、比德-管理与监管app：
比德人工智能有一款针对于故障做出预警的防护措施，能有效地防止故障发生后不能及时解决的情况，app反应迅速。形成一条龙链式服务，高性能检测故障数据，无需考虑服务器即可运行代码，是有效的人工智能检测。</p>
<h3>二、公司解决方案 </h3>
<p>信息化建设在现代化社会生活和学习生活中发挥着越来越大的作用，我们需要更好地利用信息技术来沟通协调、业务覆盖和资源整合。
比德人工智能深入检测体温信息化发展的需求，提出了促进体温测量、故障预测等信息资源流通的智能华解决方案，实现了以上报体温数据为中心的沟通融合。
比德人工智能公司利用自己的平台，为用户提供广泛、深入的信息化学习服务及支持云基础设施，方便每位用户解决问题。
比德人工智能公司针对于故障做出预警的防护措施，提高app反应速率，优化一条龙链式服务，利用高性能检测故障数据，，是有效的人工智能检测。</p>
<h3>三、公司招聘</h3>
<p>1.算法工程师</p>
<p>岗位职责：<br>
1.研究数据挖掘或统计学习领域的前沿技术，并用于实际问题的解决和优化。
2.机器学习算法研究。
3.通过对数据的敏锐洞察，深入挖掘产品潜在价值和需求，进而提供更有价值的产品和服务。
</p>
<p> 职位要求：<br>
1、计算机、数学、统计或相关专业本科及以上学历；
2、扎实的编程基础，熟练掌握至少一门编程语言Java、Python等；
3、优秀的逻辑思维和独立思考能力，对数据有敏锐的直觉；
4、具有良好的沟通能力，能够快速抓住问题的核心；
5、对工作具有很强的责任心，勇于推动事情落地。</p>
<p>2.Java开发工程师</p>
<p>职位描述：<br>
1、配合项目经理分析调研客户的需求与功能点的技术实现；
2、负责完成项目的核心代码编码、单元测试、集成测试工作，并编写相应的技术文档；
3、按照项目计划交付符合需求规格说明与质量要求的项目组件或产品；
4、参与软件需求与设计的审核、代码检查，协助项目经理实施项目。
</p>
<p>招聘要求：<br>
1. 计算机或相关专业大专以上学历；
2. 熟悉Java Web应用开发、具备一定的架构设计能力和文档能力；
3. 熟悉javascript、html/xhtml、xml、CSS3、AJAX等技术；
4. 熟悉Spring MVC、Structs等开发框架，熟悉Hibernate等ORM中间件；
5. 熟悉MySQL、 Oracle等数据库；
6. 熟悉移动互联开发、大数据等相关技术优先。</p>
<p>3.前端开发实习生</p>
<p>岗位职责：<br>
1、参与小程序/web/H5，以及大型中后台前端开发；
2、基于aPaaS平台，负责开发相关的公司业务系统；
3、根据产品设计需求，完成业务前端页面的设计与开发。</p>
<p>
任职资格：<br>
1、本科及以上学历，计算机相关专业。
2、计算机基础扎实，熟悉常见的数据结构、算法和设计模式，掌握HTML/CSS/JavaScript等前端相关技术。
3、理解并掌握JavaScript语言核心技术DOM、BOM、Ajax、JSON等，对MVVM框架应用（如Vue/React等）有一定的经验。
4、掌握 git 操作, 了解 GitHub Flow 等实践，了解HTTP协议。
5、具备良好的服务意识、责任心、较强的学习能力、优秀的团队沟通与协作能力。
6、有小程序和nodejs实战经验为加分项。
</p>
<p>4.产品运营</p>
<p>
岗位要求：<br>
1、计算机软件、网络或电子通信类相关专业。
2、具备良好的沟通能力、团队合作和服务意识，诚信正直，责任感强；
3、具有强烈学习意愿和良好的学习能力，自我驱动力强。
5、五官端正
</p>
<p>5.网络工程师</p>
<p>工作内容：<br>
1、负责网络、终端的现场运维工作。
2、负责常规的系统日常管理巡检工作。
3、协助网络、系统升级。
4、协助部门完成其他日常综合类工作。</p>
<p>任职要求：<br>
1、计算机相关专业
2、熟悉常用办公软件、操作系统安装、应用及维护。
3、具备强烈的工作责任心、良好的沟通表达能力和优秀团队合作精神。</p>
</div>
<div class="main-right">
<div class="main-right-b">● 公司简历 Company resume</div>
<a href="#"><img src="../time5简易官网/image/1.jpeg" alt="公司简历"></a>
<p>1.比德人工智能，专注于软件开发，产品设计、运营、文档类、数据分析类等相关技能服务，致力于通过人工智能技术造福人类。<br> 2.更有计算机软件、计算机硬件的研发、销售；人工智能科技、物联网科技、信息科技、云计算科技领域内的技术咨询、技术开发、技术转让、技术服务；计算机系统集成、数据处理服务；电子产品、集成电路、监测设备的研发和销售；企业管理咨询、市场信息咨询；网络工程的安装、调试、维护；动漫设计；广告的设计、制作、代理、发布。 </p>
</div>
</div>
<!-- 图片 -->
<div class="pothon">
<a href="#">
<img src="../time5简易官网/image/18.jfif" alt="">
</a>
</div>
<!-- 分块 -->
<div class="block">
<div class="block-left">
<a href="#"><img src="../time5简易官网/image/33.jpg" alt="个人博客" title="个人博客"></a>
</div>
<div class="block-center">
<a href="#"><img src="../time5简易官网/image/31.jpg" alt="腾讯课堂" title="腾讯课堂"></a>
</div>
<div class="block-right">
<a href="#"><img src="../time5简易官网/image/34.jpg" alt="网易课堂" title="网易课堂"></a>
</div>
<!-- 分块文字 -->
<div class="block-language-1">
<h3 style="text-align: center;">个人博客</h3>
<p>专长领域： WEB开发, 软件开发管理, 运维/系统/网络管理</p>
<p>开发平台：Python, .NET/C#, ASP,HTML/CSS, Linux/Unix</p>
</div>
<div class="block-language-2">
<h3 style="text-align: center;">腾讯课堂</h3>
<p>4年程序员，3年项目经理，精通SQL Server、Mysql、Oracle、C#、Java、Python。</p>
</div>
<div class="block-language-3">
<h3 style="text-align: center;">网易云课堂</h3>
<p>用户可以根据自身的学习程度，自主安排学习进度。</p>
<p>学习计划为云课堂独有研发，针对不同用户的学习需求，推荐或由用户自己创建适合自己程度的学习内容和周期</p>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<h3>公司版权:比德人工智能基础软件有限责任公司 地址:广西崇左市江州区骆越大道1号信息工程学院5410办公室 电话:0771-7910519 邮箱:2430058494@qq.com</h3>
</div>
</body>
</html>
2.CSS
代码如下（示例）：
*{
margin:0;
padding: 0;
/* overflow: hidden; */
}
a{display: inline-block;text-decoration: none;}
ul{list-style: none;}
ul,h1,p{
margin:0;
padding: 0;
}
input,button{
margin:0;
padding: 0;
border: 0;
outline: none;
}
body{
/* background-image: url(../image/20.jfif);
background-repeat: repeat; */
}
.headr{
width: 120rem /* 1920/16 */;
height: 7.5rem /* 120/16 */;
background-color: white;
margin-bottom: .3125rem /* 5/16 */;
position: relative;
}
.headr-logo{
width: 14.5625rem /* 233/16 */;
height: 7.5rem /* 120/16 */;
box-shadow: 0px 0px 0px rgba(0,0,0,0.3);
}
.headr-logo a{
display: block;
position: absolute;
left:200px;
}
.headr-form{
width: 34.375rem /* 550/16 */;
height: 2.1875rem /* 35/16 */;
position: absolute;
background-color: turquoise;
top:40px;
left:600px;
}
.headr-form input{
width: 30.9375rem /* 495/16 */;
height: 2.0625rem /* 33/16 */;
border:1px solid red;
float:left;
font-size:14px;
padding-left: 3px;
}
.headr-form button{
width: 3.125rem /* 50/16 */;
height: 2.1875rem /* 35/16 */;
background-color: rgb(255, 0, 21);
text-align: center;
line-height: 35px;
font-weight: 700;
float:left;
}
.benter{
width: 100rem /* 1600/16 */;
height: 3.75rem /* 60/16 */;
margin: 0 auto;
margin-bottom: 10px;
background-color: gray;
border:1px solid rgb(24, 34, 34);
border-radius: 5px;
}
.benter ul li{
font-size: 16px;
font-family: "宋体";
font-weight: 700;
float:left;
line-height: 60px;
margin: 0 20px;
padding-left: 80px;
color:black;
}
li a:hover{
color:red;
}
.main{
width: 120rem /* 1920/16 */;
height: 43.75rem /* 700/16 */;
/* overflow: hidden; */
}
.main-left{
width: 25rem /* 400/16 */;
height: 43.75rem /* 700/16 */;
/* background-color: rgb(216, 208, 208); */
float: left;
border-right: 1px solid;
}
.main-left-a{
width: 25rem /* 400/16 */;
height: 1.875rem /* 30/16 */;
border: 1px solid gray;
outline:2px gray ridge;
font-size: 16px;
font-family: "宋体";
font-weight: 700;
line-height: 30px;
}
p{
text-indent:2em;
font-size: 13px;
padding: 0;
line-height: 1.5;
}
.main-top{
width: 68.125rem /* 1090/16 */;
height: 43.75rem /* 700/16 */;
background-color: white;
float: left;
border: 1px solid;
overflow:scroll;
margin-left: 8px;
margin-right: 8px;
}
.main-top a{
width: 68.125rem /* 1090/16 */;
height: 18.75rem /* 300/16 */;
}
.main-right{
width: 25rem /* 400/16 */;
height: 43.75rem /* 700/16 */;
/* background-color: rgb(216, 208, 208); */
float: left;
border-left: 1px solid;
}
.main-right-b{
width: 25rem /* 400/16 */;
height: 1.875rem /* 30/16 */;
border: 1px solid gray;
outline:2px gray ridge;
font-size: 16px;
font-family: "宋体";
font-weight: 700;
line-height: 30px;
}
p{
text-indent:2em;
font-size: 13px;
padding: 0;
line-height: 2;
}
.pothon{
width: 100rem /* 1600/16 */;
height: 56.25rem /* 900/16 */;
margin:0 auto;
background-color: salmon;
/* border-radius: 15px; */
border-top: 2px;
margin-bottom: 8px;
opacity: 1;
border:1px solid white;
}
.block{
width: 120rem /* 1920/16 */;
height: 37.5rem /* 600/16 */;
/* background-color: skyblue; */
position: relative;
margin-bottom: 8px;
}
.block-left{
width: 18.75rem /* 300/16 */;
height: 18.75rem /* 300/16 */;
position: absolute;
left:12.5rem /* 200/16 */;
/* background-color: slateblue; */
border-radius: 35px;
}
.block-center{
width: 300px;
height: 300px;
position: absolute;
left:800px;
/* background-color: slateblue; */
border-radius: 35px;
}
.block-right{
width: 300px;
height: 300px;
position: absolute;
left:1400px;
/* background-color: slateblue; */
border-radius: 35px;
}
.block-language-1 {
width: 18.75rem /* 300/16 */;
height: 12.5rem /* 200/16 */;
position: absolute;
left:200px;
top:320px;
background-color: white;
/* border:1px solid; */
}
.block-language-2{
width: 18.75rem /* 300/16 */;
height: 12.5rem /* 200/16 */;
position: absolute;
left:800px;
top:320px;
background-color: white;
}
.block-language-3{
width: 18.75rem /* 300/16 */;
height: 12.5rem /* 200/16 */;
position: absolute;
left:1400px;
top:320px;
background-color: white;
}
.footer{
width: 100rem /* 1600/16 */;
height: 3.75rem /* 60/16 */;
background-color: gray;
border-radius: 5px;
margin:0 auto;
}
.footer h3{
line-height: 60px;
margin-left:60px;
}
---
## 总结
可以给作者点个关注或者收藏一下，是对作者最大的支持
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
