Web開發學習筆記（22）-CSS（9）常用屬性作業、盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            text-align:center;
            color:#001D26;
        }
        h4{
            color:#900
        }
        p{
            font-size:16px;
            color:#3E4B53;
            text-indent:2em;
        }
        a:link{
            color:skyblue;
        }
        a:hover{
            color:red;
        }
        body{
            background-image:url(https://labfile.oss.aliyuncs.com/courses/2841/bg1.jpg);
        }
    </style>
</head>
<body>
    <p>
        <h1> 憶江南 </h1>
    </p>
    <a href="https://labfile.oss.aliyuncs.com/courses/2841/poem.htm">唐·白居易</a>
    <p>
        (1)江南好，風景舊曾諳。(2)日出江花紅勝火，春來江水綠如藍，(3)能不憶江南。
    </p>
    <h4>作者介紹</h4>
    <p>
        白居易（772-846），字樂天，太原（今屬山西）人。唐德宗朝進士，元和三年（808）拜左拾遺，后貶
        江州（今屬江西）司馬，移忠州（今屬四川）刺史，又為蘇州（今屬江蘇）、同州（今屬山西大荔）刺史。晚居
        洛陽，自號醉吟先生、香山居士。其詩政治傾向鮮明，重諷喻，尚坦易，為中唐大家。也是早期詞人重的佼佼者，
        所作對后世影響甚大。
    </p>
    <h4>注釋</h4>
    <p>
        (1)據《樂府雜錄》，此詞又名《謝秋娘》，系唐李德裕為亡姬謝秋娘作。
        又名《望江南》、《夢江南》等。分單調、雙調兩體。單調二十七字，雙調五十四字，
        皆平韻。
        (2)諳（音安）：熟悉。
        (3)藍：藍草，其葉可制青綠染料。
    </p>
    <h4>品評</h4>
    <p>
        此詞寫江南春色，首句“江南好”，以一個既淺切又圓活的“好”字，攝盡江南的種種佳處，
        而作者的贊頌之意與向往之情也盡寓其中。同時，唯因“好”之已甚，方能“憶”之不休，因此，
        詞句又已暗逗結句“能不憶江南”，并與之相關闔。此句“風景舊曾諳”，點明江南風景之“好”，
        并非得之傳聞，而是作者出牧杭州時的親身體驗與親身感受。這就既落實了“好”字，又照應了“憶”字，
        不失為勾通一篇意脈的精彩筆墨。三兩句對江南之“好”進行形象化的演繹，突出渲染紅花、江水紅綠相映
        的明艷色彩，給人以光彩奪目的強烈印象。其中，既有同色間的相互烘托，又有異色間的相互映襯，充分顯示了作者
        善于著色的技巧。篇末，以“能不憶江南”收束全詞，既托出身在洛陽的作者對江南春色的無限贊嘆與懷念，又造成一種悠遠而又
        深長的韻味，把讀者帶入余情搖漾的境界中。
    </p>
</body>
</html>

示為

盒模型：

(1)border 相關的屬性：

border-top-style 屬性
border-right-style 屬性
border-bottom-style 屬性
border-left-style 屬性

border-style 屬性是用來設置邊框樣式的，我們可以直接使用 border-style 來設置四個邊框的樣式，也可以分別設置上下左右四個邊框的屬性。

border-top-style 屬性是給上邊框設置樣式的。
border-right-style 屬性是給右邊框設置樣式的。
border-bottom-style 屬性是給下邊框設置樣式的。
border-left-style 屬性是給左邊框設置樣式的。

我們來舉個例子吧！

我們在 body 標簽中添加一對段落標簽。將段落元素邊框的上、右、下、左四個部分的邊框類型分別設置為實線、點狀、虛線和雙線。

例子，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            border-top-style:solid;
            border-right-style:dotted;
            border-bottom-style:dashed;
            border-left-style:double;
        }
    </style>
</head>
<body>
    <p>
        王耶浪Web開發學習筆記
    </p>
</body>
</html>

顯示為，

（2）border-width 屬性：

border-top-width 屬性
border-right-width 屬性
border-bottom-width 屬性
border-left-width 屬性

border-width 屬性是用來設置邊框寬度的，我們可以直接使用 border-width 來設置四個邊框的寬度，也可以分別設置上下左右四個邊框的屬性。

border-top-width 屬性是給上邊框設置寬度的。
border-right-width 屬性是給右邊框設置寬度的。
border-bottom-width 屬性是給下邊框設置寬度的。
border-left-width 屬性是給左邊框設置寬度的。

例子，

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        border-style: solid;
        border-top-width: thin;
        border-right-width: medium;
        border-bottom-width: thick;
        border-left-width: 6px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web開發學習筆記
    </p>
  </body>
</html>

顯示為，

（3）border-color 屬性：

border-top-color 屬性
border-right-color 屬性
border-bottom-color 屬性
border-left-color 屬性

border-color 屬性是用來設置邊框顏色的，我們可以直接使用 border-color 來設置四個邊框的寬度，也可以分別設置上下左右四個邊框的屬性。

border-top-color 屬性是給上邊框設置顏色的。
border-right-color 屬性是給右邊框設置顏色的。
border-bottom-color 屬性是給下邊框設置顏色的。
border-left-color 屬性是給左邊框設置顏色的。

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        width: 420px;
        height: 200px;
        border: 1px solid;
        border-top-color: red;
        border-right-color: green;
        border-bottom-color: blue;
        border-left-color: yellow;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web開發學習筆記
    </p>
  </body>
</html>

顯示為，

（4）border 屬性和 padding 屬性，以及使用這兩個屬性做練習：

border 屬性
padding 屬性

border 是邊框屬性，它是復合屬性，其用法如下所示：

border: 上右下左的值;

border-top: 上邊框值;
border-right: 右邊框值;
border-bottom: 下邊框值;
border-left: 左邊框值;

padding 屬性是一個復合屬性，代表我們盒子模型中的填充，也就是內容區域外部的空白區域。

其使用格式如下所示：

padding: 上右下左;

padding-top: 頂部填充值;
padding-left: 左邊填充值;
padding-right: 右邊填充值;
padding-bottom: 底部填充值;

例子，

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        border-top: thin solid red;
        border-right: medium dotted green;
        border-bottom: dashed thick blue;
        border-left: double 6px yellow;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>
      王耶浪Web開發學習筆記
    </p>
  </body>
</html>

顯示為，

（5）margin 屬性：

margin 屬性

margin 屬性是用來設置元素的外邊距：

使用格式：

margin: 上邊距 右邊距 下邊距 左邊距;

也可以省略寫。

當左右邊距值相同時，寫法如下：

margin: 上邊距 左右邊距 下邊距;

當上下邊距值相同，左右邊距值相同時，寫法如下：

margin: 上下邊距 左右邊距;

當上下左右邊距值均相同時，寫法如下：

margin: 屬性值;

從上面的內容，我們可以看出 margin 屬性是個復合屬性，我們可以分開設置上下左右的邊距，寫法如下：

/*上邊距*/
margin-top: 屬性值;
/*左邊距*/
margin-left: 屬性值;
/*右邊距*/
margin-right: 屬性值;
/*下邊距*/
margin-bottom: 屬性值;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        border: 1px solid blue;
      }
      p {
        width: 100px;
        height: 50px;
        background-color: darkgrey;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <p>王耶浪Web開發學習筆記</p>
    </div>
  </body>
</html>

顯示為，

margin 屬性來改變 p 元素相對于 div 元素的位置。修改代碼如下：

p {
  width: 100px;
  height: 50px;
  background-color: darkgrey;
  text-align: center;
  margin: 25px 50px;
}

顯示為，

（6）display 的常用屬性：

display 屬性可以用來設置元素在頁面上的排列方式，也可用來隱藏元素。

display 屬性值的說明如下表所示。

屬性值	說明
block	元素以塊級方式展示。
inline	元素以內聯方式展示。
inline-block	元素以內聯塊的方式展示。
none	隱藏元素。

block 屬性值可以讓行內元素以塊級元素的方式顯示在頁面上。

其使用格式如下：

display: block;

還記得前面學過的行內元素的概念嗎？行內元素就是可以和其他元素同處一行的元素，例如 span 標簽元素：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      span {
        display: block;
      }
    </style>
  </head>
  <body>
    <span>王耶浪</span><span>Web開發學習筆記</span>
  </body>
</html>

顯示為，

原本 span 標簽是行內元素，卻因為設置 display: block; 導致「王耶浪」與「Web開發學習筆記」分開了。

inline 屬性值可以讓像 div 這樣的霸道塊，接納其他元素來自己的地盤。

其使用格式如下：

display: inline;

例子，

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        display: inline;
      }
    </style>
  </head>
  <body>
    <div>王耶浪</div>
    <div>Web開發學習筆記</div>
  </body>
</html>

顯示為，

塊內元素和行內元素有其獨特的優勢，在某些情況下，我們想讓一個元素既具有塊內元素的特點，又具備行內元素的特點。這就要請出 inline-block 屬性值來施展這個魔法了。

其使用格式如下：

display: inline-block;

哪些情況下可以用到這個屬性？

比如，用 a 標簽來實現導航的時候，a 標簽可以讓元素在一行顯示，但若想給每個 a 標簽加上高和寬時發現沒有任何效果。這時用 display: inline-block，a就具備塊的特性了。

例子,

日，深圳市第二實驗學校的三名物理老師在抖音發布了一小段物理教學實驗視頻，在短短一天時間內居然有數百萬的點擊量，近兩萬人點贊。

視頻中的主角，是深圳市第二實驗學校的黃正玉、鄭景華、馮雅琪三名物理老師。在這個名為《3+1=3？》的物理教學實驗短視頻中可以看到，右邊放手后,其中一個鉤碼加速上升，處于超重狀態，即拉力T大于一個鉤碼重力mg，其中另三個鉤碼加速下落，處于失重狀態，即拉力T小于3mg。通過牛頓定律可以算出拉力T等于1.5mg，故合起來拉力為3mg，剛好和左邊三個鉤碼重力相等，達到平衡。

實際上，這個視頻是該校物理課組承擔的規劃課題《物理習題實驗化的實踐研究》的內容，這是一個用來講解超重與失重的教學視頻。課題目標是將習題教學和實驗創新聯姻，讓兩者相得益彰。這種短視頻受到學生普遍喜歡，既能加深學生對知識點的深刻理解，更能提高學生的實踐素養。

對于這段視頻的走紅，該校高一女生學生卓盈表示非常出乎意料，其實這些實驗在課堂上非常常見，能勾起她對于物理的興趣。另一名高一男生史豪則表示，老師這次發抖音讓很多人關注到物理實驗的有趣，有些學生也在刷抖音，也能從中學到一些知識。

短短一段視頻有著如此大的傳播力度，黃正玉老師表示之前完全沒有想到。黃老師認為，教學中不要過多的習題化訓練，而要創設一些情景，讓同學們更好地認識規律以及實際情景下的聯系，最終達到對物理規律更好的理解。這一次視頻在抖音上走紅，令老師們意識到，新技術、新媒體在推進教學改革方面大有可為。

（來源：深圳都市頻道《第一現場》編輯：劉清揚）

署說明

NANCHANG UNIVERSITY

題目: 晚餐預定系統

學院： 軟件學院

專業：軟件工程

班級：

完成人數： 1 人

成員：

起訖日期：

任課教師： 職稱：副教授

完成時間：

填表日期： 年月日

一、開發環境的搭建及遇到的主要問題

1．開發環境

根據個人技術背景，選擇開發環境如下：

將Demo部署為B/S架構的應用；
使用集成軟件包搭建開發環境：PHP+Apache+MySQL；
借助NuSOAP庫實現WSDL服務的部署；
2．主要問題
自己對于amp組合建站流程已經比較熟悉，借助集成軟件包xampp或者wamp即可輕松搭建出開發環境。
時間和精力主要耗費在NuSOAP庫上，大概花了半天時間用于上手。
二、數據庫與服務端設計

數據庫設計

數據庫共設計兩個表：

餐桌類集合表(tableset)：tid, 餐桌容量，餐桌數目，餐桌可擴充人數，描述
預約表(reservation)：rid，稱謂，手機號，餐桌類型，人數，就餐日期，訂餐時間

說明：

tableset表是各種餐桌類別的集合，存放各類餐桌的屬性，非常方便餐桌的集中管理；
reservation表是用戶預約的集合，所有的預約在該表中被動態地管理，對于預約的集中管理提供很大的便利；
用戶在訂餐時，首先根據就餐人數確定餐桌類型，結合就餐日期篩選“預約”表，得到空余的餐桌數目，從而安排新的預約。而“取消訂餐”，則可以直接在“預約”表中操作。
以上設計對于餐桌和預約的維護都具有很強的可擴展性。

初始數據

初始共往tableset表中插入3條數據記錄：

10張座位為4的餐桌；

8張座位為8的餐桌（可擴充2個座位）；

2張座位為12的餐桌（可擴充3個座位）

2. 主要服務：

availableDinnerDate——獲取有效訂餐日期
參數：（無）
返回值：有效訂餐日期與今天的距離天數(xsd:int)
checkContact——檢查聯系方式格式
參數：聯系方式(str:xsd:string)
返回值：格式是否正確，取1或0(xsd:int)
說明：只支持國內的手機號碼格式
availableTable——根據用戶給出的信息查詢可用餐桌
參數：日期(date xsd:int)，就餐人數(total xsd:int)
返回值：包含新預定id以及查詢狀態的組合字串(xsd:string)
addContact——補充聯系方式信息
參數：預定id(rid xsd:int)，稱謂(title xsd:string)，聯系方式(contact xsd:string)
返回值：狀態字串(xsd:string)
cancelReservation——取消一條預定
參數：預定id(rid xsd:int)
返回值：狀態字串(xsd:string)
inquiryReservation——查詢某用戶的預定
參數：聯系方式contact(xsd:string)
返回值：一組預訂記錄(tns:Reservation)
說明：返回值為自定義的復雜類型
deleteReservation——刪除預定
參數：要刪除的預定id組合rids(xsd:string)
返回值：操作狀態(xsd:int)
說明：可一次刪除多條預定
三. 服務部署與客戶端調用
Demo的服務端最初由PHP腳本形式呈現，通過調用NuSOAP庫將其封裝并發布成WSDL。
Demo的客戶端采用網頁的方式呈現，借用html/css/js技術進行設計，提供“訂餐”和“取消訂餐”等功能的前臺操作界面。
用戶的請求通過ajax傳遞給后臺上的一個中轉服務腳本hub，該服務根據請求類型調用相應的web service，并將服務調用結果傳遞給前臺。
為了更加真實的模擬web service工作過程，本Demo將“DinnerB應用”和“Web Service服務中心”開發成兩個獨立的應用，并分別部署到不同的機器上，主要示意圖如下：

圖1 應用架構簡略示意圖
四、運行結果截圖和文字說明

客戶端登陸
在瀏覽器中輸入DinnerB應用的網址http://127.0.0.1/dinnerb，來到訂餐前臺，在主體區域的左側可以找到主要的功能菜單：
訂餐

點擊“我要訂餐”開始訂餐的第一步（共兩步），根據提示輸入必要信息（帶*的項目）：就餐日期、就餐人數以及驗證碼；
驗證無誤后提交，中轉服務會收集參數（就餐日期和人數），調用availableTable服務，如果有空余的餐桌，該服務會為用戶創建一條“臨時預約記錄”，并返回該記錄id。中轉服務首先注冊session，存放id，然后返回處理成功信息，并通知前臺跳轉至下一步頁面“填寫聯系方式”，如圖3。若因各種原因導致無法成功訂餐（參數不合法或者沒有空余餐桌），前臺都將提示相應的“訂餐失敗”信息，如圖4中因為就餐人數不符合系統要求導致訂餐失敗；

圖2 DinnerB首頁

需要說明的是，“就餐日期”中的日期選項是頁面加載期間調用availableDinnerDate計算出的正確可訂餐日期，這樣控制了用戶的可出錯范圍。

圖3 有空余座位圖4 訂餐失敗

第二步，用戶要在規定時間內填寫其聯系信息（稱謂和聯系方式，其中稱謂選填），點提交，中轉服務調用addContact為之前建立的臨時記錄補充客戶聯系信息，成功后返回用戶編號（圖5），用戶在就餐時提供該編號，即可查詢到預定的餐桌號（這是設想，本Demo暫時沒添加就餐應用）。如因各種原因導致訂餐失敗（超時或者聯系方式不正確），整個訂餐過程都將停止，臨時記錄也會被刪除，如圖6和圖7。

圖5 訂餐成功

圖6 聯系信息不正確

圖7 填寫信息超時

說明：由于訂餐過程分兩步進行，為了防止用戶在兩步之間人為地耽誤過長時間，占用餐桌資源，因此設計出“臨時記錄”+“有效時間”機制，超時后，系統會自動終止訂餐過程，并刪除臨時記錄。

3. 取消訂餐

A．點擊“取消訂餐”，填寫訂餐時提供的聯系方式，提交（如圖8）。中轉服務調用inquiryReservation查詢該用戶所有的預約，成功的話，前臺會列出該用戶所有成功的預約，如圖9；

B. 用戶選擇要取消的訂餐選項（可多選），提交后，中轉服務會調用deleteReservation刪除對應的預約記錄，取消訂餐成功。為了安全考慮，該頁面具有一次性屬性，切換菜單或者刪除不成功都無法重新回到該頁面。

圖8 取消訂餐——填寫聯系方式

圖8 訂餐記錄圖9 選擇要取消的訂餐記錄

五、總結

WSDL為web服務提供了詳細的接口說明，實現了服務的可閱讀性，方便了服務的傳播。在此之前，自己一直是一個web站點開發者，自己寫服務自己調用，無法體會服務傳播中的問題。

大作業給了一個加深WSDL理解的機會，由于自己在web方面的技術積累，做起來可謂是輕松加愉快。于是重點都放在了對WSDL具體實現的學習上。非常要感謝前人做的工作，NuSOAP庫使得自己不用再擔心去操作WSDL語言，而可以坐等自己的服務被翻譯成WSDL接口文件。

在線咨詢

上一篇：PHP筆記(二) HTML表單
下一篇：HTML轉換成PDF，這樣就搞定了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Web開發學習筆記（22）-CSS（9）常用屬性作業、盒模型

署說明

您的項目需求