Div+CSS仿支付寶登錄頁面

2024-07-11 08:25:41

字體：大中小

來源：轉載

供稿：網友

本文實例為大家詳細介紹了Div+CSS仿支付寶登錄頁面的具體實現代碼，供大家參考，具體內容如下

預想效果：

XML/HTML Code復制內容到剪貼板

<span style="font-size:14px;font-weight: normal;"><!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8">
<title>聯系我們-關于支付寶-支付寶知托付-</title> <link rel="stylesheet" type="text/css" href="zhifubao.css">
</head> <body>
<div id="top"> <div id="top-content">
<span id="fn-left">歡迎來到支付寶！</spam> <div id="fn-right1">
<span> <a href="javascript:void(0);">登錄</a>
- <a target="_blank" href="javascript:void(0);">注冊</a>
</span> |
<span> <a target="_blank" href="javascript:void(0);">支付寶首頁</a>
</span> |
<span> <a target="_blank" href="javascript:void(0);">安全中心</a>
</span> |
<span> <a target="_blank" href="javascript:void(0);">幫助中心</a>
</span> </div>
</div> </div>
<div id="nav"> <div id="nav-content">
<div id="nav-logo"> <a href="index.htm">
<img id="logo" height="39" width="239" src="/images/zhifubao.png" alt="支付寶" title="支付寶"></img> </a>
</div> <div id="fn-right2">
<ul id="link" class="fn-clear"> <li class="haha">
<a href="javascript:void(0);"><font color="#FFD3B2"><b>首頁</font></a> </li>
<li id="link-about" class="current"> <a href="javascript:void(0);"><font color="#FFD3B2">了解我們</font></a>
</li> <li class="hover">
<a target="_blank" href="javascript:void(0);"><font color="#FFD3B2">生活應用</font></a> </li>
<li class=""> <a href="javascript:void(0);"><font color="#FFD3B2">知托付</font></a>
</li> <li class="">
<a href="javascript:void(0);"><font color="#FFD3B2">企業文化</font></a> </li>
<li id="link-partner"class=""> <a href="javascript:void(0);"><font color="#FFD3B2">合作伙伴</font></a>
</li> </ul>
</div> </div>
</div> <div id="main">
<div id="container"> <div id="sidebar">
<div class="sidebar-title">了解我們</div> <ul class="sidebar-ul">
<li> <a href="javascript:void(0);">-支付寶簡介</a>
</li> <li>
<a href="javascript:void(0);">-新聞及動態</a> </li>
<li> <a href="javascript:void(0);">-大事記</a>
</li> <li>
<a href="javascript:void(0);">-關注我們</a> </li>
<li class="current"> <a href="javascript:void(0);">-聯系我們</a>
</li> </ul>
</div> <div id="content">
<div class="pagetitle"></div> <div class="lianxicontent">
<div class="notice">注：以下地址暫不接受支付寶郵政匯款和現金收費</div> <div class="hz">
<h1 class="title">杭州總部</h1> <p>
服務熱線: <a target="_blank" href="javascript:void(0);">點此聯系客服</a>
</p> <p>
業務合作: <a target="_blank" href="javascript:void(0);">點此聯系</a>
</p> <p>總機： 0571-26888888 </p>
<p>傳真： 0571-88157868 </p> <p>地址：杭州市萬塘路18號黃龍時代廣場B座（支付寶收） </p>
<p>郵編： 310099 </p> <p>
廉正舉報： <a target="_blank" href="javascript:void(0);"></a>（該網站負責受理內部員工舞弊、違規舉報）
</p> <p>
（如有支付寶業務相關問題，請微博私信@ 支付寶客戶中心 <a target="_blank" href="javascript:void(0);">支付寶客戶中心</a>） </p>
</div> <div class="hz">
<h1 class="title">U.S. Office:</h1> <p>Addr：3945 Freedom Cir., Suite 600,Santa Clara, CA 95054,United States </p>
<p>Tel：(+1) 408-748-1200 </p> <p>Fax： (+1) 408-748-1218 </p>
<p> Merchant service website：
<a target="_blank" href="javascript:void(0);">https://global.alipay.com/</a> </p>
</div> <ul class="others">
<li id="hehes"> <div class="others-item">
<h1 class="title">北京分公司</h1> <p>地址：北京市朝陽區東三環中路1號環球金融中心西塔14層</p>
</div> </li>
<li> <div class="others-item">
<h1 class="title">上海分公司</h1> <p>地址：上海市浦東新區民生路1199弄證大五道口廣場</p>
</div> </li>
<li> <div class="others-item">
<h1 class="title">成都分公司</h1> <p>地址：四川省成都市高新區世紀城南路599號4棟B座5F</p>
</div> </li>
<li> <div class="others-item">
<h1 class="title">深圳分公司</h1> <p>地址：深圳市福田區深南大道7888號東海國際</p>
</div> </li>
</ul> </div>
</div> </div>
</div> </body>
</html></span>