2. 程式人生 > >JavaWeb前端-CSS定位與DIV佈局實戰-新疆行知書網頁設計

JavaWeb前端-CSS定位與DIV佈局實戰-新疆行知書網頁設計

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

本文程式碼為CSS定位與DIV佈局實戰-新疆行知書網頁設計的程式碼

by：arsoooo

網頁效果如下：
新疆行知書整體效果圖原始碼（相關檔案下載在最後）

index.html檔案程式碼

//index.html的程式碼如下

<!doctype html>
<html>
	<head>
	<title>新疆旅遊-arsoooo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta name="keywords" content=
 
"新疆"/>
		<meta name="description" content="新疆是個好地方"/>
		<link href="css.css" rel="stylesheet" type="text/css">
		<style type=""></style>
	</head>
	<body>
		<!--整體外層容器-->
		<div id="container">
			<!--banner條-->
			<div id="banner">
				<img
 
 src="images/banner.jpg" alt="新疆風光">
			</div>
			<!--全域性導航條-->
			<div id="globallink">
				<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>
					<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>天氣查詢</span></h3>
					<ul>
						<li>烏魯木齊   雷陣雨 20℃-31℃</li>
						<li>吐魯番   多雲轉陰 20℃-28℃</li>
						<li>喀什   陣雨轉多雲 25℃-32℃</li>
						<li>庫爾勒   陣雨轉陰 21℃-28℃</li>
						<li>克拉瑪依   雷陣雨 26℃-30℃</li>
					</ul>
				</div>
				<div id="today">
					<h3><span>今日推薦</span></h3>
					<ul>
						<li><a href="#"><img src="images\tuijian1.jpg"></a></li>
						<li><a href="#">喀納斯河</a></li>
						<li><a href="#"><img src="images\tuijian2.jpg"></a></li>
						<li><a href="#">布林津</a></li>
						<li><a href="#"><img src="images\tuijian3.jpg"></a></li>
						<li><a href="#">天山之路</a></li>
					</ul>	
				</div>
			</div>
			<!--中間欄-->
			<div id="middle">
				<div id="ghost">
					<a href="#" title="魔鬼域探祕"><img src="images\ghost.jpg" 
					border="0"></a>
				</div>
				<div id="beauty">
					<h3><span>美景尋蹤</span></h3>
					<ul>
						<li><a href="#"><img src="images\beauty1.jpg"></a></li>
						<li><a href="#"><img src="images\beauty2.jpg"></a></li>
						<li><a href="#"><img src="images\beauty3.jpg"></a></li>
						<li><a href="#"><img src="images\beauty4.jpg"></a></li>
					</ul>
				</div>
				<div id="route">
					<h3><span>推薦路線</span></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><span>新疆風光</span></h3>
					<p><a href="#" title="點選看大圖"><img src="images\map1.jpg"></a></p>
					<p><a href="#" title="點選看大圖"><img src="images\map2.jpg"></a></p>
				</div>
				<div id="food">
					<h3><span>小吃推薦</span></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="life">
				  <h3><span>賓館酒店</span></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>arsoooo&copy;版權所有 
				<a href="mailto:[email protected]">[email protected]</a>
				</p>
			</div>
		</div>	
	</body>
</html>

css.css檔案

//css.css的程式碼如下：

body{
	background:#2286c6;
	margin:0px;
	padding:0px;
	font-size:12px;
	font-family:Arial;
}
#container{
	margin:0px auto;
	width:780px;
	height:600px;
	text-align:left;
	background:#123456;
}
#banner{
	margin:0px;
	padding:0px;
	width:100%;
	height:150px;
	background:#778899;
}
#globallink{
	margin:0px;
	padding:0px;
}
#globallink ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#globallink ul li{
	float:left;
	text-align:center;
	width:78px;
}
#globallink ul li a{
	display:block;
	padding:7px 6px 7px 6px;
	margin:0px;
	background:url("images/button1.jpg") no-repeat;
}
#globallink a:link {
	color:#004a87;
	text-decoration:none;
}    /* 未被訪問的連結 */
#globallink a:visited {
	color:#004a87;
	text-decoration:none;
} /* 已被訪問的連結 */
#globallink a:hover {
	text-decoration:underline;
	background:url("images/button1_bg.jpg") no-repeat;
}   /* 滑鼠指標移動到連結上 */
#globallink a:active {text-decoration:underline;}  /* 正在被點選的連結 */

#left{
	margin:0px;
	padding:0px 0px 5px 0

相關推薦

JavaWeb前端-CSS定位與DIV佈局實戰-新疆行知書網頁設計

本文程式碼為CSS定位與DIV佈局實戰-新疆行知書網頁設計的程式碼 by：arsoooo 網頁效果如下： 原始碼（相關檔案下載在最後） index.html檔案程式碼 //index.html的程式碼如下 <!doctype html> <h

CSS定位與佈局

我們在編寫網頁程式碼時，首先應該做的就是設計好頁面的佈局形式，然後再往裡面填充內容。網頁佈局的好與壞，直接決定了網頁最終的展示效果。PC端常見的網頁佈局形式有兩列布局、三列布局等。在CSS中，我們通常使用浮動(float)、定位(position)、顯示模式(display)相關屬性結合使用，以達到預期效果。

CSS 定位與浮動

head pla 控制 spl tex index ati top 同一行 CSS 定位　　 Static：元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置於其父元素中。 　　相對定位(relative)：與最近的一個元素進

web前端css定位position和起浮float

div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯現為一塊內容，即“塊框”。與之相反，span和h3等元素稱為“行內元素”，這是由於它們的內容顯現內行中，即“行內框”。          在這種狀況下，這個框稱為無名塊框，由於它

2018.09.24 學習筆記 // 前端CSS // 浮動與BFC

1.什麼是浮動？為什麼要清除？ 脫離文件流 空間被後面的人佔用 不排隊的人也得排自己的隊 全部浮動，實現橫向排列 父元素沒有了高度（會影響後面的元素），所以要清除。 2.如何“清楚浮動”/“閉合浮動”？ 1.overflow：hiddin 2.給父級新增偽元素

CSS定位與CSS屬性選擇器

從上週的周任務來看，自己的CSS還是學習的不夠紮實，所以本週的主要任務是學習CSS定位和CSS屬性選擇器。CSS 有三種基本的定位機制：普通流、浮動和絕對定位。一般如果不給元指定特定的地方，元素一般會按照普通流來排列,如果設定了特定的地方則按照下面說法排列。 1.絕對定位

CSS—定位與浮動

1.CSS定位 通過css定位可以實現頁面元素的指定效果顯示。它允許你定義元素框相對於其正常 位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。 position 定位屬

圖文詳解前端CSS中的Grid佈局，你真的可以5分鐘掌握

前言 網站的佈局是一個網站設計的根本，CSS的Grid佈局已經成為了未來網站佈局的基本方式。 今天這篇文章我們通過圖文，一起看看如何自己實現Grid佈局方式。 CSS 第一個Grid佈局 首先我們看看最基本的Grid佈局是什麼樣的，HTML頁面的程式碼如下所示。 HTM

【HBase】問題定位與調優實戰（持續更新中。。。）

問題標題：CTBase manager頁面無法開啟，Hbase不可用問題描述：hbase shell操作時報錯HMaster正在初始化ERROR:org.apache.hadoop.hbase.PleaseHoldException:Master is initializin

css定位與z-index例項

<html><head><style>/* 靜態 */#ct1{ background:green; height:200px; width:200px; margin-bottom:10px;}#subCt1{ position:stat

CSS文字與文字樣式之文字行高line-height詳解

一、基本介紹 line-height： 對於代替元素，line-height沒有影響 對於非代替元素，line-height才有影響 對於塊級元素，css屬性lin

圖解聖盃佈局與雙飛翼佈局--CSS佈局實戰一

本質：均是兩側頂寬（寬度固定），中間自適應 適用：電商網頁pc移動端展示，比如淘寶、京東等電商網頁都有應用。 區別：只是中間自適應的處理方式不同。 聖盃佈局： 中間主要是直接撐滿，然後讓左右通過相對絕對定位（position）來浮動。 雙飛翼佈局：中間同樣充滿，在中間再放一層內部

後端碼農談前端（CSS篇）第七課：定位與浮動

一、定位： 1、定位的理解 （1）相對定位 相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。 如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 3

前端基礎——CSS+DIV佈局

       隨便開啟一個網頁，按下F12，你會發現一堆密密麻麻的“DIV”，沒錯，現在大部分的網頁都用了CSS+DIV的佈局方式。        上篇說了盒子模型，這裡就以盒子模型為基礎來簡單瞭

CSS+DIV網頁樣式佈局實戰從入門到精通 中文pdf掃描版

CSS+DIV網頁樣式佈局實戰從入門到精通通過精選案例引導讀者深入學習，系統地介紹了利用CSS和DIV進行網頁樣式佈局的相關知識和操作方法。全書共21章。第1～5章主要介紹網頁樣式佈局的基礎知識，包括基本概念和語法、程式碼的編寫方法、盒子模型及高階特性等；第6～11章主要介紹

css關於相對定位與絕對定位

css 1.一般如果我們不給元素設置position，則默認為static，此時是該元素是沒有定位的，像left/right這些偏移屬性都是沒有效果的。 2.position:relative （相對定位） 若設置為相對定位，即可配置left/right這些偏移，相對於該元素原有位置

前端HTML基礎與css

換行 文件中 不同 spa 平鋪 有序列表 正在 lock 屬性 一. HTML簡介：(使用http協議) 1. 靜態網頁： HTML制作完成，網頁的內容如果沒有人去重新更新或制作的話，內容是永遠一成不變的。 2. 動態網頁： 在不同的

CSS 相對/絕對(relative/absolute)定位與jQuery的控制顯示隱藏

append scrip idt 元素 nes width play isp relative 曾經寫顯示隱藏老是用jq方法控制： dom.show(); dom.hide(); 事實上這樣還是有非常多缺陷的。 這是html結構：

DIV(CSS 定位)

下層 style position ack span 上層 order col blog <div style="position: relative;width:800px;height: 300px;background-color: gainsboro;bor

CSS 如何通過top left 定位控制div在另一個div的位置

src 技術 charset .com utf erb 效果 width left 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"