🍅 作者主頁：Java李楊勇
🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? 簡歷模板、學習資料、面試題庫、技識訓助【關注我，都給你】
🍅 歡迎點贊 👍 收藏 ?留言 📝
🍅 文末獲取原始碼 🍅
臨近期末, 你還在為HTML網頁設計結課作業,老師的作業要求感到頭大？HTML網頁作業無從下手？網頁要求的總數量太多？沒有合適的模板？等等一系列問題，你想要解決的問題，在專欄👇🏻👇🏻👇🏻👇🏻
java專案精品實戰分享案例《100套》
web前端期末大作業網頁實戰《100套》
Html+Css+JavaScript期末大作業《100套》
都能滿足你的需求，原始HTML+CSS+JS頁面設計, web大學生網頁設計作業原始碼，這是一個不錯的網頁制作，畫面精明，非常適合初學者學習使用，
網頁實作截圖：文末獲取原始碼
網站首頁
?
關于我們
汽車制造公司以人性化為原點的匠人理念，在細微之處也需考慮到使用者體驗
在物與 人的每一個接觸點追求形之極致，細微之處卻有嚴苛標準，
汽車制造公司深諳用戶體驗之所在，以消費者五感為匠人五感，想你所想，察你所不察，
在嚴格的品質把關程序中，修行敏銳五感，
?
新聞資訊：
什么是偽靜態？偽靜態有何作用?哪種好？偽靜態是相對真實靜態來講的，真實靜態會生成一個html或htm后綴的檔案，訪客能夠訪問到真實存在的靜態頁面，而偽靜態則沒有生成物體靜態頁面檔案，而僅僅是以.html一類的靜態頁面...
產品展示：
?
客戶案例：
聯系我們：
專案組織結構：
主要原始碼展示：
index.html
<head>
scalable=0, minimal-ui">
<meta name="generator" content="dede58 5.3.9" data-variable="" />
<title>HTML5高端大氣回應式網路科技公司網站模板 - </title>
<meta name="keywords" content="HTML5,高端大氣,回應式,網路科技公司,網站模板" />
<meta name="description" content="HTML5高端大氣回應式網路科技公司網站模板下載，采用扁平化設計，風格簡潔清爽大氣，可用于科技類企業官網，" />
<link rel="stylesheet" href="css/3af1bf1fa0061831.css">
</head>
<body>
<!--[if lte IE 8]>
<div class="text-center padding-top-50 padding-bottom-50 bg-blue-grey-100">
<p class="browserupgrade font-size-18">
你正在使用一個
<strong>
過時
</strong>
的瀏覽器，請
<a href="http://browsehappy.com/" target="_blank">
升級您的瀏覽器
</a>
，以提高您的體驗，
</p>
</div>
<![endif]-->
<nav class="navbar navbar-default met-nav " role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger collapsed" data-target="#example-navbar-default-collapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="hamburger-bar">
</span>
</button>
<a href="index.html" class="navbar-brand navbar-logo vertical-align" title="HTML5網站建設企業回應式網站模板(自適應)">
<div class="vertical-align-middle">
<img src="picture/1468986284.png" alt="HTML5網站建設企業回應式網站模板(自適應)" title="HTML5網站建設企業回應式網站模板(自適應)" />
</div>
</a>
</div>
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="example-navbar-default-collapse">
<ul class="nav navbar-nav navbar-right navlist">
<li>
<a href="index.html" title="網站首頁" class="link">
網站首頁
</a>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="about.html" aria-expanded="false" role="button" title="關于我們">
關于我們
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="gaikuang.html" title="公司概況">
公司概況
</a>
</li>
<li>
<a href="wenhua.html" title="企業文化">
企業文化
</a>
</li>
<li>
<a href="fankui.html" title="在線反饋">
在線反饋
</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="news.html" aria-expanded="false" role="button" title="新聞資訊">
新聞資訊
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#" title="優化推廣">
優化推廣
</a>
</li>
<li>
<a href="#" title="公司動態">
公司動態
</a>
</li>
<li>
<a href="#" title="建站經驗">
建站經驗
</a>
</li>
</ul>
</li>
<li class="dropdown margin-left-20">
<a class="dropdown-toggle link " data-toggle="dropdown" data-hover="dropdown" href="product.html" aria-expanded="false" role="button" title="產品展示">
產品展示
<i class="fa fa-angle-down small">
</i>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet" role="menu">
<li>
<a href="#" title="營銷型網站">
營銷型網站
</a>
</li>
<li>
<a href="#" title="回應式網站">
回應式網站
</a>
</li>
<li>
<a href="#" title="電子商務型網站">
電子商務型網站
</a>
</li>
<li>
<a href="#" title="外貿型網站">
外貿型網站
</a>
</li>
<li>
<a href="#" title="企業型網站">
企業型網站
</a>
</li>
</ul>
</li>
<li class="margin-left-20">
<a href="case.html" title="客戶案例" class="link ">
客戶案例
</a>
</li>
<li class="margin-left-20">
<a href="contact.html" title="聯系我們" class="link ">
聯系我們
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="met-banner">
<div class="carousel slide" id="met-banner-slide" data-ride="carousel">
<ol class="carousel-indicators carousel-indicators-fall">
<li class="active" data-slide-to="0" data-target="#met-banner-slide">
</li>
<li class="" data-slide-to="1" data-target="#met-banner-slide">
</li>
</ol>
<div class="carousel-inner carousel-height" role="listbox">
<div class="item active">
<picture>
<source srcset="images/1470992331.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470992331.jpg" alt="7年專注，網站建設" />
</picture>
<div class="carousel-caption p-5">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
7年專注，網站建設
</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
專注于設計體驗，專業于解決方案
</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff;color:#ffffff" href="#" title="7年專注，網站建設" target='_self'>
MORE>>
</a>
</div>
</div>
</div>
<div class="item ">
<picture>
<source srcset="images/1470991881.jpg" media="(min-width: 768px)" />
<img class="cover-image overlay-scale" srcset="images/1470991881.jpg" alt="先入為主，布局未來" />
</picture>
<div class="carousel-caption p-1">
<h3 class="animation-slide-top animation-delay-300" style="color:#ffffff;background:#1e8bc3;">
先入為主，布局未來
</h3>
<p class="animation-slide-bottom animation-delay-500" style="color:#ffffff">
回應式布局，智能識別多種終端設備
</p>
<div class='btn animation-slide-bottom animation-delay-700'>
<a style="border:2px solid #ffffff;color:#ffffff" href="#" title="先入為主，布局未來" target='_self'>
MORE>>
</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#met-banner-slide" role="button" data-slide="prev">
<span class="icon wb-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" href="#met-banner-slide" role="button" data-slide="next">
<span class="icon wb-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">
Next
</span>
</a>
</div>
</div>
<div class="met-index-service met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
專注網站建設七年
</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
我們做什么？
</p>
<ul class="blocks blocks-2">
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-laptop" aria-hidden="true">
</i>
<h4>
高端網站定制
</h4>
<p>
企業高端網站定制設計
<br /> 彰顯品牌形象
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-code" aria-hidden="true">
</i>
<h4>
系統軟體研發
</h4>
<p>
"拒絕平庸 只出精品"
<br/> 捕捉需求、分析設計
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-group" aria-hidden="true">
</i>
<h4>
營銷策劃推廣
</h4>
<p>
"專業團隊 超前思維" 全方位推廣你的品牌和產品
</p>
</li>
<li class="invisible" data-plugin="appear" data-animate="slide-bottom" data-repeat="false">
<i class="icon fa-refresh" aria-hidden="true">
</i>
<h4>
云服務器運維
</h4>
<p>
"快速回應，貼心服務" 呵護你的企業網站健康成長
</p>
</li>
</ul>
</div>
</div>
<div class="met-index-product met-index-body">
<div class="container">
<h3 class="invisible" data-plugin="appear" data-animate="slide-top" data-repeat="false">
成功案例
</h3>
<p class="desc invisible" data-plugin="appear" data-animate="fade" data-repeat="false">
國內最優秀的電商平臺及相關系統服務商
</p>
<ul class="nav nav-tabs invisible" role="tablist" data-plugin="appear" data-animate="fade" data-repeat="false">
<li class="active" role="presentation" data-allnum='8'>
<a href="#productlist" title="全部" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="*">
全部
</a>
</li>
<li role="presentation">
<a href="#productlist" title="營銷型網站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_7">
營銷型網站
</a>
</li>
<li role="presentation">
<a href="#productlist" title="回應式網站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_8">
回應式網站
</a>
</li>
<li role="presentation">
<a href="#productlist" title="電子商務型網站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_107">
電子商務型網站
</a>
</li>
<li role="presentation">
<a href="#productlist" title="外貿型網站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_9">
外貿型網站
</a>
</li>
<li role="presentation">
<a href="#productlist" title="企業型網站" aria-controls="productlist" aria-expanded="true" role="tab" data-filter="list_12">
企業型網站
</a>
</li>
</ul>
<ul class="blocks no-space blocks-md-4 blocks-sm-3 blocks-xs-2" id="productlist" data-filterable="true">
<li data-type="list_7">
<div class="widget widget-shadow">
<div class="img-holder">
<img data-original="picture/1-1609231g6403r.jpg" alt="環游旅游公司" src="picture/1-1609231g6403r.jpg">
<a href="caseshow.html" title="環游旅游公司" target='_self'>
<div class="overlay">
<div class="inner">
<ul class="social">
整體效果 以背景大圖的視覺張力突顯時尚感，整...
</ul>
</div>
</div>
</a>
</div>
<div class="content-holder hvr-sweep-to-bottom">
<h4>
環游旅游公司
</h4>
</div>
</div>
</li>
<li data-type="list_7">
<div class="widget widget-shadow">
<div class="img-holder">
<img data-original="picture/1-1609231g5522w.jpg" alt="愛普生裝飾" src="picture/1-1609231g5522w.jpg">
<a href="caseshow.html" title="愛普生裝飾" target='_self'>
<div class="overlay">
<div class="inner">
<ul class="social">
整體效果 以背景大圖的視覺張力突顯時尚感，整...
</ul>
</div>
</div>
</a>
</div>
<div class="content-holder hvr-sweep-to-bottom">
<h4>
愛普生裝飾
</h4>
</div>
</div>
</li>
</html>style.css
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block
}
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline
}
audio:not([controls]) {
display: none;
height: 0
}
[hidden],
template {
display: none
}
a {
background-color: transparent
}
a:active,
a:hover {
outline: 0
}
abbr[title] {
border-bottom: 1px dotted
}
b,
strong {
font-weight: 700
}
dfn {
font-style: italic
}
h1 {
margin: .67em 0;
font-size: 2em
}
mark {
color: #000;
background: #ff0
}
small {
font-size: 80%
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline
}作品來自于網路收集、侵權立刪
獲取完整原始碼：
大家點贊、收藏、關注、評論啦 、查看下方👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻
打卡 文章 更新 77/ 100天
專欄推薦閱讀：
Java畢設專案精品實戰案例《100套》
HTML5大作業實戰案例《100套》
Web大作業前端網頁實戰《100套》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/310569.html
標籤：其他
上一篇：資料結構入門：時間復雜度
下一篇：【Java面試題】常見演算法總結