2. 程式人生 > >HTML靜態網頁設計

HTML靜態網頁設計

阿新 • • 發佈：2019-02-10
第一週：HTML寫靜態網頁

一、HTML理論介紹及常用格式

1.HTML主體格式基本結構<!DOCTYPE html>
<html>
<head>
<mate charset="utf-8"/>
<title>標題</title>
</head>
<body>
主要內容
</body>
</html>解說：整個HTML格式分為兩大部分，一個是head部分，一個是body部分，其中head部分是用於書寫網頁樣式，而body部分用於書寫網頁主題

2.常用標籤：

標題標記

<h1></h1>

...
<h6></h6>

<p></p>段落標籤

<b></b> <strong></strong>加粗  

<i></i>傾斜

<br/>換行

&nbsp;空格

<img src="" alt="" title=""/> 圖片【gif，png，jpg】src:圖片的連結地址 alt：圖片載入失敗的時候，在圖片原本的位置顯示的提示文字
title：滑鼠懸停的時候，顯示的提示文字

<a href="" target=""></a> 超連結  href：連結地址  target：開啟新網頁的開啟方式，預設是在本頁面開啟

<div></div> 盒子

<span></span>

3.css樣式：

內聯樣式： <標記 style="屬性1：屬性值1；屬性2：屬性值2；..."></標記>
內部樣式：在head中新增<style></style>

4.選擇器：
（1）標籤選擇器：在<>中的標記都可以作為標籤選擇器
語法：
<style>
標記{
屬性1：屬性值1；
屬性2：屬性值2；
            }
</style>
（2）class選擇器：必須在style中進行宣告，在標籤中進行引用，宣告的時候使用“.”進行宣告，多個class選擇器可以同時作用於一個標記。
語法：
<style>
.color1{
屬性1：屬性值1；
屬性2：屬性值2；
            }
        .color2{
屬性1：屬性值1；
屬性2：屬性值2；
}
</style>
<p class= "color1 color2">M</p>
id選擇器：

必須在style中進行宣告，在標籤中進行引用，宣告的時候使用“#”進行宣告，他是唯一的，取名的時候不能使用關鍵字
語法：
<style>
#color1{
屬性1：屬性值1；
屬性2：屬性值2；
}
#color2{
屬性1：屬性值1；
屬性2：屬性值2；
}
</style>
<p id= "color1">M</p>

:hover 偽類選擇器，表示滑鼠經過事件
包含選擇器：必須要有包含的關係
比如：.box p
<div class="box">
<p></p>
</div>

（5）常用的css屬性：
width：寬  取值px/%
height：高  取值px/%
background-color 背景顏色
font-size 字型大小
font-weight：bold；字型加粗
line-height  行高
color 字型顏色
text-align：center/left/right 文字居中/居左/居右
border：邊框寬度  邊框顏色  邊框樣式； 邊框
box-showdow：水平陰影的位置，垂直陰影的位置，高斯模糊的距離，陰影的寬度，陰影的顏色以及透明度，陰影的樣式
border-radius：邊框圓角
transform：rotate(10deg) scale(1.2); 動畫，旋轉動畫單位deg  縮放動畫
transtion：all 0.3s； 過渡動畫，單位ms/s
margin：外邊距
padding：內邊距

(6)元素型別
塊元素：
特徵：獨佔一行，可以設定寬高，一般情況下作為容器。
若寬不指定的情況下預設與父元素寬度相等，若高不指定的情況下，則它的高度由其內容來決定。
對於塊元素，我們若指定了寬度，可以使用margin-left與margin-right取值為auto來進行水平居

例如：div、p、h1~h6

行內元素：
特徵：不獨佔一行，設定不上寬高。
行內元素的大小由其內容大小來決定。
例如：span、a

行內塊元素：隸屬於行內元素，但是又具有塊元素的特徵。

特徵：既不獨佔一行，又能設定寬高。


(7).元素型別轉換
display：block； 轉為塊元素
display：inline； 轉為行內元素
display：inline-block；轉為行內塊元素


(8)浮動
float：left； 左浮動
float：right； 右浮動
作用：通過浮動，我們可以使塊元素在同一行顯示


(9)列表
無序列表
<ul>
<li></li>
<li></li>
...
</ul>

有序列表

type的取值：1、a、A、i、I

<ol type="">
<li></li>
<li></li>

</ol>

自定義列表
<dl>
<dt>名詞</dt>
<dd>解釋</dd>
</dl>




(10)css樣式：
外部樣式的引用
<link   href="外部樣式檔案的地址"></link>

去掉下劃線：
text-decoration: none;

去掉列表預設的樣式：
list-style: none;

平移動畫
transform: translateX(20px) ;
translateX：在x軸的平移，取值為正，向右平移，取值為負，向左平移
translateY：在y軸的平移，取值為正，向下平移，取值為負，向上平移。

(11)background：背景顏色  背景圖片連結地址  背景圖片平鋪方式  背景圖片水平方向的位置  背景圖片垂直方向的位置
引數二：url("")
引數三：預設repeat，no-repeat 不平鋪  repeat-x水平平鋪   repeat-y垂直
引數四：預設left，取值left/right/center/px/%
引數五：預設top，取值top/bottom/center/px/%


(12)position定位
可以有四個方位進行定位：
left、top、right、bottom

絕對定位：position：absolute；
特徵：參照物是具有定位屬性的父元素，不佔據原本的位置（脫離文件流）
相對定位：position：relative；
特徵：參照物是自己原本的位置，佔據自己原本的位置（不脫離文件流），一般情況下作為包含塊


固定定位：position：fixed；
特徵：參照物當前視窗，它的位置與父元素無關，也與當前所在位置無關。


(13)高度塌陷
高度塌陷出現的契機：當沒有給父元素高度，並且它裡面所有的子元素都發生浮動的時候，會出現高度塌陷。
why？ 父元素沒有指定高度，那麼它的高度由其子元素來決定，當子元素都給了浮動，【浮動是脫離文件流的（不再佔據自己原本的位置）】，
父元素測量不到子元素的高度，高度顯示為0
解決：
給父元素新增overflow：hidden；
在子元素的最後新增一個空盒子，並且給這個空盒子新增clear：both；




(14)opacity透明度
他的取值[0,1] 0:全透明  1：不透明




(15)display：none； 隱藏

opacity：0； 與display：none；區別
使用它們兩個的時候，都可以實現不可見的功能，但是opacity：0的時候，這個元素它存在只是透明度發生變化
，而是display：none；這個元素不佔據位置（移除）

(16)選擇器的權重

“*”萬用字元權重為0000
標籤選擇器的權重為0001
class選擇器的權重為0010
id選擇器的權重為0100
內聯樣式的權重為1000
偽類選擇器的權重 0010
群組選擇器的權重等於它自己本身的權重
包含選擇器的權重為所有權重之和


當屬性出現重複的時候，會遵從權重高的那個，當權重相同的時候，後寫的屬性值會覆蓋前面的那個




(17)圖片整合
本質：就是對背景圖片進行定位。
使用的契機：背景圖片大於盒子的時候。




(18)錨鏈接
定義錨點，使用id來定義 ：<p id="back">錨點</p>
定義錨鏈接，使用a標籤：<a href="#back">錨鏈接</a>




(19)overflow：hidden/scroll/auto
hidden：超出顯示區域的部分隱藏
scroll：無論內容有木有超出顯示區域，都會顯示滾動條
auto：當內容超出顯示區域的時候，則顯示滾動條，否則不顯示。




(20)子類選擇器
.nav li:nth-child(1)，小括號中可以使用2n或者2n+1/2n+1，選中奇數或者是選中偶數個，
通過1/2/3...可以選中.nav下面的第n個li。



二、專案實戰

（一）一些粗淺的想法。

1.拿到一個需求，第一步不是去按照自己的想法立刻去敲程式碼，首先應該做好規劃，就以寫靜態網頁為例，寫規劃的時間要遠遠小於你自己後期改程式碼的時間。

2.添加註釋。添加註釋是很好的習慣，在剛寫程式碼的時候，新增的註釋要儘可能的詳細，這會為後期的維護和專案的交接提供很好的便利，不然沒人看的懂你的程式碼。

3.變數名的選擇。在取變數名的時候，千萬不要使用拼音，因為拼音看多了，真的是接受不了。使用英文的變數名會好很多，見文知意。

4.程式碼書寫完，功能實現之後，要去優化自己的程式碼，讓自己的程式碼更加簡潔，可讀性更強

（二）書寫專案導航欄（以CNDS為例）


首先：對於這個導航欄分析一下，第一個cnds圖示放在一個盒子裡（logo），然後給文字資訊一個盒子（content），所以CNDS和文字資訊都在同一個盒子（nav）

程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CNDS</title>
		<style type="text/css">
			/*上面這部分是書寫這個box盒子的格式，其中包括大小，背景顏色，以及位置*/
			.nav{
				width: 1000px;
				height: 50px;
				/*給出背景顏色，可以更好的判斷盒子的位置，最後再濾除背景顏色*/
				/*background: red;*/
				margin: 20px 10px;
			}
			.logo{
				width: 95px;
				height: 40px;
				/*margin-top: 10px;*/
				float: left;
				margin: 10px;
			}
			.logo img{
				line-height: 40px;
			}
			.content{
				width: 500px;
				height: 35px;
				margin: 5px;
				/*background: bisque;*/
				float: left;
			}
			.content ul{
				/*去除列表格式*/
				list-style: none;
			}
			.content li{
				/*去除列表格式*/
				list-style: none;
				/*使列表排成一排*/
				float: left;
				/*上下間隔為0，左右間隔為5個畫素*/
				margin: 0 5px;
				/*上下居中*/
				line-height: 100%;
			}
			.content li a {
				/*去除超連結的下劃線*/
				text-decoration: none;
				/*超連結的字型顏色：黑色*/
				color: black;
			}
			.content li a:hover{
				/*使用hover動畫，改變滑鼠經過事件*/
				color: red;
			}
		</style>
	</head>
	<body>
		<!--給出一個大盒子nav,用於存放CNDSlogo和文字-->
		<div class="nav">
			<div class="logo">
				<!--匯入圖片使用<img src="圖片地址">-->
				<img src="img/CNDS.png"/>
			</div>
			<div class="content">
				<ul>
					<li><a href="#">首先</a></li>
					<li><a href="#">部落格</a></li>
					<li><a href="#">學院</a></li>
					<li><a href="#">下載</a></li>
					<li><a href="#">GitChat</a></li>
					<li><a href="#">TinyMind</a></li>
					<li><a href="#">商城</a></li>
					<li><a href="#">VIP</a></li>
					<li><a href="#">其他</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>


（三）一個完整頁面的設計

1.功能需求

（1）以設計稿為主，頁面寬度可以參考下面網址，設計稿相對於下面網址做了小修改
（2）總時間為4小時 首頁和文章詳情頁面（如圖）
（3）詳情頁面的新聞詳情不需要自己單獨排版，隨便複製內容 調整 行高 和字型大小就可以了
（4）輪播先用一張圖片代替  images資料夾已經提供
（5）分享也用一張圖片代替，images資料夾已經提供
（6）頁面的製作完全按照設計稿   文字 和圖片可以隨便複製，但是佈局出來的效果要和設計稿一樣

原網站：http://yigujin.wang/

2.程式碼實現

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上機考試</title>
		<style type="text/css">
			.box{
				width: 100%;
				height: 100%;
				/*background: red;*/	
			}
			.box .head{
				width: 100%;
				height: 105px;
				background: white;
			}
			.head .logo{
				width: 235px;
				height: 65px;
				background: blue;
				float: left;
				margin: 0 20px;
				background: url(img/logo.jpg) no-repeat;
			}
			.head .nav{
				width: 650px;
				height: 65px;
				/*background: blueviolet;*/
				float: right;
				margin: 0 200px;
			}
			.nav ul{
				list-style: none;
				text-align: center;
				line-height: auto;
			}
			.nav li{
				width: 75px;
				height: 25px;
				list-style: none;
				float: left;
				margin: 0 10px;
				text-align: center;
				line-height: 25px;
			}
			.nav li a{
				text-decoration: none;
				color: black;
				font: 10px;
				font-weight: bold;
				display: block;
			}
			.nav li:nth-child(1):hover{
				background: ;
				
			}
			.nav li:nth-child(2):hover{
				background: red;	
			}
			.nav li:nth-child(3):hover{
				background: red;	
			}
			.nav li:nth-child(4):hover{
				background: red;	
			}
			.nav li:nth-child(5):hover{
				background: red;	
			}
			.content{
				width: 1100px;
				height: 2500px;
				/*background: blue;*/
				margin: 0 100px;
				margin-bottom: 200px;
			}
			.main{
				width: 800px;
				height: 100%;
				/*background: green;*/
				float: left;
				margin: 0 10px;
			}
			
			.main .bg{
				width:800px ;
				height: 300px;
				margin: 10px 0;
				
			}
			.bg img{
				width:100% ;
				height: 100%;
			}
			.text1{
				width: 100%;
				height: 215px;
				
			}
			.text1 .bg-sb{
				width: 270px;
				height: 200px;
				margin: 2px 2px;
				float: left;
				
			}
			.bg-sb img{
				width:100%;
				height: 100%;
			}
			.text1 .essay{
				width: 380px;
				height: 200px;
				float: left;
				/*background: violet;*/
				margin: 0 10px;
			}
			
			.essay ul{
				list-style: none;
				text-align: left;
			}
			.essay li{
				list-style: none;
				
			
			}
			.essay li:nth-child(1){
				font-size: 18px;
				font-weight: bold;
			}
			.essay li:nth-child(4){
				font-size: 18px;
				font-weight: bold;
				margin: 10px ;
			}
			.essay li a{
				display: block;
				text-decoration: none;
				font-size: 12px;
				color: rgb(168,181,213);
				float: left;
				margin:  0 10px;	
			}
			.main .avd1{
				width: 800px;
				height: 200px;
				/*background: hotpink;*/
				
			}
			.adv1 img{
				width: 800px;
				height: 200px;
			}
			.consult{
				width:240px;
				height: 100%;
				/*background: gold;*/
				float: left;
				margin: 0 20px;
			}
			.consult1{
				width: 240px;
				height: 85px;
				/*background: yellowgreen;*/
				margin: 10px 0;
			}
			.consult1 img{
				width: 100%;
				height: 85px;
				margin: 10px 0;
			}
			.consult2{
				width: 240px;
				height: 480px;
				/*background: darkgrey;*/
				border: 1px solid white;
			}
			.consult2 p{
				font-size: 18px;
				font-weight: bold;
				margin: 5px 5px;
			}
			.consult2 ul{
				list-style: none;
			}
			.consult2 li{
				width: 200px;
				display: block;
				list-style: none;
				margin: 15px 0;
				/*border: 1px dashed black;*/
				border-bottom: 1px dashed black;
				
			}
			.consult2 li a{
				text-decoration: none;
				color: gray;
			}
			.foot{
				width: 100%;
				height: 260px;
				background: black;
				margin-bottom: 20px;
			}
			.title{
				width: 1100px;
				height: 100px;
				background: gray;
				margin: 10px 30px;
			}
			.title ul{
				list-style: none;
			}
			.title li{
				list-style: none;
				float: left;
				margin: 0 10px;
			}
			.title li a{
				text-decoration: none;
				color: white;
			}
			.num{
				width:1100px;
				height: 50px;
				margin: 100px 30px;
			}
			.num ul{
				list-style: none;
				
			}
			.num li{
				list-style: none;
				float: left;
				margin: 0 10px;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head">
				<div class="logo">
					
				</div>
				<div class="nav">
					<ul>
						<li  ><a style="color: red;"href="#">本站首頁</a></li>
						<li><a href="#">Nana主題</a></li>
						<li><a href="#">隨筆筆記</a></li>
						<li><a href="#">技術文件</a></li>
						<li><a href="#">手氣不錯</a></li>
						<li><a style="background: rgb(192,30,34);color:white ;">搜尋</a></li>
					</ul>
				</div>
			</div>
			<div class="content">
				<div class="main">
					<div class="bg">
						<img src="img/banner.jpg"/>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是9折或85折的優惠，經過與老薛主機營運長Mars的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="adv1">
						<img src="img/ad04.jpg"/>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic01.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="text1">
						<div class="bg-sb">
							<img src="img/news_pic02.jpg"/>
						</div>
						<div class="essay">
							
							<ul>
								<li>臺下一年功，臺上10分鐘</li>
								<li>隨筆筆記  :9小時前</li>
								<li>老薛主機市面上大多數都是 9 折或 85 折的優惠，經過與老薛主機營運長 Mars 的溝通聯絡，終於獲得老薛主機終</li>
								<li><a href="">閱讀26次</a></li>
								<li><a href="">博主生活</a></li>
								<li><a href="">工作生活</a></li>
							</ul>

							
						</div>
					</div>
					<div class="adv2">
						
					</div>
				</div>
				<div class="consult">
					<div class="consult1">
						<img src="img/ad01.jpg"/>
					</div>
					<div class="consult2">
						<p>最新文章</p>
						<ul>
							<li><a href="#">臺上一分鐘臺下十年功之折騰HJK集團電話交換機</a></li>
							<li><a href="#">wordPress呼叫指定tag標籤下的所有文章製作專題文章</a></li>
							<li><a href="#">帝國之雙面佳人第六十章</a></li>
							<li><a href="#">wordPress新手入門教程之文章管理篇新手入門教程之文章管理篇</a></li>
							<li><a href="#">wordPress新手入門教程之文章管理篇新手入門教程之文章管理篇</a></li>
						</ul>
					</div>
					<div class="consult1">
						<img src="img/ad01.jpg"/>
					</div>
					<div class="consult2">
						<p>最新文章</p>
						<ul>
							<li><a href="#">臺上一分鐘臺下十年功之折騰HJK集團電話交換機</a></li>
							<li><a href="#">wordPress呼叫指定tag標籤下的所有文章製作專題文章</a></li>
							<li><a href="#">帝國之雙面佳人第六十章</a></li>
							<li><a href="#">wordPress新手入門教程之文章管理篇新手入門教程之文章管理篇</a></li>
							<li><a href="#">wordPress新手入門教程之文章管理篇新手入門教程之文章管理篇</a></li>
						</ul>
					</div>
					
				</div>
			</div>
			<div class="foot">
				<div class="title">
					<ul>
						<li>友情連結:</li>
						<li><a href="#">百度</a></li>
						<li><a href="#">部落格</a></li>
					</ul>
				</div>
				<div class="num">
					<ul>
						<li>[email protected]主題</li>
						<li>桂ICP備1400471號</li>
						<li>Theme by zbpNana </li>
						<li>Powered by Z-BlogPHP</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

結束語：第一次寫部落格，還有很多欠缺的地方，請各位大神多多指教。


相關推薦

HTML靜態網頁設計

第一週：HTML寫靜態網頁一、HTML理論介紹及常用格式1.HTML主體格式基本結構<!DOCTYPE html><html><head><mate charset="utf-8"/><title>標題</ti

HTML靜態網頁css成品DW大學生網頁作業制作畢業設計

大學生 src 網頁 img p s http 制作 mark title HTML靜態網頁源碼css成品DW大學生網頁作業制作畢業設計+2425691680 HTML靜態網頁css成品DW大學生網頁作業制作畢業設計

html+js 簡單靜態網頁設計

實驗一 簡單靜態網頁設計 一、 實驗目的： 1. 複習使用記事本編輯網頁的方法。 2. 熟悉不同表單控制元件型別的應用。 3. 練習使用記事本在網頁中新增表單與表單元素。 二、 實

html+jsp 簡單靜態網頁設計

<html> <head> <title>問卷調查</title> <style type="text/css"> body { padding: 0px 10% 0px 10%; } #ft { text-align:center; f

Html靜態網頁下載—Teleport Pro 1.68 官方原版

apple pan 進程 搜索網站 得到 ava span 靜態 地址 Teleport Pro 1.68 官方原版+有效註冊碼 – 下載整個網站 簡介 Teleport Pro由美國Tennyson Maxwell公司開發，曾被PC Magazine評為”編輯選擇

ZBLOG系統PHP程序無法生成純HTML靜態網頁導致的2大缺陷

ZBLOG php 數據庫 最近在研究ZBLOG系統，其中有ASP版本，可以搭配ACCESS和MS-SQL數據庫，也都有生成HTML純靜態網頁文件的插件，雖然對於ZBLOG2.1-2.2的ASP版本來說，靜態化插件沒有及時更新，導致提交網頁後在後臺無法跳轉的小問題，但還是可以用的，目前來說，除了在

Html靜態網頁的實現——（二）之傻瓜式教程

上次說到Html5中無法換行的問題 <body> <p>把文字輸入到這裡</p> <p>把文字輸入到這裡</p> </body> 看看執行結果 這下是不是就換行了   格式：<p a

html靜態網頁製作中div+css的淺運用

        在基地實訓的這些日子，對於javaweb靜態網頁佈局也有了些理解，博主在此與大家分享一下這幾天總結的經驗。         當然博主算是相對的初學者（畢竟大學前三年混過來的），寫程式碼也要用dreamweaver輔助，求不噴，對於我的理解指點就好。     

HTML+CSS網頁設計與佈局從入門到精通摘要

HTML網頁文件結構： 1.首先應該明確一個概念，HTML不是一種程式語言，而是一種描述性的標記語言，用於描述超文字中內容的顯示方式。 2.<html>標記：<html>標記放在HTML檔案的開頭，並沒有什麼實質性的功能，只是一個形式上的標記，但還

tomcat部署簡單的html靜態網頁

首先電腦上（無論Windows還是linux系統）應該裝好java和Tomcat，並設定好它們的環境變數。 設定完成後，啟動Tomcat ，開啟瀏覽器輸入網址：http://ip:port，如果出現相應的頁面，說明Tomcat安裝成功，可以繼續下面的配置。 在\co

html網頁設計細節總結及實踐經驗總結

text 文件路徑 -1 div 提醒 進制的轉換 改換 slice 對話 1) <link rel=” ” type=”text/css” href=”__.css”>是空元素，僅包含屬性。用來定義文檔與外部資源的關系，常用於鏈接樣式表

html網頁設計

html文檔 基本 屬性 網頁 一個 打開 -- body 網頁設計 對於html文檔可以直接通過瀏覽器打開並解釋執行，不需要使用服務器。一個html文檔的架構，一般由3對標簽構成:<html></html>,<head></hea

靜態網頁框架設計首次體驗（文章改）

指點 .com 框架設計 關於 odi 綜合 bsp contex 參考 根據教材與上網成功解決了Tomcat與Myeclipse的安裝，同時熟悉了Java web創建項目到部署運行整個過程。今天起正式開始學習有關Java web的編程部分。Java web靜態網頁（HTM

HTML&XML網頁設計 (曾鴻) pdf掃描版

6.4 技術分享 屬性 文章 超鏈接 掌握 修飾 高職高專 序列 HTML&XML網頁設計循序漸進地介紹了HTML、CSS、XML、XSL、XLL（XLink+XPointer），並通過諸多實例讓讀者了解了HTML和XML標記的用法，掌握了網頁設計的原理、方法和技巧

HTML 5+CSS 3網頁設計經典範例 (李俊民,黃盛奎) 隨書光盤?

ets 新增功能 支持 文字樣式 .com src 設計 視頻 網頁 《html 5+css 3網頁設計經典範例(附cd光盤1張)》共分為18章，涵蓋了html 5和css3中各方面的技術知識。主要內容包括html 5概述、html 5與html 4的區別、html 5的結

新編html網頁設計從入門到精通 (龍馬工作室) pdf掃描版?

題解 ima tps 數據 式表 成長 原則 com 內容 新編html網頁設計從入門到精通共分為21章，全面系統地講解了html的發展歷史及4.0版的新特性、基本概念、設計原則、文件結構、文件屬性標記、用格式標記進行頁面排版、使用圖像裝飾頁面、超鏈接的使用、使用表格組織頁

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

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

HTML 的靜態網頁分頁樣式

HTML 的靜態網頁分頁樣式 page.css程式碼如下: #page-normal{ color:#ff9655; text-align:center; font-size:0px; } #page-normal a{ border:1px solid #ff9600;

靜態網頁(html顯示一句話）

靜態網頁顯示一句話 用記事本寫上程式碼，修改後綴名為html（另存為修改格式）就可以了，然後瀏覽器開啟。 <html> <head> <title> Q15010308 </title> </head> <body> &

利用HTML和CSS設計一個靜態的“小米商城官網首頁”

一、小專案說明 　　這是個例行的小專案練習，主要利用html和css的基礎知識，復刻一個縮減版的小米商城網頁。包括【導航欄】、【頭部logo區，快捷鍵、搜尋框】、【網頁主體】、【網頁尾部】幾個部分。目前只實現靜態的網頁顯示。最終效果圖如下：   二、程式框架 　　按照開發規範，先