🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 文末獲取原始碼聯系 🍅
臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大？網頁要求的總數量太多？HTML網頁作業無從下手？沒有合適的模板？等等一系列問題，你想要解決的問題，在專欄👇🏻👇🏻👇🏻👇🏻
java專案精品實戰案例《100套》https://blog.csdn.net/weixin_39709134/category_11128297.html
https://blog.csdn.net/weixin_39709134/category_11128297.html
web前端期末大作業網頁實戰《100套》https://blog.csdn.net/weixin_39709134/category_11374891.html
常見網頁設計作業題材有 個人、 美食、 公司、體育、 化妝品、 物流、 環保、 書籍、 婚紗、 軍事、 游戲、 節日、 戒煙、 電影、 攝影 學校、 旅游、 電商、 寵物、 電器、 茶葉、 家居、 酒店、 舞蹈、 動漫、 明星、 服裝、 文化、 家鄉、 鮮花、 禮品、 汽車、 其他等網頁設計題目, A+水平作業, 可滿足大學生網頁大作業網頁設計需求都能滿足你的需求，原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼，這是一個不錯的回應式藝術培訓機構網頁設計制作，畫面精明，非常適合初學者學習使用，
B站視頻演示： web前端期末大作業-回應式婚慶公司網頁設計.mp4
網頁實作截圖：文末獲取原始碼
網站首頁 ：
公司簡介：
合作交流：
旗下業務：
企業專案：
聯系我們：
主要原始碼展示：
index.html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header"><a href=""><img src="./files/logo.png" class="logo" alt="翰墨堂書畫"></a> </div>
<div id="navbar" class="navbar-collapse collapse">
<div class="row dh">
<div class="col-xs-12 col-sm-12 col-md-12">
<ul class="nav navbar-nav navbar-nav-c">
<li class="active" id="nv0"><a href="#sy ">首 頁</a> </li>
<li class="dropdown " id="nv1"><a href="#gsjj " title="關于我們">公司簡介</a></li>
<li class="dropdown " id="nv2"><a href="#hzjl2" title="合作交流">合作交流</a></li>
<li class="dropdown " id="nv3"><a href="#yewu-1 " title="旗下品牌業務">旗下品牌業務</a></li>
<li class="dropdown " id="nv4"><a href="#qyxm " title="企業專案">企業專案</a></li>
<li class="dropdown " id="nv5"><a href="#lxwm " title="聯系我們">聯系我們</a></li>
</ul>
</div>
</div>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<script type="text/javascript">
$('.bxslider').bxSlider({
adaptiveHeight: true,
infiniteLoop: false,
hideControlOnEnd: true,
auto: true
});
</script>
<div id="gsjj">
<div class="container aboutus">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 jianjie">
<h2>公司簡介</h2>
<p class="pjj"></p>
<p class="ptm">北京XXXX文化傳播有限公司</p>
<p class="about_contents">
北京XXXX文化傳播有限公司成立于2014年，<br/> 是一家專業從事藝術品交易、藝術品拍賣、藝術品收藏：
<br/> 藝術培訓，藝術策劃；藝術類會議會展、藝術高級研修班、
<br/> 藝術家形象宣傳、藝術家合作推廣、藝術市場運作、
<br/> 中外藝術文化交流的綜合型藝術品服務公司，
<br/>
</p>
<p></p>
</div>
<div class="col-xs-12 col-sm-12 col-md-6">
<img src="./images/1551343051.jpg" alt="公司簡介">
</div>
</div>
</div>
</div>
css樣式實作：
img {
width: 100%
}
#container0 {
display: block;
}
#container1 {
display: none;
}
@media only screen and (max-width: 738px) {
#container0 {
display: none;
}
#container1 {
display: block;
}
.swiper-wrapper img {
width: 100%;
}
.swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
position: relative;
bottom: 0;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
transition: 300ms;
transform: scale(0.5);
margin-top: 52px;
}
.swiper-slide-active,
.swiper-slide-duplicate-active {
transform: scale(1.3) !important;
margin-top: 50px;
}
.xlb {
width: 30px;
}
/* .swiper1{
overflow: initial !important;
}*/
}javaScript實作：
<script>
$(document).ready(function() {
$("#nv0").click(function() {
$("html, body").animate({
scrollTop: $("#sy").offset().top - 80 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
$("#nv1").click(function() {
$("html, body").animate({
scrollTop: $("#gsjj").offset().top - 80 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
$("#nv2").click(function() {
$("html, body").animate({
scrollTop: $("#hzjl2").offset().top - 90 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
$("#nv3").click(function() {
$("html, body").animate({
scrollTop: $("#yewu-1 ").offset().top - 60 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
$("#nv4").click(function() {
$("html, body").animate({
scrollTop: $("#qyxm").offset().top - 90 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
$("#nv5").click(function() {
$("html, body").animate({
scrollTop: $("#lxwm").offset().top - 50 + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
</script>
<script>
// 這里官網上有你想要的平滑的輪播樣式
var mySwiper = new Swiper('.swiper1', {
/* loop: true,
pagination: {
el: '.swiper-pagination',
clickable :true,
},
autoplay:{
delay:3000,
disableOnInteraction:false
},*/
slidesPerView: 2,
spaceBetween: "10%",
centeredSlides: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
freeMode: true,
autoplay: {
delay: 1000,
disableOnInteraction: true
},
});
</script>
作品來自于網路收集、侵權立刪
獲取完整原始碼：
大家點贊、收藏、關注、評論啦 、查看下方👇🏻👇🏻👇🏻微信公眾號免費獲取👇🏻👇🏻👇🏻
打卡 文章 更新 102/ 365天
專欄推薦閱讀：
java專案精品實戰案例《100套》https://blog.csdn.net/weixin_39709134/category_11128297.html
web前端期末大作業網頁實戰《100套》https://blog.csdn.net/weixin_39709134/category_11374891.html
好了，今天就到這兒吧，小伙伴們點贊、收藏、評論，一鍵三連走起呀，我們下期見~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357008.html
標籤：其他