碎碎念
hello，我是小九，今天咱们记录嘉士伯啤酒网站网页设计。不出意外，嘿嘿，又是我的期末实训项目，欢迎各位看官批评指正。
样式展示
- 二级菜单固定在顶部，随页面移动而移动
- swiper引用了js文件搭配使用达到效果。
- 点击视频播放，点击图片有放大的效果
代码展示
二级菜单HTML代码
<div class="box1-1">
<ul class="nav1">
<li class="border1">
<a href="#">公司简介</a>
<ul class="nav2">
<li> <a href="#">重啤股份</a>
<ul class="nav3">
<li><a href="#">发展历程</a></li>
</ul>
</li>
<li>
<a href="#">嘉士伯中国</a>
<ul class="nav3">
<li><a href="#">发展历程</a></li>
<li><a href="#">业务单元</a></li>
</ul>
</li>
<li>
<a href="#">嘉士伯集团</a>
<ul class="nav3">
<li><a href="#">我们的继承</a></li>
<li><a href="#">“扬帆22”战略</a></li>
<li><a href="#">嘉士伯供应链</a></li>
</ul>
</li>
<li>
</ul>
</li>
<li class="border1"><a href="#">畅销品牌</a></li>
<li class="border1">
<a href="#">可持续发展</a>
<ul class="nav2">
<li>
<a href="#">集团战略</a>
<ul class="nav3">
<li><a href="#">零碳足迹</a></li>
<li><a href="#">零水资源浪费</a></li>
<li><a href="#">报告及法规</a></li>
</ul>
</li>
<li>
<a href="#">中国实践</a>
<ul class="nav3">
<li><a href="#">理性饮酒</a></li>
<li><a href="#">绿色发展</a></li>
<li><a href="#">健康安全</a></li>
<li><a href="#">云南业务单元环保信息</a></li>
</ul>
</li>
</ul>
</li>
<li class="border1">
<a href="#">新闻中心</a>
<ul class="nav2">
<li><a href="#">全部新闻</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">品牌新闻</a></li>
<li><a href="#">公司新闻</a></li>
</ul>
</li>
<li class="border1">
<a href="#">新闻中心</a>
<ul class="nav2">
<li><a href="#">全部新闻</a></li>
<li><a href="#">公司新闻</a></li>
<li><a href="#">品牌新闻</a></li>
<li><a href="#">可持续发展新闻</a></li>
</ul>
</li>
<li class="border1">
<a href="#">加入我们</a>
<ul class="nav2">
<li><a href="#">嘉文化</a></li>
<li><a href="#">学习与发展</a></li>
<li><a href="#">嘉有机会</a></li>
</ul>
</li>
</ul>
</div>
swiper代码
<div class="box-5">
<div class="box5-font">更多新闻        ></div>
</div>
<div class="box-6">
<div class="max">
<div class="swiper">
<div class="box6-tag">
<img width="20px" height="20px" src="https://www.carlsbergchina.com.cn/media/2161/brand-mark.svg" alt="">
浏览我们的产品
</div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="box6-imgs">
<div class="box6-img"> <img src="image/bottle.png" alt=""></div>
<div class="box6-font">
<h2>嘉士伯</h2>
<p>成就更好的啤酒</p>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box6-imgs">
<div class="box6-img"> <img src="image/bottle2.png" alt=""></div>
<div class="box6-font">
<h2>1664白啤</h2>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="box6-imgs">
<div class="box6-img"> <img src="image/bottle3.png" alt=""></div>
<div class="box6-font">
<h2>乐堡</h2>
</div>
</div>
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<div class="box6-aa">
<div class="box6-a1">
<div class="subottle1"><img src="image/subottle1.png" alt=""></div>
<div class="box6-fonts">
<h2 class="box6-font1">重庆国宾</h2>
<span class="box6-font2">拉格啤酒,3.3%</span>
<span class="box6-font2"><br>重庆</span>
</div>
</div>
<div class="box6-a2">
<div class="subottle1"><img src="image/subottle2.png" alt=""></div>
<div class="box6-fonts">
<h2 class="box6-font1">重庆国宾</h2>
<span class="box6-font2">拉格啤酒,3.3%</span>
<span class="box6-font2"><br>重庆</span>
</div>
</div>
<div class="box6-a1">
<div class="subottle1"><img src="image/subottle1.png" alt=""></div>
<div class="box6-fonts">
<h2 class="box6-font1">重庆国宾</h2>
<span class="box6-font2">拉格啤酒,3.3%</span>
<span class="box6-font2"><br>重庆</span>
</div>
</div>
<div class="box6-a2">
<div class="subottle1"><img src="image/subottle2.png" alt=""></div>
<div class="box6-fonts">
<h2 class="box6-font1">重庆国宾</h2>
<span class="box6-font2">拉格啤酒,3.3%</span>
<span class="box6-font2"><br>重庆</span>
</div>
</div>
<div class="box6-a1">
<div class="subottle1"><img src="image/subottle2.png" alt=""></div>
<div class="box6-fonts">
<h2 class="box6-font1">重庆国宾</h2>
<span class="box6-font2">拉格啤酒,3.3%</span>
<span class="box6-font2"><br>重庆</span>
</div>
</div>
</div>
<div class="box6-bb">
<div class="box6-search">搜索品牌</div>
<div class="container">
<div action="" class="parent">
<input type="text" class="search1" placeholder="搜索">
<div class="btn"> <img src="image/search3.png" width="20px" height="20px" alt=""></div>
</div>
</div>
</div>
</div>
视频+结尾代码
<div class="box-8">
<div class="box8-1">
<p><span>2月3日,嘉士伯集团发布新的公司战略——扬帆27。</span></p>
<p><span>“在嘉士伯的演进中，
扬帆27是令人兴奋的下一步。由员工和领导者组成的庞大团队共创,围绕着我们的宗旨打造。扬帆27对于
品牌、品类、市场和能力建立都有清晰的选择，并提高了我们关于营收和利润的目标。”嘉士伯集团首席执
行官郝瀚思说。</span><br><br><span>本质上,扬帆27聚焦5个战略杠杆——产品组合、地理布局、执行
、企业文化和“资”援新征程。嘉士伯对此做出了截然不同的战略选择，明确了努力的重点和资源的分配。
嘉士伯的战略杠杆和选择应被视为一系列整体的活动，共同为所有股东创造价值。</span><br><br><span>
“围绕着‘酿造更美好的现在和未来’的公司宗旨，和‘在我们开展业务的市场上成为最成功、最专业、最具吸引力的啤酒公司’的
公司愿景,我们制定了扬帆27战略。”郝瀚思说。</span></p>
</div>
<div class="box8-2">
<video class="box8-video" controls="" autoplay="" name="media">
<source
src="https://1251961879.vod2.myqcloud.com/5405e8b8vodtransgzp1251961879/72f11d1b387702295737413387/v.f30.mp4"
type="video/mp4">
</video>
</div>
</div>
<div class="box-9">
<div class="box9-1">
<img width="550px" height="350px" src="image/box9-1.png">
<p class="box9-font">天猫嘉士伯旗舰店</p>
</div>
<div class="box9-2">
<img width="550px" height="350px" src="image/box9-2.jpg">
<p class="box9-font">天猫嘉士伯旗舰店</p>
</div>
</div>
css完整代码
body {
background-color: #c4cfd8;
}
* {
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
ul,
li{
list-style: none;
}
.box {
width: 95%;
/* height: 2000px; */
margin-left: auto;
margin-right: auto;
background-color: white;
}
.boxs {
width: 96%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: #fbfbfb;
}
.box-1 {
height: 85px;
width: 91.5%;
position: fixed;
z-index: 12;
background-color: rgb(255, 255, 255);
}
.navbar-brand {
height: 60px;
}
.navbar-img {
margin-top: 10px;
width: 90px;
height: 45px;
}
.navbar-brand {
height: 90px;
}
.navbar-img {
margin-top: 10px;
width: 90px;
height: 45px;
}
.icon-1 {
margin-top: -40px;
float: right;
height: 25px;
width: 65px;
}
.internet {
margin-left: 10px;
}
.box1-1 {
/* margin-right: -105px; */
width: 36vw;
height:40px;
float: right;
margin-top:-15px;
z-index: 100;
}
.nav1 {
width: 900px;
list-style: none;
}
.nav1 li {
float: left;
line-height: 60px;
}
.nav1 li a {
display: block;
height: 40px;
background-color: rgb(255, 255, 255);
text-decoration: none;
color: #284a41;
font-size: 12px;
padding: 0 20px 0 20px;
}
.nav1>li>a:hover{
border-bottom:soild 2px #4c8272;
}
.nav2 {
width: 92vw;
height: 350px;
left: 0;
position: absolute;
display: none;
background-color: rgb(255, 255, 255);
}
.nav2 li a {
font-weight: bolder;
margin-top: 50px;
padding: 0 60px;
font-size: 14px;
}
.nav1 li:hover .nav2 {
display: block;
}
.nav2 li ul {
/* background-color: rgb(47, 64, 189); */
display: flex;
flex-direction: column;
}
.nav3 li {
margin-top: -50px;
}
.nav3 li a {
font-weight: 3;
margin-top: 50px;
padding: 0 30px;
margin-left: 25px;
font-size: 14px;
}
.nav3 li a:hover{
width: 160px;
height: 30px;
}
.box2 {
margin-top: 90px;
background-color: aqua;
}
.box-3 {
height: 385px;
background-color: aquamarine;
display: flex;
flex-direction: row;
flex-wrap: column;
}
.box3-1 {
background-color: #d7e0df;
width: 33.4%;
text-align: center;
color: #284a41;
}
.box3-1 h2 {
margin: 110px 0 20px 0;
font-size: 100px;
font-family: 'ThemeFont-Tertiary', sans-serif;
font-weight: normal;
}
.box-4 {
background: #f3f6f5;
height: 605px;
padding-top: 100px;
}
.box4s {
width: 82%;
height: 405px;
margin-left: auto;
margin-right: auto;
}
.box4-tag {
color: #284a41;
}
.box4-group {
display: flex;
margin-top: 20px;
}
.box4-group2 {
padding-right: 30px;
padding-left: 30px;
overflow: hidden;
}
.box4-font {
margin-top: 20px;
height: 40px;
}
.box4-group1 {
overflow: hidden;
}
.box4-group1 img {
cursor: pointer;
transition: all 3s;
}
.box4-group1 img:hover {
transform: scale(1.1);
}
.box4-group2 img {
cursor: pointer;
transition: all 3s;
}
.box4-group2 img:hover {
transform: scale(1.1);
}
.box-5 {
height: 120px;
background-color: #fbfbfb;
}
.box5-font {
width: 200px;
height: 80px;
margin-left: auto;
margin-right: auto;
line-height: 120px;
font-size: 15px;
color: #284a41;
}
.box-6 {
position: relative;
}
.max {
background-color: #e8f3e0;
height: 600px;
}
.swiper {
height: 560px;
background-color: #e8f3e0;
}
.box6-tag {
color: #284a41;
margin-top: 100px;
margin-left: 150px;
line-height: 40px;
width: 180px;
height: 40px;
}
.swiper-slide {
margin-top: 100px;
transform: translateX(-200%);
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 30px;
left: 0;
width: 100%;
}
.box6-imgs {
display: flex;
flex-direction: row;
}
.box6-img {
width: 700px;
}
.box6-font {
width: 180px;
height: 200px;
padding-top: 37px;
color: rgb(1, 86, 34);
margin-left: 120px;
}
.box6-font h2 {
font-size: 42px;
padding-bottom: 25px;
}
.box6-font p {
font-size: 20px;
}
.box6-aa {
background-color: wheat;
height: 310px;
display: flex;
}
.box6-a1 {
background-color: #4c8272;
width: 20%;
height: 310px;
}
.box6-a2 {
background-color: #435051;
width: 20%;
height: 310px;
}
.subottle1 {
margin-left: 8%;
margin-top: -2%;
position: absolute;
z-index: 3;
}
.box6-fonts {
text-align: center;
padding-top: 65%;
}
.box6-font1 {
font-size: 18px;
margin-bottom: 20px;
color: #fff;
}
.box6-font2 {
font-size: 14px;
color: #fff;
}
.box6-bb {
background-color: #284a41;
height: 150px;
}
.subottle1 img:hover {
transform: translate(0, -15px);
}
.subottle1 img {
transition: all 0.2s;
}
.box6-search {
width: 300px;
height: 75px;
font-size: 19px;
color: #fff;
text-align: center;
padding-top: 75px;
}
.container {
height: 70px;
width: 350px;
margin-top: -30px;
margin-right: 20px;
}
.parent {
position: relative;
}
.search1 {
width: 240px;
height: 60px;
outline: none;
border: 1px solid #ccc;
left: 90px;
position: absolute;
}
.parent input {
padding: 20px;
color: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.2);
}
.parent input::-webkit-input-placeholder {
color: rgb(255, 255, 255);
}
.search1:focus {
border: 3px solid #fff;
}
.btn {
position: absolute;
top: 10px;
left: 285px;
/* border: none;
outline: none; */
cursor: pointer;
}
.box-7 {
background-color: #f3f6f5;
width: 100%;
display: flex;
height: 700px;
justify-content: flex-start;
}
.box7-1 {
width: 27%;
height: 600px;
margin-top: 80px;
margin-left: 90px;
color: #284A41;
font-size: 16px;
}
.box7-2 {
margin-top: 80px;
margin-left: 30px;
width: 28%;
height: 600px;
}
.box7-xian {
margin-top: 20px;
border-bottom: 1px solid #CCC;
width: 300px;
background-color: lightsteelblue;
}
.box7-3 {
margin-top: 80px;
width: 33.3%;
height: 600px;
}
.box7-32 {
margin-top: 20px;
}
.box7-img {
margin-left: 10px;
margin-top: 15px;
width: 55px;
height: 60px;
}
.box7-xiangqing {
display: flex;
}
.jibao {
color: #284a41;
margin-left: 20px;
margin-top: 15px;
width: 220px;
line-height: 65px;
font-size: 14px;
height: 65px;
}
.box-8 {
/* background-color: burlywood; */
height: 550px;
display: flex;
}
.box8-1 {
width: 360px;
height: 535px;
font-size: 16px;
margin-left: 140px;
padding-top: 80px;
}
.box8-2 {
margin-left: 20px;
}
.box8-video {
margin-top: 70px;
width: 90%;
height: 82%;
}
.box-9 {
padding-top: 50px;
display: flex;
width: 85%;
margin-left: auto;
margin-right: auto;
}
.box9-1 {
margin-left: 2%;
overflow: hidden;
width: "550px";
height: "350px";
}
.box9-2 {
margin-left: 3.5%;
overflow: hidden;
}
.box4-group1,
.box4-group2 {
overflow: hidden;
}
.box9-1 img,
.box9-2 img {
cursor: pointer;
transition: all 3s;
}
.box9-1 img:hover,
.box9-2 img:hover {
transform: scale(1.1);
}
.box9-font {
margin-top: 40px;
}
.box-10 {
height: 400px;
}
.footer__text {
width: 210px;
height: 400px;
margin-left: auto;
font-size: 13px;
margin-right: auto;
padding-top: 12%;
font-family: 'ThemeFont-Secondary', sans-serif;
}
.box10-font4 {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.box10-font1 {
width: 57%;
padding-top: 20px;
margin-left: auto;
margin-right: auto;
}
.box10-font2 {
width: 90%;
margin-left: auto;
margin-right: auto;
margin-top: -10px;
}
.box10-font3 {
margin-top: 40px;
width: 63%;
font-size: 13px;
color: #5A5A5A;
margin-left: auto;
margin-right: auto;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
