Web第二次作业_补充完小鹅通首页（静态）
目录
题目
index
css
style
解题
技术优势
html
css
运营服务
html
css
小鹅通
html
css
咨询
html
css
友情链接、公司信息
html
css
效果展示
技术优势
运营服务
小鹅通
咨询
友情链接、公司信息
题目
index
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小鹅通-首页</title><!-- 引入页面样式 --><link rel="stylesheet" href="./css/style.css"><link rel="stylesheet" href="./css/index.css">
</head><body><!-- 页头banner图 --><div class="bg header"><!-- 页头导航 --><div class="nav"><div class="content"><!-- 左侧菜单 --><div class="nav-menus"><div class="logo"></div><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><li><a href="#">渠道合作</a></li><li><a href="#">下载与帮助</a></li><li><a href="#">关于我们</a></li></ul></div><!-- 右侧登录 --><div class="nav-login"><div>我是学员</div><div>商家登录</div><div>免费试用</div></div></div></div><!-- banner图 --><div class="banner"></div></div><!-- 产品介绍 --><div class="bg intro"><h1>我们的产品能力</h1><img src="./images/m3moa2m10v5k.webp" alt=""><div class="info"><div><h3 class="title active">知识店铺</h3><p>1分钟搭建您的知识商城<br>助力高效知识变现</p><a href="#">免费试用 →</a></div><div><h3 class="title">私域直播</h3><p>企业级专属私域直播平台<br>实现私域流量高效运营</p><a href="#">免费试用 →</a></div><div><h3 class="title">企微SCRM</h3><p>企业微信私域运营神器<br>数据洞察驱动业绩增长</p><a href="#">免费试用 →</a></div></div></div><!-- sence --><div class="bg sence"><h1>我们的场景解决方案</h1><ul class="list"><li>公域获客</li><li>私域运营</li><li>直播带货</li><li>内容交付</li><li>数据化运营</li></ul><div class="info"><img src="./images/m10c72vn0zzo.webp" alt=""><div class="msg"><h2>公域获客</h2><h3>多渠道获客，沉淀私域流量池</h3><ul><li>打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现</li><li>多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池</li><li>丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI</li></ul><div class="btns"><div>免费试用</div><div>了解详情</div></div></div></div></div><!-- 行业解决方案 --><div class="bg industry"><h1>我们的行业解决方案</h1><div class="box"><div class="b-left"><p class="active"><img src="./images/m0z15s580ei2.webp" alt=""><span>新零售门店</span></p><p><img src="./images/m0z15s560wz6.webp" alt=""><span>职业培训</span></p><p><img src="./images/m0z15tx30tif.webp" alt=""><span>知识付费</span></p><p><img src="./images/m2bmj0r30gtx.webp" alt=""><span>美业直播</span></p></div><div class="b-center"><h2>新零售门店解决方案</h2><p>私域直播带货+推广门店体系，助力大健康商家私域流量高效变现</p><div class="items"><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div><div class="item-box"><img src="./images/m0z15s560wz6.webp" alt=""><span>直播带货</span></div></div><div class="btns"><div>免费试用</div><div>了解详情</div></div></div><div class="b-right"><h3>行业案例</h3><div class="item-box"><img src="./images/m1n7u98h0aet.webp" alt=""><img src="./images/m1n7u98h0aet.webp" alt=""><img src="./images/m1n7u98h0aet.webp" alt=""><img src="./images/m1n7u98h0aet.webp" alt=""></div></div></div></div><!-- 技术优势 --><div class="bg tech"></div><!-- 运营服务 --><div class="bg service"></div><!-- 小鹅通 --><div class="bg xiaoet"></div><!-- 咨询 --><div class="bg advisory"></div><!-- 友情链接、公司信息 --><div class="bg message"></div>
</body></html>css
.bg{width:100%;
}.header{background-image: url(../images/m28mek5n0yyx.webp);background-size:cover;background-position:center;
}.nav{height: 72px;/* background-color:aqua; */background-color:transparent;display:flex;justify-content: center;transition: .2s all;
}
.nav:hover{background-color:white;/* css3样式：过渡动画，让样式过渡持续指定时间 */transition: .2s all;
}.nav .content{width:1600px;/* background-color:antiquewhite; */display: flex;justify-content: space-between;
}
.logo{height:72px;width:120px;background-image:url(../images/logo.png);background-size: 115px 35px;background-repeat: no-repeat;background-position: 0 20px;
}
.nav-menus{width:900px;display:flex;justify-content: space-between;
}
.nav-menus ul{list-style:none;display:flex;
}
.nav-menus li{line-height: 72px;padding: 0 15px;
}
.nav-menus li a{color:#333;text-decoration: none;cursor:pointer;
}
.nav-menus li a:hover{color:blue;
}.nav-login{display:flex;align-items: center;gap:20px;
}
.nav-login div:nth-of-type(2),
.nav-login div:nth-of-type(3),
.btns div:nth-of-type(1),
.btns div:nth-of-type(2){transition: .2s all;cursor:pointer;width:100px;height:40px;line-height: 40px;text-align:center;border:solid 1px #4872f6;border-radius:5px;background-color:white;color:#4872f6;
}
.btns div:nth-of-type(1),
.btns div:nth-of-type(2):hover,
.nav-login div:nth-of-type(3),
.nav-login div:nth-of-type(2):hover{color:white;background-color:#4872f6;transition: .2s all;
}
.info .msg .btns div:nth-of-type(1):hover,
.nav-login div:nth-of-type(3):hover{background-color:#819cf8;transition: .2s all;
}.banner{height:454px;/* background-color:bisque; */
}
.intro{padding: 90px;height:995px;background-color:#f5faff;display:flex;flex-direction: column;align-items: center;justify-content: space-between;
}
.industry h1,
.intro h1,
.sence h1{font-size:42px;
}
.intro img{width:1263px;height:490px;
}
.intro .info{width:1263px;display:flex;flex-direction: row;justify-content: space-between;
}
.info > div{width: 407px;height: 194px;background-color:white;border-radius:12px;padding:28px;display:flex;flex-direction: column;justify-content: space-between;
}
.info .title{color:#333;font-size:26px;font-weight: 400;
}
.intro .info div:nth-of-type(1){border-top: solid 5px #4872f6;
}
.info .active{color:#4872f6;
}
.info p{color:gray;
}
.info a{color:#4872f6;text-decoration: none;
}.sence{padding: 90px;height:885px;background: linear-gradient(120deg, #ffffff, #e6edf6);display:flex;flex-direction: column;align-items: center;justify-content: space-between;
}
.sence .list{list-style:none;background-color:white;width:725px;height:42px;border-radius:21px;display:flex;justify-content: space-evenly;
}
.list li{height:42px;width:145px;border-radius:21px;text-align:center;line-height: 42px;font-size:14px;font-weight:400;
}
.list li:nth-of-type(1){background-color:#4872f6;color:white;
}
.sence .info{background-color:#f5f8fc;width:1263px;height:527px;display: flex;flex-direction: row;border-radius:12px;overflow:hidden;border:solid 5px white;
}
.sence .info img{width:650px;height:527px;
}
.sence .info .msg{width:100%;height:100%;padding: 50px;
}
.sence .msg h2{font-size:32px;
}
.sence .msg h3{font-size:26px;font-family: "黑体";font-weight:400;
}
.sence .msg ul{list-style:none;/* list-style-image: url(../images/ul.png); *//* list-style-position: inside; */color:gray;height:200px;/* background-color:#819cf8; */display:flex;flex-direction: column;justify-content: space-between;
}
.sence .msg ul li{background-image:url("../images/ul.png");background-repeat: no-repeat;background-position: 0 10px;padding-left:25px;
}
.btns{display:flex;gap: 20px;
}.industry{height:732px;background-color:aquamarine;background-image:url(../images/m0w7ssdh01vr.png);background-size:cover;background-position:center;display: flex;flex-direction: column;justify-content: space-evenly;align-items: center;
}
.industry h1{color:white;
}
.industry .box{width: 1263px;height: 457px;background-color: rgba(33, 39, 47, 0.8);border-radius:12px;overflow:hidden;backdrop-filter: blue(5px);display:flex;
}
.box .b-left{width: 181px;height: 457px;background-color: #2e3646;padding:28px 21px;
}
.b-left{display:flex;flex-direction: column;gap:20px;
}
.b-left p{width:146px;height: 56px;display: flex;justify-content: center;align-items: center;cursor: pointer;
}
.b-left p.active{background: linear-gradient(90deg, #3e59af, #2e3646);
}
.b-left img{width:20px;height:20px;
}
.b-left span{color:#fff;
}
.b-center{padding: 35px;color:white;display:flex;flex-direction: column;justify-content: space-between;font-size:13px;
}
.b-center h2{font-size:26px;
}
.b-center .items{width:600px;display:flex;gap:20px;flex-wrap: wrap;
}
.items .item-box{width:75px;height: 75px;border:solid 1px #666;border-radius:4px;display:flex;flex-direction: column;align-items: center;justify-content: space-evenly;
}
.items .item-box img{width:30px;height:30px;
}
.item .btns{height:150px;
}
.b-right{width:200px;height:100%;padding:50px;
}
.b-right h3{padding-left:10px;padding-bottom:50px;font-size:18px;font-weight:500;color:white;
}
.b-right .item-box{display:flex;flex-wrap: wrap;gap:20px;width:200px;
}
.b-right .item-box img{width:83px;height: 83px;
}.tech{height: 658px;background-color:blanchedalmond;
}
.service{height: 734px;background-color:aquamarine;
}
.xiaoet{height:1058px;background-color:bisque;
}
.advisory{height:264px;background-image:url(../images/m201jna00mof.png);background-size:cover;background-position:left;
}
.message{height:721px;background-color:black;
}style
*{margin: 0;padding: 0;box-sizing: border-box;
}
html, body{width:100%;height:100%;font-family: "微软雅黑";font-size: 16px;
}解题
技术优势
html
<!-- 技术优势 --><div class="bg tech"><h1>我们的技术优势</h1><div class="tech-container"><div class="t-left"><!-- 对勾在HTML中的实体字符✓或者✓ --><h2>超稳定</h2><span>✓多云负载均衡/全球CDN加速</span></div><div class="t-middle"><h2>高并发</h2><span>✓支持多用户同时在线</span></div><div class="t-right"><h2>超流畅</h2><span>✓观看端自动探测并自动跨云线路切换</span></div></div></div>css
/* 技术优势 */
.tech{height: 658px;background-color: #F5F7FA;padding: 91px 0;display: flex;flex-direction: column;align-items: center;
}
.tech h1 ,.service h1 ,
.xiaoet h1 ,.advisory h1{font-size: 42px;
}
.tech-container {width: 1263px;height: 373px;background-color: #F5F7FA;margin-top: 42px;display: flex;justify-content: space-between;
}
.t-left {width: 324px;/* background-color: gold; *//* 背景的复合属性：两个值被逗号分隔，它们会被叠加在一起。渐变会覆盖在背景图像之上 *//* 注：如果第一个值是背景图，则背景图像会在渐变之上显示（书写顺序有一定的优先级） */background: linear-gradient(to right ,#3F464C ,transparent) ,url(../images/tech1.png);
}
.t-middle {width: 587px;/* background-color: greenyellow; *//* 渐变中带着透明度可以使用rgba或者hsla来取颜色 */background: linear-gradient(to right ,rgba(1, 82, 217, 0.9) ,rgba(74, 144, 249, 0.8)) ,url(../images/tech2.png);
}
.t-right {width: 324px;/* background-color: saddlebrown; */background: linear-gradient(to right ,#3F464C ,transparent) ,url(../images/tech3.png);
}
.t-left ,.t-middle ,.t-right {border-radius: 8px;display: flex;flex-direction: column;justify-content: center;padding-left: 46px;color: #F3F4F4;
}
.t-left h2 ,.t-middle h2 ,.t-right h2 {font-size: 34px;font-weight: 400;
}
.t-left span ,.t-middle span ,.t-right span {margin-top: 28px;
}运营服务
html
<!-- 运营服务 --><div class="bg service"><h1>我们的运营服务</h1><div class="service-container"><div class="contain-box"><div class="contain-box1"><img src="./images/服务运营1.png"><h2>社群服务</h2><span>标杆商家分享，同行商家交流，总比别人快一步</span></div><div class="contain-box2"><img src="./images/服务运营2.png"><h2>管家服务</h2><span>客户经理、服务管家、多角色在群，服务全面包围</span></div><div class="contain-box3"><img src="./images/服务运营3.png"><h2>大客服务</h2><span>设置夜班服务管家/假期值班管家，24小时在线服务，服务从不掉线</span></div><div class="contain-box4"><img src="./images/服务运营4.png"><h2>运维服务</h2><span>需求24小时反馈，需求处理率大于90% ，产品经理1v1回复</span></div></div><div class="contain-bnts"><!-- 大于号：>和小于号：< --><!-- <div class="btn1"><</div><div class="btn2">></div> --><div class="btn1"><img src="./images/服务按钮1.png"></div><div class="btn2"><img src="./images/服务按钮2.png"></div></div></div></div>css
/* 运营服务 */
.service{height: 734px;background-color:#FAFAFA;padding: 91px 0;display: flex;flex-direction: column;align-items: center;
}
.service-container {height: 547px;width: 100%;/* background-color: seashell; */display: flex;flex-direction: column;align-items: center;overflow: hidden;
}
.contain-box {/* width: 1684px; */height: 333px;/* background-color: violet; */margin-top: 60px;margin-left: 464px;display: flex;
}
.contain-box1 ,.contain-box2 ,
.contain-box3 ,.contain-box4 {width: 403px;height: 336px;/* background-color: seagreen; */margin-right: 28px;
}
.contain-box1 img ,.contain-box2 img ,
.contain-box3 img ,.contain-box4 img {width: 403px;height: 214px;border-radius: 6px;
}
.contain-box1 h2 ,.contain-box2 h2 ,
.contain-box3 h2 ,.contain-box4 h2 {margin-top: 20px;margin-bottom: 14px;color: #333333;font-size: 21px;font-weight: 350;
}
.contain-box1 span ,.contain-box2 span ,
.contain-box3 span ,.contain-box4 span {color: #666;
}
.contain-bnts {width: 1262px;height: 50px;/* background-color: lawngreen; */margin-top:60px;display: flex;
}
.btn1 ,.btn2{width: 50px;height: 50px;background-color: white;border-radius: 50%;/* color: #343434;font-size: 21px;font-weight: 550;line-height: 50px; */display: flex;justify-content: center;align-items: center;
}
.btn2 {margin-left: 24px;
}
.btn1 img ,.btn2 img {width: 21px;height: 21px;
}小鹅通
html
<!-- 小鹅通 --><div class="bg xiaoet"><h1>他们都在用小鹅通</h1><span>（排名不分先后顺序）</span><div class="contain1"><div class="box-left"><div></div><h2>小红书·种草学</h2><span>小红书种草学是小红书官方营销学习平台，为不同行业、不同成长阶段的品牌和商家提供丰富多元的学习内容。小红书种草学与小鹅通深度合作，通过搭建培训平台让赋能客户变得更高效</span></div><div class="box-middle"><div></div><h2>刘润·进化的力量</h2><span>主要提供商业和管理相关知识传播并和为企业提供商业战略咨询服务。小鹅通为刘润打造了专属进化岛圈子，为刘润和用户提供了深度互动平台</span></div><div class="box-right"><div></div><h2>博商大课堂</h2><span>专注于为中小民营企业家提供管理培训/咨询辅导和资源互助等全生命周期服务，构筑横跨全球17座城市的教学网络，汇聚高校专家与实战导师帮助10万余企业家实现成长升华，并多次荣登中国最佳企管培训机构榜单前列</span></div></div><div class="contain2"><!-- 走马灯效果 --><div><ul class="contain2-list1"><li><img src="./images/row1.png"></li><li><img src="./images/row1.png"></li><li><img src="./images/row1.png"></li></ul></div><div><ul class="contain2-list2"><li><img src="./images/row2.png"></li><li><img src="./images/row2.png"></li><li><img src="./images/row2.png"></li></ul></div><div><ul class="contain2-list3"><li><img src="./images/row3.png"></li><li><img src="./images/row3.png"></li><li><img src="./images/row3.png"></li><li><img src="./images/row3.png"></li></ul></div></div><div class="contain3"><p>查看更多案例></p></div></div>css
/* 小鹅通 */
.xiaoet{height:1054px;background-color: #FDFEFF;background-image: url(../images/xiaoetong-bg.png);background-repeat: no-repeat;padding: 91px 0;display: flex;flex-direction: column;align-items: center;
}
.xiaoet span {margin-top: 14px;color: #666666;font-size: 18px;
}
.contain1 {width: 1263px;height: 373px;/* background-color: saddlebrown; */margin-top: 31px;display: flex;
}
.box-left ,.box-middle ,.box-right {width: 401px;background-color: white;margin-right: 30px;border-radius: 6px;
}
.box-left >div {width: 401px;height: 226px;background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_left.webp);background-size: cover;border-radius: 6px;
}
.box-middle >div {width: 401px;height: 226px;background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_middle.webp);background-size: cover;border-radius: 6px;
}
.box-right >div {width: 401px;height: 226px;background-image: linear-gradient(to bottom ,rgba(255, 255, 255, 0.1) ,rgba(246, 249, 253, 0.4)) ,url(../images/xiaoet_box_right.webp);background-size: cover;border-radius: 6px;
}
.box-left h2 ,.box-middle h2 ,.box-right h2 {padding: 14px 28px 0px;font-size:21px;
}
.box-left span ,.box-middle span ,.box-right span {padding: 10px 28px 0px;margin-top: 0px;font-size: 14px;display: flex;
}
.contain2 {height: 265px;width: 100%;/* background-color: darksalmon; */margin-top: 18px;display: flex;flex-direction: column;
}
.contain2 >div {width: 1682px;height: 88px;/* background-color: springgreen; */margin-top: 0px;flex-shrink: 0;overflow: hidden;
}
.contain2-list1 ,.contain2-list3 {width: 1682px;height: 88px;list-style: none;display: flex;animation: move 70s infinite linear reverse;
}
.contain2-list2 {width: 1682px;height: 88px;list-style: none;display: flex;animation: move 58s infinite linear reverse;
}
.contain2-list1 li ,.contain2-list2 li ,.contain2-list3 li {width: 1682px;height: 88px;
}
.contain2-list1 li img ,.contain2-list2 li img ,.contain2-list3 li img {width: 1682px;height: 88px;
}
@keyframes move {0% {transform: translateX(0);}100%{transform: translateX(-3364px);}
}
.contain3 {width: 130px;height: 38px;/* background-color: seagreen; */margin-top: 70px;border: #1472FF 1px solid;color: #1472FF;/* 居中显示不使用弹性盒子了 */line-height: 38px;text-align: center;font-size: 14px;border-radius: 4px;
}咨询
html
<!-- 咨询 --><div class="bg advisory"><h1>立即扫码咨询，领取您的专属解决方案</h1><div class="contain"><div class="img"><img src="./images/advisory.webp"></div><div class="advisory-info"><h2>扫码添加客户经理</h2><p>或者您也可以先</p><div>免费试用</div></div></div></div>css
/* 咨询 */
.advisory{height:264px;background-image:url(../images/m201jna00mof.png);background-size:cover;background-position:left;padding: 35px 0px;display: flex;flex-direction: column;align-items: center;
}
.advisory h1 {color: white;font-size: 35px;
}
.advisory .contain {width: 1263px;height: 193px;margin: 0px 210px;/* background-color: aquamarine; */display: flex;align-items: center;justify-content: center;
}
.img {width: 119px;height: 123px;background-color: white;margin-right: 25px;padding: 7px;
}
.img img {width: 106px;height: 106px;
}
.advisory-info {width: 175px;height: 115px;/* background-color: salmon; */margin-left: 10px;color: white;
}
.advisory-info h2 {font-size: 21px;font-weight: 400;margin-bottom: 7px;
}
.advisory-info p {font-size: 15px;margin-bottom: 22px;
}
.advisory-info >div {background-color: white;width: 141px;height: 42px;border-radius: 4px;color: #1F79FF;line-height: 42px;text-align: center;
}友情链接、公司信息
html
<!-- 友情链接、公司信息 --><div class="bg message"><div class="message-info1"><dl><dt>场景</dt><dd>全域获客</dd><dd>私域运营</dd><dd>直播带货</dd><dd>内容交付</dd><dd>数据化运营</dd><dd>企业内训</dd></dl><dl><dt>行业</dt><dd>零售电商</dd><dd>职业培训</dd><dd>知识付费</dd><dd>企业营销</dd><dd>美业直播</dd><dd>企业培训</dd><dd>社区团购</dd><dd>营销会务</dd></dl><dl><dt>产品</dt><dd>知识店铺</dd><dd>私域直播</dd><dd>企微 SCRM</dd><dd>企学院</dd><dd>智能投放</dd><dd>海外版 eLink</dd><dd>小鹅云</dd></dl><dl><dt>服务</dt><dd>小鹅创业社区</dd><dd>本地社群</dd><dd>教练联盟</dd><dd>小鹅通训练营</dd><dd>对话标杆</dd></dl><dl><dt>关于我们</dt><dd>公司简介</dd><dd>加入我们</dd><dd>媒体报道</dd><dd>更多资讯</dd><dd>客户案例</dd><dd>帮助中心</dd></dl><dl><dt>媒体报道</dt><dd>D轮融资1.2亿美元，小鹅通究竟在做什么？</dd><dd>知识付费用户达5.27亿，内容创业的下半场风口在“服务”</dd><dd>知识工作者的终极梦想，可能是拥有一个“第二大脑”</dd><dd>小鹅通：让知识更有价值</dd><dd>小鹅通联合艾瑞咨询发布《2023年中国私域运营》</dd></dl><div class="contact"><h2>400-102-6665</h2><p>周一至周日 9:00-21:00</p><div class="contact-img"><div class="left"><img src="./images/message1.png"><p>关注小鹅通公众号</p></div><div class="right"><img src="./images/message2.jpg"><p>进入小鹅创业社区</p></div></div></div></div><div class="message-info2"><ul><li>深圳总部：深圳市南山区粤海街道科兴科学园D3栋7楼</li><li>北京地址：北京市朝阳区朝外大街乙6号23层2301B-2307</li><li>上海地址：中国（上海）自由贸易试验区世纪大道1500号1601-A室</li></ul><ul><li>商务合作：support@xiaoe-tech.com</li><li>渠道合作：partner@xiaoe-tech.com</li><li>投诉意见：xiaoeks@xiaoe-tech.com</li></ul><ul><li>互联网违法和不良信息举报电话：0755-26409534</li><li>互联网不良信息举报邮箱：xiaoeks@xiaoe-tech.com</li><li>安全漏洞反馈邮箱：security@xiaoe-tech.com</li></ul></div><div class="message-info3"><span>友情链接</span><span>知识付费软件</span><span>知识付费平台</span><span>小鹅通企学院</span><span>私域直播工具</span><span>小鹅通APP</span><span>小鹅创业社区</span><span>小鹅通移动版</span><span>小鹅通学员版</span></div><div class="message-info4"><div class="info4-up"><div class="left"><img src="./images/message3.png"><p>《医疗器械经营监督管理办法》解读</p></div><div class="middle"><p>工商营业执照</p></div><div class="right"><div class="right1"><img src="./images/message4.png"><p>粤公网安备 44030502002037号</p></div><div class="right2"><img src="./images/message5.png"><p>工商网监 电子标识</p></div></div></div><div class="info4-down"><p>Copyright © 2015-2024 深圳小鹅网络技术有限公司 All Rights Reserved. 粤ICP备15020529号-1</p><p>互联网药品信息服务资格证书（粤）—经营性—2020—0589 医疗器械网络交易服务第三方平台备案（粤）网械平台备字（2021）第00001号</p></div></div></div>css
/* 友情链接、公司信息 */
.message{height:759px;background-color:#161E30;padding: 64px 0;display: flex;flex-direction: column;align-items: center;
}
.message-info1 {width: 1440px;height: 352px;/* background-color: seagreen; */margin-bottom: 46px;display: flex;justify-content: space-between;
}
.message-info1 dl:nth-child(1) {width: 70px;
}
.message-info1 dl:nth-child(2) {width: 56px;
}
.message-info1 dl:nth-child(3) {width: 78px;
}
.message-info1 dl:nth-child(4) {width: 84px;
}
.message-info1 dl:nth-child(5) {width: 64px;
}
.message-info1 dl:nth-child(6) {width: 300px;
}
dt {margin-bottom: 24px;color: white;height: 24px;
}
dd {margin-bottom: 16px;color: #9EA1A9;font-size: 13px;height: 22px;line-height: 22px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.contact {width: 259px;height: 352px;/* background-color: seashell; */color: #E8E9EB;
}
.contact h2 {margin-bottom: 11px;font-size: 28px;font-weight: 400;
}
.contact p {color: #9A9EA6;font-size: 12px;margin-bottom: 42px;
}
.contact-img {width: 259px;height: 163px;display: flex;justify-content: space-between;
}
.contact-img .left img ,.contact-img .right img {width: 110px;height: 110px;
}
.message-info2 {width: 1440px;height: 87px;/* background-color: goldenrod; */display: flex;color: #9A9EA6;
}
.message-info2 ul {margin-right: 32px;
}
.message-info2 ul:nth-child(1) {width: 420px;
}
.message-info2 ul:nth-child(2) {width: 240px;
}
.message-info2 ul:nth-child(3) {width: 350px;
}
.message-info2 li {list-style: none;font-size: 14px;height: 29px;line-height: 29px;
}
.message-info3 {width: 1440px;height: 36px;margin: 24px 0;padding: 7px 0;/* background-color: skyblue; */color: #9A9EA6;border-top: 1px #9A9EA6 solid;border-bottom: 1px #9A9EA6 solid;display: flex;align-items: center;
}
.message-info3 span {margin-right: 24px;width: 72px;height: 20px;line-height: 20px;font-size: 12px;
}
.message-info4 {width: 1440px;height: 67px;/* background-color: chartreuse; */display: flex;flex-direction: column;
}
.info4-up {/* background-color: sandybrown; */height: 31px;font-size: 12px;display: flex;align-items: center;justify-content: space-between;
}
.info4-up .left {width: 540px;height: 31px;color: #D0D2D6;font-size: 14px;display: flex;
}
.info4-up .left img {width: 34px;height: 15px;margin: 3px 3px 0 0;
}
.info4-up .middle {width: 72px;color: #9A9EA6;
}
.info4-up .right {width: 393px;height: 31px;color: #595E6B;display: flex;}
.info4-up .right .right1 {width: 200px;margin: 0 20px;display: flex;align-items: center;opacity: 0.7;
}
.info4-up .right .right2 {width: 122px;margin: 0 20px;display: flex;align-items: center;opacity: 0.7;
}
.info4-up .right .right1 img {width: 20px;height: 20px;
}
.info4-up .right .right2 img {width: 18px;height: 24px;
}
.info4-down {flex: 1;/* background-color: salmon; */font-size: 12px;color: #595E6B;
}效果展示
技术优势
运营服务
小鹅通
咨询
友情链接、公司信息
相关文章：
Web第二次作业_补充完小鹅通首页（静态）
目录 题目 index css style 解题 技术优势 html css 运营服务 html css 小鹅通 html css 咨询 html css 友情链接、公司信息 html css 效果展示 技术优势 运营服务 小鹅通 咨询 友情链接、公司信息 题目 index <!DOCTYPE html> <html lang…...
碳纤维复合材料制造的六西格玛管理实践：破解高端制造良率困局的实战密码
碳纤维复合材料制造的六西格玛管理实践：破解高端制造良率困局的实战密码 在全球碳中和与高端制造升级的双重驱动下，碳纤维复合材料行业正经历前爆发式增长。航空航天、新能源汽车、风电叶片等领域对碳纤维产品的性能稳定性提出近乎苛刻的要求࿰…...
在 Mac ARM 架构上使用 nvm 安装 Node.js 版本 16.20.2
文章目录 1. 安装 nvm（如果还没有安装的话）2. 加载 nvm 配置3. 列出特定系列的 Node.js 版本（远程）：4. 安装 Node.js 16.20.25. 使用指定版本的 Node.js6. 验证安装 在 Mac ARM 架构上使用 nvm 安装 Node.js 版本 16.…...
tenda路由器WriteFacMac存在远程命令执行漏洞(CVE-2024-10697)
一、漏洞简介 tenda路由器WriteFacMac存在远程命令执行漏洞 二、漏洞影响 tenda路由器三、网络测绘： fofa: title"Tenda | LOGIN"四、复现过程 POC 1 GET /goform/WriteFacMac?macls%20%3E/webroot/1.txt HTTP/1.1 Accept: text/html,application/…...
【NLP 21、实践 ③ 全切分函数切分句子】
当无数个自己离去，我便日益坦然 —— 25.2.9 一、jieba分词器 Jieba 是一款优秀的 Python 中文分词库，它支持多种分词模式，其中全切分方式会将句子中所有可能的词语都扫描出来。 1.原理 全切分方式会找出句子中所有可能的词语组合。对于一…...
晶闸管主要参数分析与损耗计算
1. 主要参数 断态正向可重复峰值电压 ：是晶闸管在不损坏的情况下能够承受的正向最大阻断电压。断态正向不可重复峰值电压 ：是晶闸管只有一次可以超过的正向最大阻断电压，一旦晶闸管超过此值就会损坏，一般情况下 反向可重复峰值电压 ：是指晶闸管在不损坏的情况下能够承受的…...
【Stable Diffusion部署至Google Colab】
Google Colab 中快速搭建带 GPU 加速的 Stable Diffusion WebUI from google.colab import drive drive.mount(/content/drive) !mkdir /content/drive/MyDrive/sd-webui-files !pip install torch==1.13.1+cu116 torchvision==0.14.1+cu116 torchaudio==0.13.1 --extra-index…...
mongoTemplate获取某列最大值
首先，MongoDB中获取某列的最大值通常是通过聚合框架中的$group和$max操作符来完成的。那在Spring Data中，应该怎么构建这个聚合查询呢？ 首先，可能需要创建一个Aggregation对象，里面包含分组和求最大值的步骤。比如&…...
基于Java的分布式系统架构设计与实现
Java在大数据处理中的应用：基于Java的分布式系统架构设计与实现 随着大数据时代的到来，数据处理的规模和复杂性不断增加。为了高效处理海量数据，分布式系统成为了必不可少的架构之一。而Java，凭借其平台独立性、丰富的生态系统以…...
独立开发日报：从AI到本地服务，5个新颖项目的启发
今天在Hacker News上看到几个特别有意思的项目，它们都找到了不同的切入点：有的用AI解决创意问题，有的深耕本地服务，有的则回归技术本质。一起来看看这些项目背后的思路。 1. AI涂色页面生成器 - 创意与AI的完美结合 这是一个基于…...
找单独的数
问题描述 在一个班级中，每位同学都拿到了一张卡片，上面有一个整数。有趣的是，除了一个数字之外，所有的数字都恰好出现了两次。现在需要你帮助班长小C快速找到那个拿了独特数字卡片的同学手上的数字是什么。 要求： 设…...
记使用AScript自动化操作ios苹果手机
公司业务需要自动化操作手机，本来以为很困难，没想到使用AScript工具出乎意料的简单，但是还有很多坑存在，写个博客记录一下。 工具信息： 手机：iphone7 系统版本：ios15 AScript官方文档链接&a…...
Android Studio集成讯飞SDK过程中在配置Project的时候有感
在配置讯飞的语音识别SDK（流式版）时候，跟着写了两个Demo，一个是YuYinTestDemo01，另一个是02，demo01比较简单，实现功能图象也比较简陋，没用讯飞SDK提供的图片，也就是没用到…...
[LLM面试题] 指示微调（Prompt-tuning）与 Prefix-tuning区别
一、提示调整(Prompt Tuning) Prompt Tuning是一种通过改变输入提示语（input prompt）以获得更优模型效果的技术。举个例子，如果我们想将一条英语句子翻译成德语，可以采用多种不同的方式向模型提问，如下图所示…...
Docker上安装Zabbix-server-mysql报错
创建新的zabbix server （mysql）容易，最后一条日志报错 cannot usedatabase"zabbix": its "users" table is empty (is this the Zabbix proxy database?) 往前还有一条关键报错信息 ERROR 1153 (08S01): Got a packe…...
c#展示网页并获取网页上触发按钮的值进行系统业务逻辑处理
日前项目上遇到需要调用一个第三方的监控接口，给对方参数后，会返回一个url地址，我方系统需要根据用户在网页上点击的不同按钮，要求如下：在打开违规提醒窗口时，需要注册Callback方法（含一个字符串…...
Flappy Bird开发学习记录
概述 为了了解一下Unity的开发过程，或者说感受？先搞简单的练练手。 工具 Unity:2022.3.51f1c1 visual studio 2022 开发过程 项目基本设置 新建2d项目，游戏画面设置为1080*1920（9：16）。 图片素材设…...
SDKMAN! 的英文全称是 Software Development Kit Manager（软件开发工具包管理器）
文章目录 SDKMAN! 的核心功能SDKMAN! 的常用命令SDKMAN! 的优势总结 SDKMAN! 的英文全称是 Software Development Kit Manager。它是一个用于管理多个软件开发工具（如 Java、Groovy、Scala、Kotlin 等）版本的工具。SDKMAN! 提供了一个简单的方式来安装、…...
?.、??、||分别是什么，又有哪些区别？？？
在 JavaScript 中，?.、?? 和 || 是三种不同的操作符。 1、?.：可选链操作符 ?. 是一个可选链操作符，用于安全地访问嵌套属性，而不用担心中间的某个属性可能为 null 或 undefined，从而避免运行时错误。 const use…...
7个国内能打开的AI绘画网站！新手福音！
以下是我收集的国内能打开的AI绘画网站。 1、6pen 网址：https://6pen.art/ 2、文心大模型 网址：https://wenxin.baidu.com/moduleApi/ernieVilg 3、Draft 网址：https://draft.art/ai- art/drawing 4、nightcafe 网址：https:/…...
JavaWeb学习-Mybatis（增删改查）
（一）Mybatis入门程序 1.创建springboot工程，并导入 mybatis的起步依赖、mysql的驱动包。（项目工程创建完成后，自动在pom.xml文件中，导入Mybatis依赖和MySQL驱动依赖） <dependencies> <!-- mybatis起步依赖 --> <dependency> …...
C/C++面试高频题解析与解题思路（附答案）
一、基础语法与核心概念 指针与引用的区别？ 问题：指针和引用在初始化、空值、操作方式上的差异是什么？ 解析： 引用必须初始化且不能指向空值，而指针可初始化为空（nullptr）。 引用是变量的别名…...
使用Java爬虫获取京东商品评论API接口（JD.item_review）数据
一、引言 在电商领域，商品评论是用户决策的重要参考依据，也是商家优化产品和服务的重要数据来源。京东作为国内领先的电商平台，提供了丰富的API接口供开发者使用，其中JD.item_review接口可以获取商品的评论数据。通过这些数据&am…...
vscode插件Remote - SSH使用教程
Remote - SSH 是一款非常实用的 Visual Studio Code (VSCode) 扩展插件，它允许开发者通过SSH连接到远程服务器，并像在本地一样进行代码编辑和调试。这意味着你可以直接在VS Code中打开位于远程机器上的文件夹，并利用本地安装的VS Code功能，如语法高亮、智能感知、Git集成等…...
【通俗易懂说模型】一篇弄懂几个经典CNN图像模型（AlexNet、VGGNet、ResNet）
🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀深度学习_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. …...
deepseek的CoT优势、两阶段训练的有效性学习笔记
文章目录 1 DeepSeek的CoT思维链的优势1.2 open-r1的CoT训练数据1.3 ReAct任务与CoT任务适用场景 2 AI推理方向：deepseek与deepmind的两条路线的差异2.1 PRM与ORM的两大学派分支的差异2.2 DeepSeek-R1的两阶段训练概述 1 DeepSeek的CoT思维链的优势 DeepSeek跟之前…...
MobaXterm的图形化界面支持：原理与分辨率问题解决
1. 概述 MobaXterm 是一款功能强大的远程访问工具，支持SSH、RDP、X11、VNC等多种协议，并内置了强大的图形界面支持，让用户能够在远程操作Linux/Unix系统时，享受到类似本地桌面的流畅体验。 与传统的SSH客户端不同，Mo…...
算法很美笔记（Java）——树
性质 树 上面的性质因为两个结点由一条边连成 结点数目越多，算法复杂度越高 二叉树 结构 层次遍历 利用队列，弹一个，加N个（队列里弹出一个元素，就把这个元素的所有孩子加进去） 具体来说：指…...
百度 API 教程 001:显示地图并添加控件
目录 01、基本使用 前期准备 显示地图 开启鼠标滚轮缩放地图 02、添加地图控件 添加标准地图控件 添加多个控件 网址：地图 JS API | 百度地图API SDK 01、基本使用 前期准备 注册百度账号 申请成为开发者 获取密钥：控制台 | 百度地图开放平台…...
OSCP - Other Machines - Loly
主要知识点 路径枚举内核漏洞提权 具体步骤 继续nmap一下先 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-01 07:12 CST Nmap scan report for loly.lc (172.16.33.25) Host is up (0.022s latency). Not shown: 65534 closed tcp ports (conn-refused) PORT …...