靜態網頁練習
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px ;
}
.top-nav{
width: 100%;
height: 40px;
background-color: #808080;
text-align: right;
line-height: 40px;
}
.container{
width: 80%;
height: 1200px;
background-color:red;
margin: 0px auto;
}
.logo-banner{
width 100%;
height: 169px;
background-color: #808080;
}
.logo-left{
width: 20%;
height: 170px;
background-color: white;
float: left;
}
.logo-right{
width: 80%;
height: 170px;
background-color: #FFD700;
float: left;
}
.logo-right-1{
width: 100%;
height: 80px;
background-color: white;
float:left;
color: purple;
text-align: right;
line-height: 80px;
font-size: 20px;
font-weight: bold;
}
.logo-right-2{
width: 100%;
height: 90px;
background-color: white;
float: left;
text-align: right;
color: black;
line-height: 90px;
font-size: 18px;
font-weight: bold;
}
.logo-shop{
width: 100%;
height: 300px;
background-color: chocolate;
}
.btn{
width: 20%;
height: 670px;
background-color: white;
float: left;
}
.list-1{
width: 50%;
height: 670px;
background-color: white;
float: left;
}
.list-2{
width: 30%;
height: 670px;
background-color: white;
float: left;
}
.footer-1{
width: 100%;
height: 30px;
background-color: blue;
float: left;
text-align: center;
line-height: 30px;
}
.footer-2{
width: 100%;
height: 30px;
background-color: white;
float: left;
text-align: center;
line-height: 30px;
}
.btn-1-1{
float: left;
width: 100px;
height: 65px;
}
.btn-2-1{
float: left;
width: 100px;
height: 65px;
}
.list-1-1{
font-size: 18px;
text-align: left;
}
.list-1-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 40px;
}
a{
text-decoration: none;
color: black;
}
a:visited{
text-decoration: none;
}
.list-1-2{
font-size: 18px;
text-align: left;
overflow: hidden;
}
.list-1-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-1{
font-size: 16px;
text-align: left;
}
.list-2-1-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
overflow: hidden;
}
.list-2-2{
font-size: 16px;
text-align: left;
}
.list-2-2-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-3{
font-size: 16px;
text-align: left;
}
.list-2-3-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
.list-2-4{
font-size: 16px;
text-align: left;
}
.list-2-4-1{
font-size: 12px;
text-align: left;
list-style: none;
line-height: 30px;
}
</style>
</head>
<body>
<div class="top-nav">
·English New Vision Beta·English Vision
</div><!--頂導航-->
<div class="container">
<div class="logo-banner"><!--校徽欄-->
<div class="logo-left">
<img src="SunboHBuilder/img/u=3802107903,1484631994&fm=117&gp=0.jpg" />
</div><!--校徽-->
<div class="logo-right ">
<div class="logo-right-1">
信息公開 | 學生 | 教工 | 考生 | 校友 | 訪客
<input type="text" placeholder="請輸入關鍵字"/>
<input type="image" src="img/1.gif" />
</div><!--校徽右1-->
<div class="logo-right-2">
首頁 南開概況 院系機構 南開新聞 人才師資 教育教學 科學研究 國際交流 招生就業 圖書館 服務指南
</div><!--校徽右2-->
</div>
</div>
<div class="logo-shop">
<img src="img/BGPyong.jpg" />
</div><!--圖片欄-->
<div class="btn">
<div class="btn-1-1">
<img src="img/bangongwang.jpg" />
</div>
<div class="btn-1-1">
<img src="img/xiaozhangxinxiang.gif"/>
</div>
<div class="btn-1-1">
<img src="img/jiaoyujijinhui.gif" />
</div>
<div class="btn-2-1">
<img src="img/nankaixiaoyouhui.gif" />
</div>
<div class="btn-2-1">
<img src="img/xinximenhu.gif" />
</div>
<div class="btn-2-1">
<img src="img/VPNfuwu.gif" />
</div>
<input type="text" placeholder="用戶名" /><br />
<input type="password" /><br />
<select size="1"><br />
<option >教工電子郵箱</option>
<option >學生電子郵箱</option>
</select><br />
<a href="#">教工郵箱註冊</a>
<input type="submit" name="提 交" /><br />
<a href="#">學生郵箱註冊</a><br />
<a href="#">VPN服務》》</a><br />
</div><!--按鈕欄-->
<div class="list-1">
<div class="list-1-1">
最新動態 更多-》
</div>
<ul type="circle" class="list-1-1-1">
<li><a href="#">校黨委常委會召開巡視整改民主生活會; 07-18</a></li>
<li><a href="#">學校召開2017年暑期工作會議; 07-21</a></li>
<li><a href="#">第九屆全國MBA商業倫理與企業社會責任教學研討會南開召開; 07-21</a></li>
<li><a href="#">商學院推行課程思政 全過程突顯德育元素; 07-21</a></li>
<li><a href="#">我校教職工黨支部書記示範班赴井岡山培訓; 07-20</a></li>
<li><a href="#">南開學子苗春當選第五屆天津市道德模範; 07-20</a></li>
<li><a href="#">我校2017年本科高招錄取進程過半 生源質量穩中有升; 07-20</a></li>
<li><a href="#">學校召開新提任處級領導幹部廉政談話會; 07-20</a></li>
<li><a href="#">第七屆“圖書館學實證研究”博士生學術會議南開舉行; 07-20</a></li>
<li><a href="#">?一名經濟學博士的西部基層夢; 07-20</a></li>
<li><a href="#">?學校黨委要求組織師生收看《將改革進行到底》; 07-19</a></li>
<li><a href="#">南開大學團隊研獲新型生物熒光探針設計策略; 07-18</a></li>
</ul>
<div class="list-1-2">
校情通報 更多-》
</div>
<span class="list-1-2-1"><a href="#">7月6日，天津市政協副主席、我校黨委書記魏大鵬在昆明會見雲南省委書記、省人大常委會主任陳豪，省委副書記、省長阮成發。省委常委、常務副省長宗國英，省委副秘書長、省委辦公廳主任劉立誌，省政府副秘書長趙瑞君，我校領導楊克欣、張亞、佟家棟等參加會見。
南開大學辦公室
2017年7月10日 </a>
</span>
</div><!--多文本欄-->
<div class="list-2">
<div class="list-2-1">
通告公告 更多->
</div>
<ul type="circle" class="list-2-1-1">
<li><a href="https://www.baidu.com" target="_blank">暑假期間教務處辦理全日制本科畢...07-17</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期全校值班安排07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南開大學中層幹部擬提拔任用人選...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">八裏臺校區大中路施工的通知07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">2017年暑期職工醫療費報銷和醫保...07-17</a></li>
</ul>
<div class="list-2-2">
幹部選任 更多->
</div>
<ul type="circle" class="list-2-2-1">
<li><a href="https://www.baidu.com" target="_blank">關於推薦結對幫扶困難村駐村幹部...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">關於考察黨委組織部歐迎希的預告07-03</a></li>
<li><a href="https://www.baidu.com" target="_blank">關於考察黨委組織部張洋的預告07-03</a></li>
</u>
<div class="list-2-3">
南開大學電視新聞 更多->
</div>
<ul class="list-2-3-1">
<li><a href="https://www.baidu.com" target="_blank">南開大學電視新聞2017年7月14日07-14</a></li>
<li><a href="https://www.baidu.com" target="_blank">南開大學電視新聞2017年7月11日07-11</a></li>
</ul>
<div class="list-2-4">
媒體南開 更多->
</div>
<ul class="list-2-4-1">
<li><a href="https://www.baidu.com" target="_blank">天津日報：一個問題的解決就是對...07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">今晚報：啟功筆下的溥佐07-21</a></li>
<li><a href="https://www.baidu.com" target="_blank">遼寧衛視：錦州義勇軍抗戰遺址成...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">光明日報：史學研究的主旨在於求...07-20</a></li>
<li><a href="https://www.baidu.com" target="_blank">天津廣播網：恢弘重現改革歷程 ...07-20</a></li>
</ul>
</div><!--少文本欄-->
<div class="footer-1">
南開招標網 濱海學院 附屬小學 學習網 覺悟網 校史網 後勤保障部 講座網
</div>
<div class="footer-2">
天津市衛津路94號 [300071] 津教備0061號 津ICP號12003308號——1
</div>
</div><!--內容-->
</body>
</html>
靜態網頁練習