首頁製作
阿新 • • 發佈：2018-11-04
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>商業網站</title>
</head>
<body>
<!---------------導航部分--------------->
<ul class="nav">
<li class="log">LOGO</li>
<li>網站首頁</li>
<li>關於我們</li>
<li>新聞中心</li>
<li>產品展示</li>
<li>客戶案例</li>
<li>給我留言</li>
<li>人才招聘</li>
<li>聯絡我們</li>
</ul>
<!-------------橫圖部分---------------->
<div class="banner">
<img src="image/55ed5b640b931.jpg" alt="">
</div>
<!-------------關於我們---------------------->
<div class="aboutus">
<div class="tittle">關於我們</div>
<img src="image/653-151204152F1195.jpg" alt="">
<div class="jieshao">公司介紹</div>
<div class="neirong">
<p> 努力，讓生活更加美好。一切哪怕是辛苦的付出，都是為了擁有一個美好的明天而做出準備。讓夢想起航吧！
成功永遠是在歷盡艱險之後方能獲取，不要迷茫，不要糾結。現在有多麼艱苦，恰恰就代表著將來會有多麼的幸福。
</p>
<diiv class="more">more</diiv>
</div>
</div>
<!----------產品展示------------------->
<div class="show">
<div class="tittle" style="color:#fff">產品展示</div>
<div class="chanpinphoto">
<img src="image/chanpin1.jpg" alt="">
<img src="image/chanpin2.jpg" alt="">
<img src="image/chanpin3.jpg" alt="">
<img src="image/chanpin4.jpg" alt="">
<div class="chaxun">點選查詢</div>
</div>
</div>
<!----------新聞中心------------------->
<div class="news"></div>
<div class="tittle">新聞中心</div>
<div class="newsbox">
<div class="box1" style="margin-right: 19px">
<div class="left">
<img src="image/new1.png" alt="">
<p>戈壁也建站，新疆阿克蘇聯通聯合華為為“找寶人”提供3G/4G訊號 <span>中國聯通新疆阿克蘇分公司（以下簡稱“新疆阿克蘇聯通”）聯合華為宣佈，在阿克蘇地區的戈壁深處完成RuralStar站點的部署，為戈壁裡的石油勘探隊提供了3G/4G訊號覆蓋。</span></p>
</div>
<div class="right">+</div>
</div>
<div class="box1" >
<div class="left">
<img src="image/new2.png" alt="">
<p>數字世界+物理網路雙輪驅動，加速智簡網路創新程序 <span>在第五屆全球超寬頻高峰論壇期間，華為網路產品線總裁胡克文指出：“電信網路的結構化問題已經成為制約電信產業發展的最大瓶頸，只有在物理網路之上構建一個數字世界，........</span></p>
</div>
<div class="right">+</div>
</div>
<div class="box1" style="margin-right: 19px">
<div class="left">
<img src="image/new3.jpg" alt="">
<p>華為釋出電信發展立場檔案：ICT產業的健康活躍發展需要政府的支援和引導 <span>華為在南非德班舉行的2018年國際電聯世界電信展期間釋出電信發展立場檔案。該檔案指出，資訊通訊技術具有促進經濟社會發展的變革力量，........</span></p>
</div>
<div class="right">+</div>
</div>
<div class="box1">
<div class="left">
<img src="image/new4.jpg" alt="">
<p>華為WTTx榮獲2018 ITU 可持續發展大獎 <span>由國際電信聯盟（ITU）主辦的2018年世界電信展於9月10日在南非德班隆重開幕。在頒獎典禮上，華為WTTx解決方案榮獲可持續發展大獎（Global Corporate Award : Sustainable Development）。......</span></p>
</div>
<div class="right">+</div>
</div>
</div>
<!-------------------客戶案例-------------------->
<div class="anlibox">
<div class="tittle" style="color:#00B0FF">客戶案例</div>
<ul class="photobox">
<li><img src="image/kehu1.jpg" alt=""></li>
<li><img src="image/kehu2.jpg" alt=""></li>
<li><img src="image/kehu3.jpg" alt=""></li>
<li><img src="image/kehu4.JPEG" alt=""></li>
<li><img src="image/kehu5.jpg" alt=""></li>
<li><img src="image/kehu6.jpg" alt=""></li>
<li><img src="image/kehu7.png" alt=""></li>
<li><img src="image/kehu8.jpg" alt=""></li>
</ul>
</div>
<!------------------聯絡我們------------------------->
<div class="callme">
<div class="tittle" style="color:#2D54DF">聯絡我們</div>
<div class="callmebox">
<div>
<img src="image/地址.png" alt="">
<p>ADRESS</p>
<span>地址:桂林理工大學</span>
</div>
<div>
<img src="image/telephone.png" alt="">
<p>TELEPHONE</p>
<span>電話:666666666</span>
</div>
<div>
<img src="image/mail.png" alt="">
<p>E-MAIL</p>
<span>郵箱: CSS樣式
@charset "utf-8"; /* CSS Document */ body{ margin: 0 auto; padding: 0; } .nav{ width: 1240px; height: 133px; margin: 0 auto; } .nav li{ list-style: none; float:left; width:107px; height: 100%; line-height: 133px; text-align: center; font-size: 18px; color: #333; font-size: 18px; color: #333; font-family: "mirosoft yehei"; } .nav li:hover{ background-color: #1040a8; color: #fff; } .nav .log{ width: 363px; height: 100%; font-size: 64px; color:#0c53ad; } .nav .xuanzhong{ background-color: #1040a8; color: #fff; } .banner{ width: 100%; height: 414px; margin: 0 auto; } .aboutus{ width: 1162px; height: 445px; margin: 0 auto; border-bottom: 6px solid #1566c1; padding-top: 50px; position: relative; } .tittle{ width: 631px; text-align: center; font-size: 32px; font-family: "mirosoft yehei"; font-weight: bold; margin: 0 auto; } .aboutus img{ width: 408px; height: 233px; position: absolute; bottom: 0; } .jieshao{ width: 182px; height: 80px; color: #fff; font-family: "mirosoft yehei"; font-size: 30px; font-weight: bold; background-color: #1566c1; position: absolute; left:408px; bottom: 150px; z-index: 99; } .neirong{ width: 665px; height: 150px; background-color: #f5f5f5; position: absolute; left:408px; bottom: 0; z-index: 1; padding: 78px 94px 0 41px; } .neirong p{ font-size: 18px; line-height: 36px; color: #333; } .more{ width: 78px; height: 33px; text-align: center; line-height: 33px; color: #fff; background-color: #e6c50e; position: absolute; right: 12px; bottom: 28px; z-index: 2; font-family: "Arial"; font-weight: bold; font-size: 16px; } .show{ width: 100%; height: 500px; margin: 50px auto 0; background-image: url(image/s_1198_0b41e947f84c390e7eda9e662a871a61.jpg); padding-top: 37px; } .chanpinphoto{ width: 1300px; height: 333px; margin: 73px auto 0; margin: 20px auto 0; } .chanpinphoto img{ float:left; margin-left: 20px; cursor: pointer; } .chaxun{ width: 150px; height: 100px; margin: 20px auto 0; color: #fff; font-size: 20px; font-family: "microsoft yahei"; text-align: center; line-height: 120px; cursor: pointer; } .news{ width: 100%; margin:63px 0 auto; } .newsbox{ width: 1300px; margin: 0 auto; height: 500px; } .box1{ width: 572px; height: 242px; float: left; margin-top:30px; } .box1 .left{ float: left; width: 531px; height: 100%; background-color: #f5f5f5; } .box1 .left img{ margin: 16px 0 0 14px; } .box1 .left p{ display: inline-block; width: 300px; float: right; font-size: 20px; font-family: "microsoft yehei"; } .box1 .left p span{ display:block; font-size: 16px; font-family: "songti"; line-height: 30px; margin-top:7px; } .box1 .right{ float: right; width: 27px; height: 54px; color: #fff; background-color: #C09B1C; text-align: center; line-height: 54px; font-weight: bold; cursor: pointer; } .anlibox{ width: 100%; height: 626px; margin: 53px auto 0; background: #f5f5f5; padding-top:31px; } .photobox{ width: 1149px; height: 486px; margin: 35px auto 0; } .photobox li{ float: left; width: 287px; height: 242px; list-style: none; overflow: hidden; } .callme{ width: 100%; height: 424px; padding-top: 36px; } .callmebox{ width: 1020px; height: 314px; margin: 22px auto 0; background: #f5f5f5; } .callmebox div{ width: 33%; height: 100%; float: left; } .callmebox div img{ display: block; margin: 54px auto 0; } .callmebox div p { font-size: 30px; font-family: "Arial"; color: #999; text-align: center; margin: 20px 0 12px; } .callmebox div span{ display: block; font-size: 20px; color: #333; margin: 0 auto; text-align: center; } .bottom{ background:#029FF7; width: 100%; height: 150px; } .bottom p{ text-align: center; margin: 0 auto; line-height: 150px; font-size: 30px; font-weight: bold; color: #090202; }
