今天就把HTML篇和CSS篇來做一個結合吧~
就挑一個幾乎每個網站都會有的"註冊會員"頁面來練習
首先先來分析一個註冊頁面需要有哪些元素
1.帳號
2.密碼
3.暱稱
4.生日
5.性別
6.電子信箱
7.送出和返回按鈕
大概就這些欄位了
接下來就開始建立網頁吧
一、
在桌面上建立一個記事本，名稱為registered，副檔名為.html
二、
把剛剛建立的檔案用筆記本開啟
開始撰寫
先把基本的HTML語法給寫上去
<html>
<head>
<title>註冊頁面</title>
</head>
<body>
</body>
</html>
三、
把一開始列出來的功能加入進去
<html>
<head>
<title>註冊頁面</title>
</head>
<body>
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" />年<input type="text" />月<input type="text" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" /></p>
</body>
</html>
存檔後執行看到的畫面會是這樣
接下來我們就美化一下
四、
我們先改變文字的大小和字型
那應該要用哪種選擇器呢??
先觀看一下我們的結構
所有的文字都被P標籤包住了
那我們應該用 Type selectors(類型選擇器)
介紹一下要使用到的CSS
font-size : 文字大小
font-family : 字型
color : 文字顏色
把CSS加進去後就變成這樣
<html>
<head>
<title>註冊頁面</title>
<style type="text/css">
p{
font-size:17px;
font-family:標楷體;
color:blue;
}
</style>
</head>
<body>
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" />年<input type="text" />月<input type="text" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" /></p>
</body>
</html>
執行後就會看到畫面變成這樣
五、
文字改完後接下來就要調整輸入框的寬度
看一下畫面
帳號、密碼、暱稱 這三個欄位寬度用預設的就差不多了
但是生日及電子信箱的寬度一個太大一個太小
我們就要來調整了
那麼該使用哪個選擇器
寬度有些標籤需要有些不需要
同樣一個寬度也可能套用到多個標籤
所以使用 Class selectors(類選擇器) 比較符合
介紹一下要使用到的CSS
width : 寬度
把CSS加進去後就變成這樣
<html>
<head>
<title>註冊頁面</title>
<style type="text/css">
p{
font-size:17px;
font-family:標楷體;
color:blue;
}
.w50{
width:50px;
}
.w250{
width:250px;
}
</style>
</head>
<body>
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" class="w50" />年<input type="text" class="w50" />月<input type="text" class="w50" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" class="w250" /></p>
</body>
</html>
執行後看上去就比較合理了
六、
一片白色的很單調
可以挑選一張背景圖片來襯托網頁
我們還是使用 Type selectors(類型選擇器)
介紹一下要使用到的CSS
background-image : 圖片網址
把CSS加進去後就變成這樣
<html>
<head>
<title>註冊頁面</title>
<style type="text/css">
html{
background-image:url(http://img.ivsky.com/Photo/UploadFiles/2008-1-5/200815183838830.jpg);
}
p{
font-size:17px;
font-family:標楷體;
color:blue;
}
.w50{
width:50px;
}
.w250{
width:250px;
}
</style>
</head>
<body>
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" class="w50" />年<input type="text" class="w50" />月<input type="text" class="w50" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" class="w250" /></p>
</body>
</html>
7.
接下來我們就把資料欄位的位置移動一下吧
首先必須把所有欄位先用SPAN標籤包起來
再動用CSS的絕對定位功能來移動
使用 Class selectors(類選擇器)
介紹一下要使用到的CSS
position : 定位方式
top : 由上往下的距離
left : 由左往右的距離
把CSS加進去後就變成這樣
<html>
<head>
<title>註冊頁面</title>
<style type="text/css">
html{
background-image:url(http://img.ivsky.com/Photo/UploadFiles/2008-1-5/200815183838830.jpg);
}
p{
font-size:17px;
font-family:標楷體;
color:blue;
}
.w50{
width:50px;
}
.w250{
width:250px;
}
.position{
position:absolute;
top:150px;
left:250px;
}
</style>
</head>
<body>
<span class="position">
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" class="w50" />年<input type="text" class="w50" />月<input type="text" class="w50" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" class="w250" /></p>
</span>
</body>
</html>
8.
把最後的按鈕加上去就完成了
<html>
<head>
<title>註冊頁面</title>
<style type="text/css">
html{
background-image:url(http://img.ivsky.com/Photo/UploadFiles/2008-1-5/200815183838830.jpg);
}
p{
font-size:17px;
font-family:標楷體;
color:blue;
}
.w50{
width:50px;
}
.w250{
width:250px;
}
.position{
position:absolute;
top:150px;
left:250px;
}
</style>
</head>
<body>
<span class="position">
<p>帳號：<input type="text" /></p>
<p>密碼：<input type="text" /></p>
<p>暱稱：<input type="text" /></p>
<p>生日：<input type="text" class="w50" />年<input type="text" class="w50" />月<input type="text" class="w50" />日</p>
<p>性別：<input type="radio" name="sex" checked="checked" />男生<input type="radio" name="sex" />女生</p>
<p>電子信箱：<input type="text" class="w250" /></p>
<p><button>送出</button><button>返回</button></p>
</span>
</body>
</html>
從一開始確認需求 -> 基本語法 -> CSS美化
這樣就可以完成一個美觀的頁面
所以網頁真的不難，也希望大家可以用熱情來玩網頁
這樣才會快樂喔