時(shí)間：2023-05-23 17:33:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-05-23 17:33:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
小白7天入門PHP Web開發(fā) - Day 3 CSS和JS的基礎(chǔ)應(yīng)用：《小白7天入門PHP Web開發(fā)》系列文章，面向單純善良的完全不懂Web開發(fā)編程的入門速成課程，小白們?nèi)绻信d趣可以研讀此系列文章，也可以連線提問。各路大神有何指教還請(qǐng)指點(diǎn)一二。希望各路大神手下留情，注意維護(hù)自己的身份和形象。拜謝各位。上一篇文章 我們學(xué)會(huì)了使用簡(jiǎn)單的HTML標(biāo)簽完成了留言評(píng)論頁(yè)面的實(shí)現(xiàn)（開發(fā)），這節(jié)我們開始嘗試使用CSS來(lái)修飾和美化我們昨天寫的HTML頁(yè)面。
在線咨詢
/*以下是CSS的基本寫法*/* { font-size: 14px;}html, body, ul, li, p { margin: 0px; padding: 0px;}#list, .form { width: 100px; height: 100px; background-color: gray;}從上面的CSS代碼，我們不難看出（強(qiáng)行不難），基本結(jié)構(gòu)就是/*注釋內(nèi)容，我就不多講了，就是兩頭加中間內(nèi)容*/選擇器1, 選擇器2 ｛ 屬性名：屬性值｝沒錯(cuò)~?。銈冎牢依ㄌ?hào)里要說(shuō)什么）什么叫 選擇器 呢？選擇器 通常是我們需要改變外貌（樣式）的 HTML 元素，就是用來(lái)選擇要改變樣式的HTML元素，比如上面的* /*是代表選擇了頁(yè)面上所有的HTML元素，可以稱之為通配選擇器*/html, body, ul, li, p /*是選擇了叫這些名字的HTML標(biāo)簽元素，可以稱之為標(biāo)簽選擇器*/#list /*是代表了具有屬性id="list"的HTML元素，可以稱之為id選擇器*/.form /*是代表了具有屬性class="form"的HTML元素，可以稱之為類選擇器*/暫時(shí)我們只需要先記住這些選擇器，基本上夠我們比較長(zhǎng)一段時(shí)間內(nèi)使用了。 <!-- HTML代碼 --> <div id="box"> 我是一個(gè)BOX </div> <!-- CSS代碼 --> <style type="text/css"> #box { width: 100px; height: 100px; background-color: lightgray; margin: 100px auto; padding: 20px; border: 2px dotted gray; } </style>效果圖上一個(gè)#box { margin: 10px 20px 10px 20px;}#box { margin: 10px 20px;}#box { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px;}最后有沒有發(fā)現(xiàn)，效果圖左下角這個(gè)寬度和高度，我們?cè)O(shè)置的是100*100，變成了144*144呢？正是因?yàn)樗闵狭诉吙虻?px、內(nèi)邊距的20px，兩邊就是44px啦，邊框和內(nèi)邊距跟元素本身的寬高組成了元素的最終寬高。<div id="box" style="margin: 0 auto;">第二種方式：直接放在HTML標(biāo)簽 <style></style>的內(nèi)部<style type="text/css"> #box { margin: 0 auto; }</style>第三種方式：直接放在后綴名為 .css 的文件內(nèi)，然后在HTML頁(yè)面用 <link href="stylefile.css">引入即可<!-- stylefile.css -->#box { margin: 0 auto;}<!-- board.html --><head> <link rel="stylesheet" type="text/css" href="style.css"></head><div id="box"></div>三種方式可以交叉使用，第一種最直接，但是如果屬性多，頁(yè)面看起來(lái)就會(huì)很雜亂，所以有了第二種，把CSS集合起來(lái)，但是第二種CSS代碼過(guò)多，或者有些公共的通用的CSS代碼時(shí)，不同頁(yè)面要重復(fù)寫相同CSS，很煩，所以有了第三種文件形式的寫法，不同頁(yè)面引入同一個(gè)CSS文件就可以了，該內(nèi)容要求仔細(xì)體會(huì)理解，融（si）會(huì)（ji）貫（ying）通（bei）~！<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>留言評(píng)論頁(yè)面</title> <link rel="stylesheet" type="text/css" href="style.css"></head><body> <div id="container"> <!-- 主題標(biāo)題 --> <div id="topic"> 主題：你怎么看這個(gè)頁(yè)面？ </div> <!-- 已經(jīng)留言評(píng)論的內(nèi)容 --> <div id="list"> <!-- 留言評(píng)論列表 --> <ul> <li> <!-- 評(píng)論內(nèi)容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">張五兒</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <!-- 回復(fù)列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回復(fù)</span> <span class="name">張五兒</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 評(píng)論內(nèi)容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">張五兒</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <!-- 回復(fù)列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回復(fù)</span> <span class="name">張五兒</span> <span class="content">666</span> <span class="time">22:29</span> </li> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">孫六</span> <span class="replytxt">回復(fù)</span> <span class="name">李二狗</span> <span class="content">我也覺得很666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 評(píng)論內(nèi)容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">張五兒</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <!-- 回復(fù)列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回復(fù)</span> <span class="name">張五兒</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> <li> <!-- 評(píng)論內(nèi)容 --> <p class="comment"> <span class="img"> <img src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">張五兒</span> <span class="content">我就是趴窗口看啊，不然能怎么看</span> <span class="time">22：29</span> </p> <!-- 回復(fù)內(nèi)容 --> <!-- 回復(fù)列表 --> <ul class="reply"> <li> <span class="img"> <img width="30" height="30" src="https://pic3.zhimg.com/v2-8db3d95eb0776a730f7fb683bdc9de0f_t.jpg"> </span> <span class="name">李二狗</span> <span class="replytxt">回復(fù)</span> <span class="name">張五兒</span> <span class="content">666</span> <span class="time">22:29</span> </li> </ul> </li> </ul> </div> <!-- 提交留言和評(píng)論 --> <div id="form"> <form action="" method="get"> <!-- 標(biāo)題，此處標(biāo)題在上面其實(shí)并沒有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="請(qǐng)輸入標(biāo)題"> </p> <!-- 內(nèi)容 --> <p> <textarea name="content" placeholder="請(qǐng)輸入內(nèi)容"></textarea> </p> <!-- 按鈕 --> <p> <button type="submit">提交</button> </p> </form> </div> </div></body></html>首先，我們發(fā)現(xiàn)所有內(nèi)容都要居中，那么我們?cè)谒性赝饷姘粚?lt;div id="container">，然后讓這個(gè)div居中，里面的內(nèi)容也就自然居中了。左右居中我們常用的辦法之一就是下面的代碼/*左右居中方法之一，設(shè)置寬度和margin為0 auto，后者意思是左右外邊距自動(dòng)上下為0*/#container { width: 600px; margin: 0 auto;}然后，我們要主題文字變大，同時(shí)整個(gè)container距離頂部一定距離（外邊距），給展示的留言評(píng)論加個(gè)背景顏色和上面的距離（外邊距）。/*所有元素去掉內(nèi)外邊距，元素獨(dú)自設(shè)置，并設(shè)置字體為微軟雅黑，統(tǒng)一字體大小*/* { margin: 0; padding: 0; font-family: "微軟雅黑"; font-size: 14px;}/*去掉ul列表的默認(rèn)樣式，前面有小點(diǎn)點(diǎn)，去掉*/ul { list-style: none;}/*整體距離頂上邊50px，并做左右居中處理*/#container { width: 600px; margin: 0 auto; margin-top: 50px;}/*主題字體大小設(shè)置為48px*/#topic { font-size: 48px;}/*留言評(píng)論列表添加上邊距30px和背景顏色*/#list { margin-top: 30px; background-color: #f4f4f4;}第三步，我們要下面的表單（還記得表單吧）跟上面元素的距離（外邊距）里面的文本框和文本域以及按鈕有一定寬度和高度。/*表單上邊距*/#form { margin-top: 30px;}/*輸入框設(shè)置寬度（100%表示充滿整個(gè)父元素）、高度、左內(nèi)邊距（使里面字顯示好看些）最后的box-sizing用于設(shè)置為元素設(shè)定的寬度和高度決定了元素的邊框盒，效果就是內(nèi)邊距不會(huì)撐開元素的大小，我們上面提到的100變144的請(qǐng)款。*/#form input { width: 100%; height: 30px; padding-left: 10px; box-sizing: border-box;}/*基本同上*/#form textarea { margin-top: 10px; width: 100%; height: 120px; padding: 10px; box-sizing: border-box;}/*基本同上*/#form button { margin-top: 10px; width: 100px; height: 28px;}經(jīng)過(guò)這三步處理，我們來(lái)看看頁(yè)面的效果#list { margin-top: 30px; background-color: #f4f4f4; padding: 30px 40px;}第五步，處理評(píng)論和回復(fù)的樣式/*評(píng)論的外層樣式，最小高度和行高，一樣為了保證文本垂直居中*/.comment { min-height: 50px; line-height: 50px;}/*回復(fù)的外層樣式，回復(fù)應(yīng)當(dāng)比評(píng)論要縮進(jìn)一些，就像文章段落縮進(jìn)一樣用的padding-left*/.reply { line-height: 50px; padding-left: 50px;}/*display:inline-block;所有span標(biāo)簽讓他們以行內(nèi)塊元素來(lái)渲染，方便處理高度和行高*/.list span { display: inline-block; height: 40px; line-height: 40px; padding: 4px;}/*這部分處理頭像寬高自不用講border: 1px solid gray;表示給圖片設(shè)置1個(gè)像素寬度的實(shí)體灰色的邊框vertical-align: middle;圖片垂直居中border-radius: 50%;設(shè)置邊框的圓角，50%讓他變成一個(gè)圓*/.img img { width: 36px; height: 36px; border: 1px solid gray; vertical-align: middle; border-radius: 50%;}/*人名同意處理，字體加粗，16px大小*/.name { font-weight: bold; font-size: 16px;}/*發(fā)布時(shí)間*/.time { font-size: 12px; color: lightgray;}/*評(píng)論或回復(fù)內(nèi)容塊的內(nèi)邊距*/.content { padding: 4px 10px;}/*回復(fù) 兩個(gè)字的字體顏色設(shè)置為灰色*/.replytxt { color: gray;}最后完整的樣式CSS代碼如下/*所有元素去掉內(nèi)外邊距，元素獨(dú)自設(shè)置，并設(shè)置字體為微軟雅黑，統(tǒng)一字體大小*/* { margin: 0; padding: 0; font-family: "微軟雅黑"; font-size: 14px;}/*去掉ul列表的默認(rèn)樣式，前面有小點(diǎn)點(diǎn)，去掉*/ul { list-style: none;}/*整體距離頂上邊50px，并做左右居中處理*/#container { width: 600px; margin: 0 auto; margin-top: 50px;}/*主題字體大小設(shè)置為48px*/#topic { font-size: 48px;}/*留言評(píng)論列表添加上邊距30px和背景顏色*/#list { margin-top: 30px; background-color: #f4f4f4; padding: 30px 40px;}/*表單上邊距*/#form { margin-top: 30px;}/*輸入框設(shè)置寬度（100%表示充滿整個(gè)父元素）、高度、左內(nèi)邊距（使里面字顯示好看些）最后的box-sizing用于設(shè)置為元素設(shè)定的寬度和高度決定了元素的邊框盒，效果就是內(nèi)邊距不會(huì)撐開元素的大小，我們上面提到的100變144的請(qǐng)款。*/#form input { width: 100%; height: 30px; padding-left: 10px; box-sizing: border-box;}/*基本同上*/#form textarea { margin-top: 10px; width: 100%; height: 120px; padding: 10px; box-sizing: border-box;}/*基本同上*/#form button { margin-top: 10px; width: 100px; height: 28px;}/*評(píng)論的外層樣式，最小高度和行高，一樣為了保證文本垂直居中*/.comment { min-height: 50px; line-height: 50px;}/*回復(fù)的外層樣式，回復(fù)應(yīng)當(dāng)比評(píng)論要縮進(jìn)一些，就像文章段落縮進(jìn)一樣用的padding-left*/.reply { line-height: 50px; padding-left: 50px;}/*display:inline-block;所有span標(biāo)簽讓他們以行內(nèi)塊元素來(lái)渲染，方便處理高度和行高*/.list span { display: inline-block; height: 40px; line-height: 40px; padding: 4px;}/*這部分處理頭像寬高自不用講border: 1px solid gray;表示給圖片設(shè)置1個(gè)像素寬度的實(shí)體灰色的邊框vertical-align: middle;圖片垂直居中border-radius: 50%;設(shè)置邊框的圓角，50%讓他變成一個(gè)圓*/.img img { width: 36px; height: 36px; border: 1px solid gray; vertical-align: middle; border-radius: 50%;}/*人名同意處理，字體加粗，16px大小*/.name { font-weight: bold; font-size: 16px;}/*發(fā)布時(shí)間*/.time { font-size: 12px; color: lightgray;}/*評(píng)論或回復(fù)內(nèi)容塊的內(nèi)邊距*/.content { padding: 4px 10px;}/*回復(fù) 兩個(gè)字的字體顏色設(shè)置為灰色*/.replytxt { color: gray;}最后我們得到頁(yè)面的結(jié)果長(zhǎng)這個(gè)樣子，對(duì)比一下最初的看看，是不是還是有點(diǎn)神奇的<form action="" method="get"> <!-- 標(biāo)題，此處標(biāo)題在上面其實(shí)并沒有用到，大家理解怎么使用HTML就可以了 --> <p> <input type="text" name="title" placeholder="請(qǐng)輸入標(biāo)題"> </p> <!-- 內(nèi)容 --> <p> <textarea name="content" placeholder="請(qǐng)輸入內(nèi)容"></textarea> </p> <!-- 按鈕 --> <p> <button type="submit">提交</button> </p></form>頁(yè)面樣子參考上圖 2-3下半部分輸入文字的地方。<form action="" method="get"></form>常用屬性就上面這兩個(gè)，action 指定表單提交到哪個(gè)頁(yè)面或者哪個(gè)地址，這個(gè)地址通常是我們后面要講的后端頁(yè)面PHP頁(yè)面；method 定義了表單以何種方式提交表單里面的數(shù)據(jù)，一般有get和post兩種方法。get表單直接提交的話，數(shù)據(jù)會(huì)以 屬性名=屬性值 的方式拼接在url（地址欄里面那個(gè)）后，post的話就把數(shù)據(jù)寫到請(qǐng)求體（可以理解為頁(yè)面把所有要提交的數(shù)據(jù)還有瀏覽器信息等等放在一起的一個(gè)，嗯，體，一坨東西）提交到其他頁(yè)面或遠(yuǎn)端。這里為了方便講解，我們用get方式提交到了當(dāng)前頁(yè)面（action屬性值為空就行），我們就能輕松看到我們的數(shù)據(jù)提交到了哪里。如果想了解，戳下面本站上的回答<input type="text" name="title" placeholder="請(qǐng)輸入標(biāo)題"><textarea name="content" placeholder="請(qǐng)輸入內(nèi)容"></textarea><!-- 注意按鈕類型是submit的時(shí)候才會(huì)提交表單，并且按鈕和表單元素應(yīng)該在form標(biāo)簽內(nèi) --><button type="submit">提交</button>url地址變成了board.html?title=用眼睛看謝謝。&content=沒錯(cuò)，達(dá)叔說(shuō)了用眼睛看。3、提交表單時(shí)數(shù)據(jù)內(nèi)容為空<form action="" method="get" onsubmit="return checkform()">她的屬性值是js表達(dá)式或js函數(shù)，下面就是函數(shù)的基本結(jié)構(gòu)，也是js在頁(yè)面中使用的基本方式（代碼下載body標(biāo)簽內(nèi)或head標(biāo)簽內(nèi)即可） <script type="text/javascript"> // 定義函數(shù)checkform，定義函數(shù)用 function 函數(shù)名(){ 語(yǔ)句 }的方式定義 function checkform () { // 獲取title和content的值 // 這里聲明了兩個(gè)變量 title 和 content // 變量是用來(lái)在代碼里存儲(chǔ)數(shù)據(jù)的，數(shù)據(jù)存在哪里？在內(nèi)存里，沒錯(cuò)電腦的內(nèi)存 var title = document.getElementsByName('title')[0].value; var content = document.getElementsByName('content')[0].value; // 判斷title和content如果有一個(gè)為空，就返回false //（可以理解為錯(cuò)誤，返回false后將不會(huì)繼續(xù)提交表單） if (!title || !content) { // 條件判斷語(yǔ)句if，這是js的語(yǔ)法之一，可以理解為如果括號(hào)里的條件成立，就執(zhí)行 // if花括號(hào)里面的語(yǔ)句 return false; } } </script>如此一來(lái)，我們只要沒有填title或者content就勢(shì)必不會(huì)提交表單。關(guān)鍵詞：基礎(chǔ),入門
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
