HTML&&CSS

時間 2019-11-12

標籤 html&&css html css 欄目 HTML 简体版

原文原文鏈接

1、網站註冊頁面顯示案例css

1.需求分析html

用戶若是想要在改商城購買商品，必須成爲該網站會員，首先得註冊，這個註冊頁面顯java

示的效果以下：面試

2.技術分析安全

2.1 表單標籤服務器

表單標籤：全部須要提交到服務器端的表單項必須使用<form></form>括起來！佈局

form標籤屬性：post

action,整個表單提交的位置(能夠是一個頁面，也能夠是一個後臺 java代碼)網站

method,表單提交的方式(get/post/delete……等 7種)spa

文本輸入項

批註 [ThinkPad1]: 提交到服務端必須指定的屬性，其

<input

type=」text」

name=」」

size=」」

maxlenght=」」

readonly=」」

值能夠任意，建議見文知意

placehoder=」」/>

批註 [ThinkPad2]: 指定輸入框的寬度

批註 [ThinkPad3]: 指定輸入內容的長度

批註 [ThinkPad4]: 設置爲只讀

批註 [ThinkPad5]: 輸入內容的提示信息

密碼輸入項

批註 [ThinkPad6]: 提交到服務端必須指定的屬性，其

值能夠任意，建議見文知意

單選按鈕

批註 [ThinkPad7]: 分組

批註 [ThinkPad8]: 提交到服務端必須指定的屬性，其

值能夠任意，建議見文知意

多選按鈕

批註 [ThinkPad9]: 默認選中

下拉列表

批註 [ThinkPad10]: 分組

</select>

批註 [ThinkPad11]: 提交到服務端必須指定的屬性，

其值能夠任意，建議見文知意

批註 [ThinkPad12]: 默認選中

文件上傳項

文本輸入域

提交按鈕

批註 [ThinkPad13]: 具有將整個表單提交到服務器的

功能

普通按鈕

批註 [ThinkPad14]: 修改按鈕上面的內容

重置按鈕

隱藏項

用於用戶比較敏感的一些信息。

面試題：

Get與 post提交方式的區別？【默認提交方式爲 get】

Get提交方式，全部的內容顯示在地址欄，不夠安全，長度有限制。

Post提交方式，全部的內容不會顯示在地址欄，比較安全，長度沒有限制。

若是想了解其它屬性查看相關的手冊便可。

3.步驟分析

第一步：建立一個五行一列的表格，而後分別對每一行進行實現

第二步：直接複製以前的代碼(第一行、第二行、第四行、第五行)

第三步：第三行(放置一個表單，經過表格標籤進行佈局)

4.代碼實現

<html>

<head>

</head>

<body>

<table border="1px" width="1300px" cellpadding="0px"

cellspacing="0px" align="center">

<tr>

<td>

<table border="0px" width="100%" cellpadding="0px"

cellspacing="0px">

<tr>

</td>

</td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td height="600px" align="center"

background="../img/regist_bg.jpg">

<table border="5px" width="800px" height="450px"

bgcolor="white">

<tr>

<td colspan="2">會員註冊 USER REGISTER </td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>Email</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<input type="radio" name="sex" value="男" />男

<input type="radio" name="sex" value="女"/>女

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<p>

<a href="../案例一：網站信息顯示頁面/網站信息顯示頁

面.html">關於咱們</a>

<a href="../案例三：網站友情連接顯示頁面/網站友情連接顯示

頁面.html">友情連接 </a>

</p>

</td>

</tr>

</table>

</body>

</html>

2、使用 CSS完成網站首頁重構

1.需求分析

昨天咱們已經使用 table進行首頁的一個佈局，可是使用 table進行佈局存在缺陷，

而通常的佈局都會採用 DIV+CSS來進行佈局。顯示的效果以下：

2.技術分析

2.1 DIV相關的技術

Div 它是一個 html 標籤，一個塊級元素(單獨顯示一行)。它單獨使用沒有任何意義，

必須結合 CSS來使用。它主要用於頁面的佈局。

Span 它是一個 html 標籤，一個內聯元素(顯示一行)。它單獨使用沒有任何意義，必

須結合 CSS來使用。它主要用於對括起來的內容進行樣式的修飾。

2.2 CSS相關的知識

什麼是 CSS？

Ø CSS的做用？

HTML：它是整個網站的骨架。

CSS：它是對整個網站骨架的內容進行美化(修飾)

Ø CSS如何使用？

語法和規範

選擇器{

屬性名 1:屬性值 1;

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

}

批註 [ThinkPad15]: 此處分號不能省略

批註 [ThinkPad16]: 此處的分號能夠省略，建議寫

上。

Ø CSS的引入方式

CSS的引入方式分爲三種

第一種：行內引入

JavaEE0516就業班

</div>

第二種：內部引入方式

div{

color:red;

font-size: 100px;

}

</style>

第三種方式：外部引入

若是<style type=」text/css」></style>

批註 [ThinkPad17]: 能夠省略不寫，默認值就是

text/css

優先級問題:

誰離須要修飾的元素近，誰的樣式生效，其它的被覆蓋掉。(就近原則)

Ø CSS的選擇器

CSS基本選擇器有三種(元素選擇器、類選擇器、id選擇器)

l ID選擇器

#id屬性名{

屬性名 1:屬性值 1;

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

}

批註 [ThinkPad18]: 此處分號不能省略

批註 [ThinkPad19]: 此處的分號能夠省略，建議寫

上。

Id保證惟一。

元素選擇器

元素名{

屬性名 1:屬性值 1;

批註 [ThinkPad20]: 此處分號不能省略

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

批註 [ThinkPad21]: 此處的分號能夠省略，建議寫

}

上。

若是多個相同的元素設置相同的樣式，使用此種方式最爲合適。

類選擇器

.類名{

屬性名 1:屬性值 1;

批註 [ThinkPad22]: 此處分號不能省略

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

批註 [ThinkPad23]: 此處的分號能夠省略，建議寫

}

上。

對多個元素設置相同的樣式，此時使用類選擇器比較合適。

Ø CSS的浮動

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲

止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在

同樣。

請看下圖，當把框 1 向右浮動時，它脫離文檔流而且向右移動，直到它的右邊緣碰到

包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文檔流而且向左移動，直到它的左邊緣碰到

包含框的左邊緣。由於它再也不處於文檔流中，因此它不佔據空間，實際上覆蓋住了框 2，使

框 2 從視圖中消失。

若是把全部三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左

浮動直到碰到前一個浮動框。

以下圖所示，若是包含框太窄，沒法容納水平排列的三個浮動元素，那麼其它浮動塊向

下移動，直到有足夠的空間。若是浮動元素的高度不一樣，那麼當它們向下移動時可能被其它

浮動元素「卡住」：

清除浮動

咱們要對網站進行佈局，顯示效果但願是上圖左邊的效果，此時咱們會將框 1和框 2向

左進行浮動，因爲使用了浮動，它們已經脫離了文檔流，框 3會上移至原來框 1的位置，導

致的現象是框 3隱藏在框 1下面。

那麼此時，咱們能夠清除浮動來清除以前框 1和框 2使用浮動後形成的問題！

解決辦法：

在框 3的前面定義一個 div(<div id=」three」></div>)

定義 CSS樣式：

#three{

clear:both;

}

Ø CSS 中如何讓塊級元素成爲內聯元素

咱們可使用個 CSS中的 display屬性(inline)進行設置

3.步驟分析

第一步：先定義個大的 div，而後嵌套 8個小的 div。

第二步：(第一行)在第一個 div裏面嵌套 3個小的 div

第三步：(第二行)在小 div裏面寫一個列表標籤(須要使用 css的 display屬性的 inline)

第四步：(第三行)在小 div裏面放置一張圖片

第五步：(第四行)在小 div裏面嵌套 2個 div(在下面的 div再嵌套 2個 div，最後一在右

邊的 div裏面嵌套 10個 div)

第六步：(第五行)在小 div裏面放置一張廣告圖片

第七步：(第六行)複製第四行的代碼

第八步：(第七行)在小 div裏面放置一張廣告圖片

第九步：(第八行) 在小 div裏面放置超連接和文字內容。

4.代碼實現

<html>

<head>

#logo{

border: 1px solid red;

width: 1300px;

height: 50px;

}

.top{

border: 1px solid blue;

width: 33.1%;

height: 48px;

float: left;

}

#menu{

border: 1px solid black;

width: 1300px;

height: 50px;

}

ul li{

display: inline;

color: white;

}

#product{

border: 1px solid red;

width: 1300px;

height: 564px;

}

#product_top{

border: 1px solid blue;

width: 1300px;

height: 60px;

}

#product_botttom{

border: 1px solid black;

width: 1300px;

height: 500px;

}

#product_botttom_left{

border: 1px solid green;

width: 190px;

height: 500px;

float: left;

}

#product_botttom_right{

border: 1px solid red;

width: 1105px;

height: 500px;

float: left;

}

#big{

border: 1px solid black;

width: 550px;

height: 248px;

float: left;

}

.small{

border: 1px solid blue;

width:182px ;

height: 248px;

float: left;

/*讓塊級元素文本內容居中*/

text-align: center;

}

#bottom{

text-align: center;

}

/*去掉超連接的下劃線*/

text-decoration: none;

}

</style>

</head>

<body>

</div>

</div>

</div>

<ul>

</ul>

</div>

</div>

<span style="font-size: 30px;">最新商品

</span>

</div>

<img src="../img/big01.jpg" width="100%" height="100%"

</div>

<a href="#"><img src="../img/middle01.jpg"

width="100%" height="100%"/></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<span style="font-size: 30px;">熱門商品

</span>

</div>

<img src="../img/big01.jpg" width="100%" height="100%"

</div>

<a href="#"><img src="../img/middle01.jpg"

width="100%" height="100%"/></a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>

<a href="../案例一：網站信息顯示頁面/網站信息顯示頁面.html">關

於咱們</a>

<a href="../案例三：網站友情連接顯示頁面/網站友情連接顯示頁

面.html">友情連接 </a>

</p>

</div>

</body>

</html>

此案例使用了 CSS的哪些內容：

去掉超連接的下劃線：

text-decoration: none;

}

讓 div居中

margin：0px auto;

讓塊級元素成爲內聯元素

display:inline;

塊級元素內容居中

text-align:center;

5.總結

5.1 盒子模型

Ø 1.盒子的組成

單個盒子

白話解說：

上圖中，紅色邊框爲手機的外包裝盒，並且外包裝盒有必定的厚度(border)，爲了保

護手機在運送的過程當中不被磕壞，咱們在盒子裏面四周填充了一層泡沫，而且泡沫也有必定

的厚度(padding)，這層泡沫將手機包裹住，手機就是整個盒子的核心內容(content)。

能夠這麼對比記憶：

手機------>>>內容(content)

泡沫------>>>padding

包裝盒---->>>boder

外包裝間距-->>>margin

aaaa

多個盒子：

Ø 2.盒子取值計算

咱們在修改頁面元素位置的時候，須要設定它相對於盒子的位置，那麼咱們有必要清楚

關於盒子模型裏面的取值相關問題。

在 CSS中，width和 height指的是內容區域的寬度和高度。增長內邊距、邊框和外邊

距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。而默認狀況下，內邊距、邊框和

外邊距的值均爲 0.

佔據頁面大小的區域是整個元素框的總尺寸！默認狀況，padding、margin、border

均爲 0，假如咱們設定了區域內容的 width和 height，那麼此時整個元素框的總尺寸就是

該區域內容的寬高了，此時，若是設定了 margin值，那麼整個元素框的總尺寸會發生變化

(變大了)，可是咱們但願它的總體佈局不發生變化！全部咱們能夠修改區域內容的尺寸(原

有大小減去設定的 margin值)。

附：圖解說明盒子模型取值問題

5.2 其它選擇器

層級選擇器

可使用層級選擇器設置列表的樣式

元素名子元素名{

屬性名 1:屬性值 1;

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

}

批註 [ThinkPad24]: 此處分號不能省略

批註 [ThinkPad25]: 此處的分號能夠省略，建議寫

上。

屬性選擇器

語法：

元素名[屬性名=」屬性值」]{

屬性名 1:屬性值 1;

屬性名 2:屬性值 2;

屬性名 3:屬性值 3;

}

批註 [ThinkPad26]: 此處分號不能省略

批註 [ThinkPad27]: 此處的分號能夠省略，建議寫

上。

<html>

<head>

<style>

input[type="text"]{

}

input[type="password"]{

}

</style>

</head>

<body>

用戶名：<input type="text" name="username"/><br />

密碼：<input type="password" name="password" />

</body>

</html>

顯示效果：

相關標籤/搜索

htmlcss

HTML

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。