CSS+DIV練手——旅遊網站

阿新 • • 發佈：2019-02-13

BS要結了，抽出空來拿CSS+DIV練練手，用了理解的會更深刻，這次做的是個旅遊網站的介面（例子源於《精通CSS.DIV網頁設計與佈局》）。

html程式碼：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link style="text/css" rel="stylesheet" href="css/journeyWeb.css"/>
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="image/banner.jpg" alt="圖片載入中"/>	
		</div>
		<div id="globalLink">
			<ul>
				<li><a href=www.baidu.com">首頁</a></li>
				<li><a href="#">新疆簡介</a></li>
				<li><a href="#">風土人情</a></li>
				<li><a href="#">吃在新疆</a></li>
				<li><a href="#">路線選擇</a></li>
				<li><a href="#">自助行</a></li>
				<li><a href="#">攝影攝像</a></li>
				<li><a href="#">遊記精選</a></li>
				<li><a href="#">資源下載</a></li> 
				<li><a href="#">雁過留聲</a></li>
			</ul>
		</div>
		<div id="left">
			<div id="weather">
				<h3><span>天氣查詢</sapn></h3>
				<ul>
					<li>烏魯木齊   雷陣雨20℃-31℃</li>
					<li>吐魯番   多雲轉陰20℃-28℃</li>
					<li>柴達木   雷陣雨轉多雲18℃-25℃</li>
					<li>庫爾勒   雷陣雨20℃-31℃</li>
					<li>克拉瑪依   雷陣雨20℃-31℃</li>
				</ul>
			</div>
			<div id="today">
				<h3><span>今日推薦</span></h3>
				<ul>
					<li><a href="#"><img src="image/tuijian1.jpg" ></a></li>
					<li class="sceneryname"><a href="#">克納斯河</a></li>
					<li><a href="#"><img src="image/tuijian2.jpg" ></a></li>
					<li class="sceneryname"><a href="#">布林津</a></li>
					<li><a href="#"><img src="image/tuijian3.jpg" ></a></li>
					<li class="sceneryname"><a href="#">天山之路</a></li>
				</ul>
			</div>
		</div>
		<div id="middle">
			<div id="ghost">
				<img src="image/ghost.jpg" alt="圖片載入中"/>
			</div>
			<div id="beauty">
				<h3><img src="image/picture_h1.gif"/></h3>
				<ul>
					<li><a href="#"><img src="image/beauty1.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty2.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty3.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty4.jpg" /></a></li>
				</ul>
				<br />
			</div>
			<div id="route">
				<h3><img src="image/route_h1.gif"/></h3>
				<ul>
					<li><a href="#">吐魯番-——庫爾勒———塔鐘</a></li>
					<li><a href="#">烏魯木齊-——庫爾勒———天池</a></li>
					<li><a href="#">五彩池-——將軍隔壁———那拉提</a></li>
					<li><a href="#">齊爾馬-——庫爾勒———塔鐘</a></li>
				</ul>
			</div>
		</div>
		<div id="right">
			<div id="map">
				<h3>新疆風光</h3>
				<div><a href="#"><img src="image/map1.jpg" alt="資料載入中"/></a></div>
				<div><a href="#"><img src="image/map2.jpg" alt="資料載入中"/></a></div>
			</div>
			<div id="food">
				<h3>小吃推薦</h3>
				<ul>
					<li><a href="#">17號抓飯</a></li>
					<li><a href="#">大盤雞</a></li>
					<li><a href="#">五一夜市</a></li>
					<li><a href="#">水果</a></li>
				</ul>
			</div>
			<div id="lift">
				<h3>賓館酒店</h3>
				<ul>
					<li><a href="#">美麗華大酒店</a></li>
					<li><a href="#">海德大酒店</a></li>
					<li><a href="#">銀都大酒店</a></li>
					<li><a href="#">鴻福大酒店</a></li>
					<li><a href="#">友好大酒店</a></li>
					<li><a href="#">棉麻大酒店</a></li>
					<li><a href="#">電信大酒店</a></li>
				</ul>
			</div>
		</div>
		<div id="footer">
		<p>清風 © 版權所有<a href="mailto: 
[email protected]">[email protected]</a></p>
		</div>
	</div>
</body>
</html>

CSS程式碼：

html{
	margin:0px;
	padding:0px;
	width:780px;
	margin:0 auto;
	font-size:12px;
	background-color:#2286C6;
}
body{

	margin:0px;
	padding:0px;
}
#header{
	width:780px;
	/*background-color:blue;*/
}

#globalLink{
	width:780px;
}
#globalLink a{
	display:block;
	padding:5px;
	background-image:url("../image/button1.jpg");
	background-repeat:no-repeat;
	   /*記得行內元素設定長度和寬度不好使，a標籤不屬於行內元素嗎？*/
}
#globalLink ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#globalLink ul li{
	float:left;
	width:78px;
	text-align:center;
}


#globalLink a:link ,#globalLink a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#globalLink a:hover{
	color:#ffffff;
	text-decoration:underline;
	background-image:url("../image/button1_bg.jpg");
}
#globalLink a:active{
	color:black;
}
#left{
	float:left;
	width:200px;
	background-color:#ffffff;

	margin:0px;
	padding:0px 0px 5px 0px;
	color:#d8ecff;
}

#weather{
	background:url(../image/weather.jpg)no-repeat -5px 0px;
	background-color:#53a6eb;
	margin:0px 5px;
}

#weather h3{
	font-size:12px;
	padding:24px 0px 0px 74px;
	color:#ffffff;
	background:none;
	margin:0px;
}

#weather ul{
	list-style:none;
	margin:8px 5px 0px 5px;
	padding:10px 0px 8px 5px;
}

#weather ul li{
	background:url(../image/icon1.gif) no-repeat 0px 6px;
	padding:1px 0px 0px 10px;
}
#today{

	background-color:#5EA6EB;
	margin:5px;
	margin-top:0px;
}
#today h3{
	margin:0px;
	padding-left:20px;
	background-color:#BBDDFF;
	background-image:url("../image/icon2.gif");
	background-repeat:no-repeat;
	background-position:10px 50%;
	color:#004AB7;
	
}
#today ul{
	list-style:none;
	margin:0px;
	padding:8px;

}
#today ul li{
	text-align:center;
}

#today.sceneryname{
	padding-bottom:6px;
}

#today a:link ,#today a:visited{
	color:#D8ECFF;
	text-decoration:underline;
}

#today a:hover{
	color:#ffffff;
	text-decoration:underline;
}
#today a:active{
	color:black;
}

#middle{
	background-color:#ffffff;
	margin:0px 0px 0px 2px;
	padding:0px;
	padding-left:5px;
	width:400px;
	float:left;
}

#middle #ghost img{
	margin-top:6px;
	margin-left:3px;

}

#beauty h3{
	margin:4px 0px;
}
#beauty  ul{
	list-style:none;
	margin:0px;
	padding:0px;
	padding:5px;
}
#beauty ul li{
	float:left;
	margin-right:9px;
	margin-bottom:5px;
	border:1px solid blue;
	height:123px;
}
#route h3{
	margin:4px 0px;
}

#route ul{
	list-style:none;
	padding:0px;
	margin:0px;
	padding:15px;
}
#route ul li{
	padding:1px 0px;
}
#route a:link ,#route a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#route a:hover{
	color:#000000;
	text-decoration:underline;
}
#route a:active{
	color:black;
}

#right{
	float:left;
	margin:0px 0px 1px 2px;
	width:171px;
	background-color:#5EA6EB;
	color:#d8ecff;
}

#right h3{
	color:#004AB7;
	margin:0px;
	
	background-color:#BBDDFF;
	padding:8px;
	padding-left:18px;
	background-image:url("../image/icon2.gif");
	background-repeat:no-repeat;
	background-position:7px center;
	
}
#right #map a{
	margin:0px;
}

#right #map a img{
	margin:5px 10px;
}
#right a:link ,#right a:visited{
	color:#D8ECFF;
	text-decoration:underline;
}

#right a:hover{
	color:#ffffff;
	text-decoration:underline;
}
#right a:active{
	color:black;
}


#food ul,#lift ul{
	list-style:none;
	padding:0px 0px 10px 0px;
	margin:10px 10px 0px 10px;
}

#food ul li,#lift ul li{
	background-image:url("../image/icon1.gif");
	background-repeat:no-repeat;
	background-position:3px 9px;
	padding:3px 0px 3px 12px;
	border-bottom:1px dashed #EEEEEE;
	
}
#food a:link ,#food a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#food a:hover{
	color:#000000;
	text-decoration:underline;
}
#food a:active{
	color:black;
}

#lift a:link ,#lift a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#lift a:hover{
	color:#000000;
	text-decoration:underline;
}
#lift a:active{
	color:black;
}

#footer{
	background-color:#ffffff;
	margin:1px 0px;
	clear:both;
	position:relative;
	padding:1px 0px;
	}

#footer p{
	text-align:center;
	padding:0px;
	margin:4px 5px;
	background-color:#5ea6eb;
	
}

#footer p a{
	color:#ffffff;
	text-decoration:none;

}

這段時間試著總結自己的“程式碼大全”，把不理解的和經典的程式碼段整理出來，積累久了肯定的、能大大的提高工作效率，有寫常用的東西還可以封裝起來，用的時候拿過來用就好了（比如像SQLHelper一類的）。

CSS+DIV練手——旅遊網站

BS要結了，抽出空來拿CSS+DIV練練手，用了理解的會更深刻，這次做的是個旅遊網站的介面（例子源於《精通CSS.DIV網頁設計與佈局》）。 html程式碼： <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0

面試練手題集（網站推薦）

htm 公司書籍 art 算法面試 item 程序員 detail tco 1)leetcode:一般筆試題會從leetcode找 2)橫空出世，席卷互聯網--評微軟等公司數據結構+算法面試100題對應已出版書籍《編程之法：面試和算法心得》購買鏈接：http://

大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版

靜態頁面靜態頁 watermark 簡單 ima 大學生 ges 51cto mar 了解下下+2425691680 大學生簡單網頁div+css網頁純手寫代碼制作html靜態頁面切圖排版

簡單練手使用css樣式製作電子相簿

先貼上原始碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

css+div table

xmlns body color 表格 oat size 衣服 text itl div+css table表格樣式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

Java制作最難練手速遊戲，Faker都堅持不了一分鐘

圖形圖像 java 想練手速，來啊，互相傷害啊Java制作最難練手速遊戲，目測Faker也堅持不了一分鐘制作思路：只靠Java實現。Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、Java、

練手小項目（2）-生活小助手--星座運勢查詢

avi 聚合數據當前 value book tell 身邊 req pin 上一篇內容練手小項目（2）-生活小助手今天星期一。趁著中午的歇息時間把第二個寫出來星座運勢，近期看看極客學院用聚合數據做了天氣預報的視頻教程，不好評價他。看他在後面的代碼變更那

理解css+Div定位

數值 hid 模型 http 影響收藏塊級元素 padding 不能一、DIV標記與SPAN標記 div和span都可以作為一個容器，集體控制容器內的樣式區別是div使塊級元素，前後會有換行而span是行內元素，前後不會換行二、盒子模型 1，概念任何頁面元素都可

java練手

javapublic class jichu{ public static void main(String[] args){ // 輸出控制臺 System.out.print("hello world");

css div子元素劇中

css<style type="text/css" media="screen"> div {display: inline-block;background-color: grey;} ul {list-style: none;display: table;margin:0 auto;backg

day-1.python初學者練手題

tom rep 初學 grid repeat 只需要 () padding -1 1.編寫一個名為right_justify的函數，函數接受一個名為``s``的字符串作為形參，並在打印足夠多的前導空格（leading space）之後打印這個字符串，使得字符串的最後一個字

一個簡單的模板了解css+div網頁布局

間隙 solid img har height .com eight -a dsi 直接附上最終效果圖： index.html內容： <html>  <head> &

[旅遊網站]設計實現

模板引擎北京 png 聯系郵箱驗證 net 程序永遠所有前面隨筆中提到了我要用flask技術實現一個旅遊類web程序，基本需求如下：（從學校的軟件課設要求中摘錄的）旅遊自助系統功能1.旅遊局維護景點的信息：景點位置、遊覽項目及價格、景點介紹、開放時間等2.每個

CSS+DIV命名

join log friend 主體 dlink 面包屑目標 wrap ssi 原地址：http://www.cnblogs.com/hylaz/archive/2012/10/27/2742743.html#2521377 頁頭:header 登錄條:loginBar

socket遠程控制（練手）___源碼

socket 基於遠程控制服務器端： #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2017/8/22 16:14 # @Author : Mr_zhang # @Site : # @File : serv

CSS DIV重疊

con delet clas you pre posit code out div重疊 1 <div style="position: relative"> 2 <div>content</div> 3 <div style=

練手nginx反向代理apache實戰

pst virtual stream ror roo cnblogs 什麽 sta war 先說下原理性的什麽是反向代理用戶訪問域名域名的指向到nginx nginx把請求轉發到apache apache處理後返回給用戶整套的邏輯對於用戶來說就是

CSS div的三種結構水平垂直包含margin的計算

play 第一個三種 range left sha 水平最大值 img <style> * { margin: 0; padding: 0; color: #fff

做了一個手表網站，怎麽用js改模板

奢侈品手表做了一個手表網站，怎麽用js改模板，卡地亞手鐲love見證愛情對於很多情侶來講，這對手鐲對他意義是特殊的，相信每個情侶都會喜歡帶情侶戒指項鏈，當然這款手鐲是完全符合情侶之間的定情物，美好的愛情也需要這款卡地亞手鐲love見證，情侶們可以考慮一下它啦！卡地亞手鐲love款價格是多少呢？這款象征著美好愛

簡單的工資管理系統小程序，只是練手

工資 swa 修改 lar 存在 inf 查詢 strip() 練手需求如下：工資管理系統aaa 100000bbb 80000ccc 50000ddd 30000-----以上是info.txt文件-----實現效果：從info.txt文件中讀取員工及其工資信息，最後

CSS+DIV練手——旅遊網站

相關推薦