css
.title {
height: 50px;
background-color: green;
}
div h2 {
padding-top: 10px;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
color: black;
}
a:hover {
font-size: 25px;
}
a:active {
color: blue;
}
#tip{
width: 50px;
height: 50px;
background-color: gray;
position: fixed;
right: 10%;
bottom: 10%;
padding-top: 25px;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>web day_2</title>
<link rel="stylesheet" type="text/css" href="css/homework2.css" />
</head>
<body>
<h1>index</h1>
<div id="index">
<ul>
<li>
<a href="#title_input">input標簽</a>
</li>
<li>
<a href="#title_form">表單標簽</a>
</li>
<li>
<a href="#title_div">空白標簽</a>
</li>
<li>
<a href="#title_css1">認識css</a>
</li>
<li>
<a href="#title_css2">css標簽</a>
</li>
<li>
<a href="#title_noun">偽類選擇器</a>
</li>
</ul>
</div>
<div id="title_input" class="title" align="center">
<h2>input標簽</h2>
</div>
<div>
<ul>
<p>input標簽(單標簽) --- text (文本輸入框)</p>
<ol>
<li>表單標簽</li>
<li>type屬性:text - 普通文本輸入框</li>
<li>type屬性：password --- 密文顯示</li>
<li>name屬性：必須設(shè)置</li>
<li>value屬性：標簽內(nèi)容</li>
<li>placeholder屬性：占位(提示信息)</li>
<li>maxlength:輸入框最多輸入的字符個數(shù)</li>
<li>readonly:不能輸入內(nèi)容</li>
</ol>
<p>input標簽 --- 單選框</p>
<ol>
<li>type屬性：radio</li>
<li>name屬性：同一類型對應(yīng)的多個選項的name相同</li>
<li>value屬性：設(shè)置提交的值</li>
<li>checked屬性：設(shè)置為checked凡蜻，讓按鈕默認處于選中狀態(tài)</li>
</ol>
<p>input標簽 --- 多選按鈕</p>
<ol>
<li>type：checkbox</li>
<li>name:同一類型對應(yīng)的name也必須一樣</li>
</ol>
<p>input標簽 --- 普通按鍵</p>
<ol>
<li>disabled:讓按鈕處于失效狀態(tài)</li>
<li>reset:讓當(dāng)前所在的form表單中所有的表單相關(guān)標簽對應(yīng)的值鹏倘，回到最初的狀態(tài)</li>
</ol>
<p>input標簽 --- file文件選擇器</p>
<ul>
<li>選擇文件</li>
</ul>
</ul>
</div>
<div id="title_form" class="title" align="center">
<h2>表單標簽</h2>
</div>
<div>
<ul>
<p>fieldset</p>
<ol>
<li>一個fieldset標簽對應(yīng)一個表單分組</li>
<li>legend標簽：分組名</li>
</ol>
<p>select - 下拉菜單</p>
<ol>
<li>option:選項</li>
<li>selected:默認選中</li>
</ol>
</ul>
</div>
<div id="title_div" class="title" align="center">
<h2>空白標簽</h2>
</div>
<div>
<ul>
<p>html中標簽分為兩大類:塊級標簽和行內(nèi)標簽</p>
<p>塊級標簽：一行只能有一個(不管標簽的寬度是多少)</p>
<ol>
<li>h1-h6</li>
<li>p</li>
<li>hr</li>
<li>div</li>
<li>ul</li>
<li>ol</li>
<li>dl</li>
<li>li</li>
<li>table</li>
<li>form</li>
</ol>
<p>行內(nèi)標簽：一行可以多個</p>
<ol>
<li>a</li>
<li>img</li>
<li>input</li>
<li>select</li>
<li>textarea</li>
</ol>
<p>div標簽 --空白標簽</p>
<ul>
<li>沒有任何特殊的意義(無語意標簽)</li>
</ul>
</ul>
</div>
<div id="title_css1" class="title" align="center">
<h2>認識css</h2>
</div>
<div>
<ul>
<p>什么是css</p>
<ol>
<li>css是web標準中的表現(xiàn)</li>
</ol>
<p>寫在哪兒</p>
<ol>
<li>內(nèi)聯(lián)樣式表：將css代碼寫在標簽的style屬性中</li>
<li>內(nèi)部樣式表：寫在head標簽中的style標簽的內(nèi)容中</li>
<li>外部樣式表：寫在一個css文件中，通過head中的link標簽進行關(guān)聯(lián)</li>
</ol>
<li>怎么寫</li>
<ol>
<li>選擇器(屬性：屬性值走敌；屬性：屬性值)</li>
<li>選擇器：用來選中需要設(shè)置樣式的標簽</li>
<li>屬性：css屬性(css中的屬性有兩百多個)</li>
<li>屬性值：如果屬性值是數(shù)字、表示的是大小要在后面加px</li>
<li>注意：每個屬性之間要用分號隔開，否則屬性無效</li>
</ol>
</ul>
</div>
<div id="title_css2" class="title" align="center">
<h2>css標簽</h2>
</div>
<div>
<ol>
<li>元素選擇器(標簽選擇器)：標簽名</li>
<ul>
<li>選中所有的標簽名對應(yīng)的標簽</li>
</ul>
<li>id選擇器：#id值</li>
<ul>
<li>每個標簽都有一個id屬性，整個html中出吹，id的值必須唯一</li>
</ul>
<li>class選擇器：.class屬性值</li>
<ul>
<li>每個標簽都有一個class屬性</li>
</ul>
<li>通配符：*</li>
<ul>
<li>選中所有的標簽</li>
</ul>
<li>層級選擇器:選擇器1 選擇器2……</li>
<li>群組選擇器：選擇器1，選擇器2辙喂，……</li>
</ol>
<ul>
<li>css中的顏色值：</li>
<ol>
<li>顏色名(英文)</li>
<li>16進制的顏色值</li>
<li>RGB值：rgb(紅趋箩，綠，藍)</li>
<li>rgba:rgba(紅加派，綠，藍跳芳，透明度) 透明度的值0-1</li>
</ol>
</ul>
</div>
<div id="title_noun" class="title" align="center">
<h2>偽類選擇器</h2>
</div>
<div>
<ul>
<p>偽類選擇器：選擇器：狀態(tài)</p>
<ol>
<li>link：初始狀態(tài)(一次都沒有訪問成功的狀態(tài))</li>
<li>visited：超鏈接訪問后的狀態(tài)</li>
<li>hover：鼠標懸停在標簽上的狀態(tài)</li>
<li>active：鼠標按下的狀態(tài)</li>
</ol>
<p>給同一個標簽通過偽類選擇器給不同狀態(tài)設(shè)置不同的樣式的時候要遵守愛恨原則(先要愛才有恨)
LoVe HAte</p>
</ul>
</div>
<div id="tip" align="center">
<a href="#">TOP</a>
</div>
</body>
</html>
