Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
習(xí)CSS(層疊樣式表)是掌握前端開發(fā)技能的關(guān)鍵之一。CSS用于控制網(wǎng)頁的外觀和布局,使其更加美觀和用戶友好。以下是一個(gè)從零開始學(xué)習(xí)CSS的全面指南:
CSS(Cascading Style Sheets)是一種樣式表語言,用于描述HTML文檔的呈現(xiàn)。它可以控制網(wǎng)頁的顏色、字體、布局等視覺樣式。
CSS規(guī)則由選擇器和聲明塊組成:
selector {
property: value;
}
例如,設(shè)置所有段落文字顏色為藍(lán)色:
p {
color: blue;
}
每個(gè)HTML元素都可以看作一個(gè)矩形的盒子,盒模型包括以下部分:
使用媒體查詢來創(chuàng)建響應(yīng)式布局:
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
使用相對單位(如百分比、em、rem)來實(shí)現(xiàn)響應(yīng)式設(shè)計(jì):
.container {
width: 80%;
padding: 2em;
}
結(jié)合HTML和CSS,創(chuàng)建一個(gè)簡單的個(gè)人簡介網(wǎng)頁,包含以下內(nèi)容:
參與一些前端開發(fā)項(xiàng)目,應(yīng)用所學(xué)知識并獲取實(shí)踐經(jīng)驗(yàn)。可以在GitHub上尋找開源項(xiàng)目,也可以嘗試自己設(shè)計(jì)和實(shí)現(xiàn)一些小項(xiàng)目。
通過以上步驟,你可以系統(tǒng)地學(xué)習(xí)CSS,并逐步掌握網(wǎng)頁樣式和布局的技能。堅(jiān)持學(xué)習(xí)和實(shí)踐,你將能夠創(chuàng)建美觀且響應(yīng)迅速的網(wǎng)頁。祝你學(xué)習(xí)愉快!
?
tml([val|fn]) 返回值:String
取得第一個(gè)匹配元素的html內(nèi)容。這個(gè)函數(shù)不能用于XML文檔。但可以用于XHTML文檔。
在一個(gè) HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個(gè)元素的內(nèi)容。
如果選擇器匹配多于一個(gè)的元素,那么只有第一個(gè)匹配元素的 HTML 內(nèi)容會被獲取。
function(index, html) Function
此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù),index為元素在集合中的索引位置,html為原先的HTML值。
返回p元素的內(nèi)容。
jQuery 代碼:
$('p').html();
設(shè)置所有 p 元素的內(nèi)容
jQuery 代碼:
$("p").html("Hello <b>world</b>!");
使用函數(shù)來設(shè)置所有匹配元素的內(nèi)容。
jQuery 代碼:
$("p").html(function(index,n){
return "這個(gè) p 元素的 index 是:" + n;
});
text([val|fn]) 返回值:String
val String 用于設(shè)定HTML內(nèi)容的值
function(index, html) Function 此函數(shù)返回一個(gè)HTML字符串。接受兩個(gè)參數(shù),index為元素在集合中的索引位置,html為原先的HTML值。
返回p元素的文本內(nèi)容。
jQuery 代碼:
$('p').text();
設(shè)置所有 p 元素的文本內(nèi)容
jQuery 代碼:
$("p").text("Hello world!");
使用函數(shù)來設(shè)置所有匹配元素的文本內(nèi)容。
jQuery 代碼:
$("p").text(function(index,n){
return "這個(gè) p 元素的 index 是:" + n;
});
$("#test").html();
意思是指:獲取ID為test的元素內(nèi)的html代碼。其中html()是jQuery里的方法
這段代碼等同于用DOM實(shí)現(xiàn)代碼:
document.getElementById("test").innerHTML;
直接獲取、編輯內(nèi)容
在jQuery中,主要是通過html()和text()兩種方法來獲取和編輯頁面內(nèi)容的。其中html()相當(dāng)于獲取節(jié)點(diǎn)的innerHTML屬性,
添加參數(shù)html(text)時(shí),則為設(shè)置innerHTML;而text()則用來獲取元素的純文本,text(content)為設(shè)置純文本。
實(shí)例1:
jQuery代碼:
$(function(){
var sString=$("p:first").text(); //獲取純文本
$("p:last").html(sString);
});
HTML代碼:
<p><b>文本</b>段 落<em>示</em>例</p>
<p></p>
實(shí)例2:
jQuery代碼:
$(function(){
$("p").click(function(){
var sHtmlStr=$(this).html(); //獲取innerHTML
$(this).text(sHtmlStr); //將代碼做為純文本傳入
});
});
HTML代碼:
<p><b>文本</b>段 落<em>示</em>例</p>
實(shí)例3:獲取選擇框的文本
$("#id").find("option:selected").text(); //獲取Select選擇的text文本
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="Scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$function(){
$('#OK').bind('click', function () {
alert($("#id").find("option:selected").text());
});
}
</script>
</head>
<body>
<select id="select">
<option value="1">text1</option>
<option value="2">text2</option>
<option value="3">text3</option>
<option value="4">text4</option>
</select>
<button id="OK">
獲取為本</button>
</body>
</html>
$().html(); //獲得節(jié)點(diǎn)包含的信息
$().html(信息); //設(shè)置節(jié)點(diǎn)包含的內(nèi)容
$().text(); //獲得節(jié)點(diǎn)包含的"文本字符串信息"內(nèi)容
$().text(信息); //設(shè)置節(jié)點(diǎn)包含的內(nèi)容(有html標(biāo)簽就把"><"符號變?yōu)榉枌?shí)體)
注意: DOM操作必須保住DOM節(jié)點(diǎn)必須存在, 當(dāng)然也包括使用css樣式display:none隱藏的DOM節(jié)點(diǎn), 否則會導(dǎo)致js語法錯(cuò)誤;
1 HTML 簡介
HyperText Markup Language(超文本標(biāo)記語言)
2 HTML 文檔的結(jié)構(gòu)
1 特殊字符標(biāo)記
2 段落標(biāo)記
<p 屬性=值>
------段(paragraph) (可以看作是空行)
------align 屬性可設(shè)置段落的對齊方式,如左對齊、居中、右對齊。
3 換行標(biāo)記
<br>
4 居中標(biāo)記
<center>需要居中的內(nèi)容</center>
5 字體標(biāo)記
<font face="字體樣式" color=字體顏色 size=字體大小>文字</font>
6 格式標(biāo)記
<b>加粗</b>
<u>下劃線</u>
<i>傾斜</i>
7 圖像標(biāo)記
<img src="images/adv_2.jpg" width="300" height="150" alt="明星演唱會開幕">
------image:圖片/像
------source:來源
------alternative:交替、變換
8 鏈接標(biāo)記
<a href="register/register.html">[免費(fèi)注冊]</a>
------anchor:錨,鏈接
------http references:參考的 http 地址
9 表格標(biāo)記
9.1 表格的結(jié)構(gòu)
9.2 表格標(biāo)記
9.3 合并行或列
10 表單標(biāo)記
10.1 典型應(yīng)用
10.2 表單由控件組成
10.3 表單中的標(biāo)記
10.3.1 表單標(biāo)記
10.3.2 控件標(biāo)記
樣式表(Cascading Style Sheets,層疊/級聯(lián)樣式表)
------用于設(shè)置控件屬性格式。
------行內(nèi)嵌入 css 樣式表:<標(biāo)記 style="">
10.3.3 文本框控件
10.3.4 密碼框控件
10.3.5 單選按鈕控件
10.3.6 復(fù)選框控件
10.3.7 下拉列表控件
10.3.8 列表框控件
10.3.9 多行文本框/文本區(qū)域控件
10.3.10 按鈕控件
按鈕類型可為 submit、reset、button
10.3.11 框架標(biāo)記
10.3.11 .1 創(chuàng)建框架中的每個(gè)子頁面窗口
top.html
left.html
main.html
10.3.11 .2 創(chuàng)建框架集
改變框架內(nèi)的頁面顯示
單擊 left.html 中不同的按鈕,在 rightframe 中顯示不同的頁面
使用 target 目標(biāo)窗口屬性
<a href=url target="要顯示的框架名">
1 http 無狀態(tài)
http 協(xié)議是無狀態(tài)的,本次請求和上次請求無法判斷是不是同一個(gè)人操作的,從而 http本身不會記住"過去的"數(shù)據(jù)。
2 Session
用于解決 http 無狀態(tài)問題。一般稱為“會話控制”,瀏覽器在第一次訪問服務(wù)器時(shí),服務(wù)器會創(chuàng)建一個(gè) session,然后同時(shí)為該 session 生成一個(gè)唯一的會話 sessionid。
Session 存儲特定用戶會話所需的屬性及配置信息,當(dāng)用戶在應(yīng)用程序的 Web 頁之間跳轉(zhuǎn)時(shí),存儲在 Session 中的變量將不會丟失,而是在整個(gè)用戶會話中一直存在下去。當(dāng)用戶請求來自應(yīng)用程序的 Web 頁時(shí),如果該用戶還沒有會話,則 Web 服務(wù)器將自動創(chuàng)建一個(gè)Session 對象。當(dāng)會話過期或被放棄后,服務(wù)器將終止該會話。Session 最常見的一個(gè)用法就是存儲用戶的首選項(xiàng)。
3 Cookie
有時(shí)也用其復(fù)數(shù)形式 Cookies,指某些網(wǎng)站為了辨別用戶身份、進(jìn)行 session 跟蹤而儲存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過加密)。
Cookie 技術(shù)誕生以來,它就成了廣大網(wǎng)絡(luò)用戶和 Web 開發(fā)人員爭論的一個(gè)焦點(diǎn)。有一些網(wǎng)絡(luò)用戶,甚至包括一些資深的 Web 專家也對它的產(chǎn)生和推廣感到不滿,這是因?yàn)?Cookie的使用對網(wǎng)絡(luò)用戶的隱私構(gòu)成了危害。因?yàn)?Cookie 是由 Web 務(wù)器保存在用戶瀏覽器上的小文本文件,它包含有關(guān)用戶的信息。當(dāng) Web 服務(wù)器創(chuàng)建了 Cookies 后,只要在其有效期內(nèi),當(dāng)用戶訪問同一個(gè) Web 服務(wù)器時(shí),瀏覽器首先要檢查本地的 Cookies,并將其原樣發(fā)送給 Web服務(wù)器。
查看 Cookie:
*請認(rèn)真填寫需求信息,我們會在24小時(shí)內(nèi)與您取得聯(lián)系。