备案控制台
开发者社区 云计算 文章 正文

麦田国际pc官网页面HTMLCSS

2023-09-22 20
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 麦田国际pc官网页面HTMLCSS 
<!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>Document</title>
    <link rel="stylesheet" href="./box.css">
</head>
<body>
    <header>
        <div class="div1">
            <img src="./img/1_03.gif" alt="">
            <div class="div1_1">
                <p>|</p>
            </div>
            <div class="div1_2">
                <p><i> 奉行卓越品质</i></p>
                <p><i>则可拥抱世界</i> </p>
            </div>
        </div>
        <div class="div2">
            <div class="div2_1">
                <ul>
                    <li>网站首页</li>
                    <li>关于我们</li>
                    <li>新闻资讯</li>
                    <li>成功案例</li>
                    <li>尊享服务</li>
                    <li>招商加盟</li>
                    <li>联系我们</li>
                </ul>
            </div>
            <div class="div2_2"></div>
        </div>
    </header>
    <div class="div3">
        <!-- <div></div> -->
        <img src="./img/1_09.gif" alt="">
        <!-- <div></div> -->
    </div>
    <div class="div4">
        <p class="div4_1">战略合作 Strategic partners</p>
        <p class="div4_2">真诚,共赢,无微不至</p>
        <div class="div4_3">
            <div class="div4_3_1"><img src="./img/1_12.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_13.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_14.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_15.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_16.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_17.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_19.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_20.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_21.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_22.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_23.gif" alt=""></div>
            <div class="div4_3_1"><img src="./img/1_24.gif" alt=""></div>
        </div>
    </div>
    <div class="div5">
        <p class="div5_1">我们的优势 Our Advantages</p>
        <p class="div5_2">创独一无二的设计,造国际品质的产品,行无微不至的服务</p>
        <div class="div5_3">
            <div class="div5_3_1">
                <div class="yuan">
                    <div class="yuan_1"><img src="./img/1_27.gif" alt=""></div>
                </div>
                <h5 class="p1">我们的设计 our Design</h5>
                <p class="p2">从实地到方案敲定再到设计出图,每一步</p>
                <p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
                <p class="p2">出最合适的作品是最诚恳的义务.</p>
            </div>
            <div class="div5_3_1">
                <div class="yuan">
                    <div class="yuan_1"><img src="./img/1_29.gif" alt=""></div>
                </div>
                <h5 class="p1">我们的设计 our Design</h5>
                <p class="p2">从实地到方案敲定再到设计出图,每一步</p>
                <p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
                <p class="p2">出最合适的作品是最诚恳的义务.</p>
            </div>
            <div class="div5_3_1">
                <div class="yuan">
                    <div class="yuan_1"><img src="./img/1_31.gif" alt=""></div>
                </div>
                <h5 class="p1">我们的设计 our Design</h5>
                <p class="p2">从实地到方案敲定再到设计出图,每一步</p>
                <p class="p2">都有优秀的设计团队全程跟踪,为您打造</p>
                <p class="p2">出最合适的作品是最诚恳的义务.</p>
            </div>
        </div>
    </div>
    <div class="div6">
        <h5 class="div6_1">成功案例 Successful Case</h5>
        <p class="div6_2">始终终以建设温馨,和谐的家园,提升您的居家生活品味为己任</p>
        <div class="div6_3">
            <ul>
                <li>服务行业 <span></span></li>
                <li>教育行业<span></span></li>
                <li>房产行业<span></span></li>
                <li>能源行业<span></span></li>
            </ul>
        </div>
        <div class="div6_4">
            <div><img src="./img/1_36.gif" alt=""></div>
            <div><img src="./img/1_38.gif" alt=""></div>
            <div><img src="./img/1_40.gif" alt=""></div>
            <div><img src="./img/1_44.gif" alt=""></div>
            <div><img src="./img/1_45.gif" alt=""></div>
            <div><img src="./img/1_46.gif" alt=""></div>
        </div>
    </div>
    <div class="div7">
        <div class="div7_1">
            <div class="div7_2">
                <h3>公司新闻 Company News</h3>
                <p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
                <p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
                <p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
                <p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
                <p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
                <p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
                <div class="div7_3">MORE INFO-></div>
            </div>
            <div class="div7_2">
                <h3>行业新闻 Industry New:s</h3>
                <p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
                <p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
                <p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
                <p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
                <p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
                <p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
                <div class="div7_3">MORE INFO-></div>
            </div>
            <div class="div7_2">
                <h3>媒体报道 Media report:s</h3>
                <p>一款APP从设计稿到切图过程全方位揭秘 <span>10-10</span> </p>
                <p>关于移动端设计工作者必备相关素质<span>10-10</span></p>
                <p>移动产品经理必须了解 产品的体验进化设<span>10-10</span></p>
                <p>App细节设计系列 Path for ioS分析<span>10-10</span></p>
                <p>指尖上的世界杯 看国内新闻客户端功能剖<span>10-10</span></p>
                <p>更好的方式来引导用户为APP应用打分<span>10-10</span></p>
                <div class="div7_3">MORE INFO-></div>
            </div>
        </div>
    </div>
    <div class="div8">
        <ul>
            <li>网站首页</li>
            <li>关于我们</li>
            <li>产品展示</li>
            <li>客户案例</li>
            <li>新闻资讯</li>
            <li>帮助中心</li>
            <li>解决方案</li>
            <li>联系我们</li>
        </ul>
        <div class="div8_1">
            <p>Copyright @ 2002-2015 上海机械设备服务有限公司 版权所有 Power by DedeCms</p>
            <p>电话:15918779820 E-mail:89898981@qq.com 地址:上海市沙河广园东路1858新天地服装城</p>
        </div>
    </div>
</body>
</html>
* {
    padding: 0;
    margin: 0;
}
ul {
    list-style: none;
}
body {
    width: 100%;
    height: 100%;
    /* background-color: aqua; */
}
header {
    width: 100%;
    height: 100px;
    background-color: white;
    display: flex;
    position: absolute;
}
.div1 {
    width: 45%;
    height: 100%;
    background-color: white;
    display: flex;
    align-items: center;
}
.div1 img {
    width: 253px;
    height: 60px;
    margin-left: 148px;
}
.div1_1 p {
    font-size: 30px;
    margin-left: 20px;
    margin-top: -5px;
    color: #BABAB9;
}
.div1_2 p {
    margin-left: 30px;
    color: #BABAB9;
    font-family: kaiti;
}
.div2 {
    width: 55%;
    height: 100%;
    background-color: white;
    color: black;
    font-family: kaiti;
    display: flex;
    justify-content: space-between;
}
.div2_1 {
    width: 90%;
}
.div2_1 ul {
    margin-top: 47px;
    display: flex;
    justify-content: space-around;
}
.div2_1 ul li:hover{
    background-color: #E24041;
}
.div2_2 {
    width: 10%;
    height: 100%;
    background-color: white;
}
.div3 {
    display: flex;
    justify-content: space-around;
}
div3 img {
    width: 1400px;
    height: 460px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.div4 {
    width: 100%;
    height: 380px;
    background-color: #F7F7F7;
    margin-top: -4px;
    /* position: absolute; */
}
.div4_1 {
    font-size: 25px;
    text-align: center;
    padding-top: 35px;
    /* margin-top: 35px; */
}
.div4_2 {
    font-size: 15px;
    text-align: center;
    margin-top: 22px;
    color: #9CA1A8;
}
.div4_3 {
    width: 1131px;
    height: 202px;
    /* background-color: aqua; */
    display: flex;
    margin: 22px auto;
    justify-content: space-around;
    flex-wrap: wrap;
}
.div4_3_1 {
    width: 16.5%;
    height: 100px;
    /* background-color: blue; */
}
.div5 {
    width: 100%;
    height: 543px;
    background-color: #1A1B1F;
    margin-top: -4px;
    position: absolute;
}
.div5_1 {
    font-size: 25px;
    text-align: center;
    padding-top: 35px;
    color: white;
    /* margin-top: 35px; */
}
.div5_2 {
    font-size: 15px;
    text-align: center;
    margin-top: 22px;
    color: white;
}
.div5_3 {
    width: 1144px;
    height: 330px;
    /* background-color: aqua; */
    margin: 40px auto;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.div5_3_1 {
    width: 340px;
    height: 260px;
    background-color: #D1D1D3;
}
.yuan {
    width: 130px;
    height: 130px;
    background-color: white;
    border-radius: 100px;
    margin-top: -70px;
    margin-left: 105px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.yuan_1 {
    width: 110px;
    height: 110px;
    border-radius: 100px;
    background-color: #E24041;
    /* display: flex; */
}
.yuan_1 img {
    width: 70px;
    height: 70px;
    margin-top: 20px;
    margin-left: 20px;
}
.p1 {
    color: #E24041;
    font-size: 18px;
    text-align: center;
    padding-top: 31px;
}
.p2 {
    font-size: 12px;
    text-align: center;
    padding-top: 22px;
}
.div6 {
    width: 100%;
    height: 809px;
    margin-top: 540px;
    /* background-color: #2b80f7; */
}
.div6_1 {
    font-size: 27px;
    text-align: center;
    padding-top: 35px;
    /* margin-top: 35px; */
}
.div6_2 {
    font-size: 15px;
    text-align: center;
    margin-top: 22px;
    color: #BABAB9;
}
.div6_3 {
    width: 800px;
    height: 40px;
    background-color: #666666;
    margin: 35px auto;
    color: white;
    display: flex;
}
.div6_3 ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.div6_3 ul li {
    width: 200px;
    height: 100%;
    line-height: 40px;
    text-align: center;
    position: relative;
}
.div6_3 ul li:hover {
    background-color: red;
}
.div6_3 ul li:hover span {
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top-color: #f75a53;
    position: absolute;
    top: 40px;
    left: 90px;
}
.div6_4 {
    width: 1144px;
    height: 555px;
    /* background-color: #666666; */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.div7 {
    width: 100%;
    height: 352px;
    background-color: #F2F2F2;
}
.div7_1 {
    width: 1152px;
    height: 100%;
    /* background-color: aqua; */
    margin: 0 auto;
    display: flex;
}
.div7_2 {
    width: 33.3%;
    height: 100%;
    line-height: 35px;
    background-color: #F7F7F7;
}
.div7_2 h3 {
    padding-top: 37px;
}
.div7_2 p {
    font-size: 10px;
}
.div7_2 p span {
    margin-left: 100px;
}
.div7_3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 117px;
    height: 32px;
    background-color: #F75A54;
    border-radius: 5px;
    margin-top: 25px;
    color: white;
}
.div8 {
    width: 100%;
    height: 138px;
    background-color: #363636;
    color: #ccc;
}
.div8 ul {
    width: 1000px;
    display: flex;
    margin: 25px auto;
    justify-content: space-around;
}
.div8 ul li {
    width: 80px;
    height: 20px;
    padding-left: 20px;
    line-height: 1;
    border-right: 1px solid #ccc;
}
.div8 ul li:last-child {
    border: none;
}
.div8_1 p {
    padding-top: 15px;
    text-align: center;
}

858a31c9008e4814bf97e0181b87448d.jpg


终究是雾散
目录
相关文章
黄兵的博客
|
安全 数据安全/隐私保护
2022 年推荐免费在线接收短信平台（国内、国外）
现代社会中大多数人容易忘记密码，因此，为了方便，各大网站或者 APP 就相继出现以手机号码进行短信验证来注册和登录等操作。但此时，大多个人手机号码都已经是实名认证的，就非常怕存在个人信息泄露的情况。近几年网络平台用户数据泄露事件层出不穷，勿论一般平台，甚至一些全球知名企业也曾被曝出用户数据泄露问题，那基于此我们用户又能做点什么呢？
黄兵的博客
46149 0
2022 年推荐免费在线接收短信平台（国内、国外）
小小鱼儿小小林
|
9月前
仿网易官网顶部展出的大幅广告代码，附效果演示
仿网易官网顶部展出的大幅广告代码，附效果演示
小小鱼儿小小林
23 0
游客xbewbwflf4oy6
|
23天前
|
Web App开发 安全 数据安全/隐私保护
如何注册海外苹果账号下载软件？
如何注册海外苹果账号下载软件？
游客xbewbwflf4oy6
59 0
技术君
|
23天前
|
API 开发者
《支付宝开放实验室申请与使用说明》
《支付宝开放实验室申请与使用说明》
技术君
155 13
王同学睡醒了
|
6月前
如何在PC端快速下载B站视频，不是唧唧Down，学不会来打我！！！
如何在PC端快速下载B站视频，不是唧唧Down，学不会来打我！！！
王同学睡醒了
66 0
游客a4oswvtctqbx6
|
人工智能 开发者 UED
【Adobe国际认证中文官网】Adobe中国摄影计划,免费安装 正版激活
【Adobe国际认证中文官网】Adobe中国摄影计划,免费安装 正版激活
游客a4oswvtctqbx6
324 0
【Adobe国际认证中文官网】Adobe中国摄影计划,免费安装 正版激活
lqj_本人
|
存储 运维 小程序
基于腾讯云开发微信小程序（新闻发布及共享平台）下
基于腾讯云开发微信小程序（新闻发布及共享平台）下
lqj_本人
85 0
基于腾讯云开发微信小程序（新闻发布及共享平台）下
lqj_本人
|
存储 JSON 小程序
基于腾讯云开发微信小程序（新闻发布及共享平台）上
基于腾讯云开发微信小程序（新闻发布及共享平台）上
lqj_本人
249 0
基于腾讯云开发微信小程序（新闻发布及共享平台）上
lqj_本人
|
存储 运维 小程序
基于腾讯云开发小程序（新闻发布及共享平台）中
基于腾讯云开发小程序（新闻发布及共享平台）中
lqj_本人
123 0
基于腾讯云开发小程序（新闻发布及共享平台）中
easyrecovery
|
人工智能 算法 安全
证照之星XE最新版app免费版照片处理软件
证照之星—— 专业证件照制作平台制作证件照从未如此简单!全新的证照之星 XE 重磅发布!告别经典的UI界面，本次全新版本中我们引入了最流行的设计元素，对证照之星界面进行全面重构，带来美观且直观的操作体验。
easyrecovery
203 0

热门文章

最新文章

  • 1
    基于OpenCV的双目摄像头测距（误差小）
  • 2
    Linux块层技术全面剖析-v0.1
  • 3
    Python零基础学习笔记（二）——数据的存储
  • 4
    Java9模块化遇坑
  • 5
    封装之打线简介
  • 6
    SSH远程管理OpenSSH使用
  • 7
    当autoBCC遇上scan to email
  • 8
    谷歌更改警告方式：可能会受到有国家资助的黑客组织攻击
  • 9
    MVC
  • 10
    使用EA逆向生成数据库E-R图
  • 1
    基于ssm+vue.js+uniapp小程序的家纺用品销售管理系统附带文章和源代码部署视频讲解等
    128
  • 2
    基于ssm+vue.js+uniapp小程序的游戏虚拟道具交易网站附带文章和源代码部署视频讲解等
    93
  • 3
    基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
    110
  • 4
    基于ssm+vue.js+uniapp小程序的学生工作管理系统附带文章和源代码部署视频讲解等
    86
  • 5
    基于ssm+vue.js+uniapp小程序的公司进销存管理系统附带文章和源代码部署视频讲解等
    87
  • 6
    基于ssm+vue.js+uniapp小程序的金融支付终端管理系统附带文章和源代码部署视频讲解等
    63
  • 7
    基于ssm+vue.js+uniapp小程序的校园疫情管控系统附带文章和源代码部署视频讲解等
    77
  • 8
    基于ssm+vue.js+uniapp小程序的个体户商城附带文章和源代码部署视频讲解等
    40
  • 9
    基于ssm+vue.js+uniapp小程序的长安材料批发市场管理系统附带文章和源代码部署视频讲解等
    64
  • 10
    基于SpringBoot+Vue+uniapp微信小程序的微信小程序跑腿的详细设计和实现
    52

    • 相关课程

    更多
  • 云上建站快速入门-博客、论坛、CMS、电子商务网站统统搞定

    • 相关电子书

    更多
  • 《 云·企业官网产品介绍--客户版》
  • 《云市场-云·企业官网产品介绍》
  • 网易NEI接口管理解决方案

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 星轨-钉钉APP分发实训
  • 制作开放场景
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • 搭建Magento电子商务网站
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考