HTML第二次作业
第一步：建立新文件css，images，index.html
第二部代码
css
#style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
width:100%;
height:100%;
font-family: "宋体";
font-size: 16px;
}index.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:rgb(255, 127, 234);
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;
}index.html：
小鹅通-首页
我们的产品能力
我们的场景解决方案
- 公域获客
- 私域运营
- 直播带货
- 内容交付
- 数据化运营
公域获客
多渠道获客，沉淀私域流量池
- 打通抖音/快手/小红书/视频号/公众号，支持直播间/短视频/账号主页等多种课程挂载方式，快速开启知识变现
- 多种公域转私域工具，支持添加企微/引流加群加人/渠道活码/分配引擎等工具，客户可批量导流到私域流量池
- 丰富的广告获客能力，落地页支持表单/支付类/0元领取/添加企微等多场景，提升广告ROI
免费试用
了解详情
我们的行业解决方案
新零售门店
职业培训
知识付费
新零售门店解决方案
私域直播带货+推广门店体系，助力大健康商家私域流量高效变现
直播带货
直播带货
直播带货
直播带货
直播带货
直播带货
直播带货
直播带货
直播带货
免费试用
了解详情
行业案例
第三步：实验结果展示
