在上一次用HTML做了一個(gè)簡(jiǎn)單的網(wǎng)站之后萍倡，小編決定用CSS來(lái)優(yōu)化網(wǎng)站的結(jié)構(gòu)并且**增添導(dǎo)航欄和輸入框
最終效果
大家可以看到在網(wǎng)頁(yè)的左上方滔迈，新增加了導(dǎo)航欄缭嫡，網(wǎng)頁(yè)的左下方新增加了輸入框斜友。我們將一步一步說(shuō)明這是如何實(shí)現(xiàn)的变汪。
導(dǎo)航欄
CSS定義格式
簡(jiǎn)要的說(shuō)明一下届良，CSS的語(yǔ)法格式其實(shí)非常簡(jiǎn)單
要定義樣式部分的名字 {
要定義的屬性： 屬性的值儡循；
}
CSS既可以放在HTML的<head>標(biāo)簽中隔披，也可以單獨(dú)用CSS文件書(shū)寫(xiě)，后一種需要HTML對(duì)其進(jìn)行引用鸠姨。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
href: CSS文件的名字
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
align-self:center;
}
li a {
display: block;
color: #e7e7e7;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color:#808080;
background-color: #acdbdf;
}
li a.active {
color: white;
background-color: #13abc4;
}
<ul>標(biāo)簽定義無(wú)序列表铜秆。
<li>標(biāo)簽定義列表項(xiàng)目。標(biāo)簽可用在有序列表 (<ol>) 和無(wú)序列表 (<ul>) 中讶迁。
<a> 標(biāo)簽定義超鏈接连茧，用于從一張頁(yè)面鏈接到另一張頁(yè)面。 元素最重要的屬性是 href 屬性巍糯，它指示鏈接的目標(biāo)啸驯。
:hover選擇器用于選擇鼠標(biāo)指針浮動(dòng)在上面的元素。
提示：:hover 選擇器可用于所有元素祟峦，不只是鏈接罚斗。
li a : 這里定義的鏈接樣式，只有鏈接在列表中才成立
HTML中使用
這里的顏色會(huì)隨著“鼠標(biāo)是否在點(diǎn)擊區(qū)域上”和“是否被點(diǎn)擊”而改變宅楞，給用戶(hù)一種反饋機(jī)制针姿。
輸入框
CSS定義樣式
input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
font-family: Verdana, Arial;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
font-family: Verdana, Arial;
}
HTML 引用
<form name="input" action="" method="get">
Leave your comment!<input type="text" name="comment1" value="I..." size="80"/>
<input type="radio" value="I like it" />I like it
<input type="radio" value="hard to tell" />Hard to tell
<input type="button" value="Tell G!" />
<a >Know more when you search</a>
</form>
<form> 標(biāo)簽用于為用戶(hù)輸入創(chuàng)建 HTML 表單。
表單能夠包含 input 元素厌衙，比如文本字段距淫、復(fù)選框、單選框婶希、提交按鈕等等榕暇。
form 元素是塊級(jí)元素，其前后會(huì)產(chǎn)生折行喻杈。
type屬性：規(guī)定 input 元素的類(lèi)型彤枢。
類(lèi)型包括：button，checkbox筒饰，file缴啡，hidden，image龄砰，password盟猖，radio，reset换棚，submit式镐，text
鏈接點(diǎn)擊效果
CSS定義樣式
a:link {background-color:#acdbdf;} /* 未被訪問(wèn)的鏈接 */
a:visited {background-color:#408ab4;} /* 已被訪問(wèn)的鏈接 */
a:hover {background-color:#acdbdf;} /* 鼠標(biāo)指針移動(dòng)到鏈接上 */
a:active {background-color:#acdbdf;} /* 正在被點(diǎn)擊的鏈接 */
HTML引用
<a >Know more when you search</a>
新增功能就實(shí)現(xiàn)到這里，如果大家有任何疑問(wèn)固蚤，可以聯(lián)系我的郵箱哦：729314484@qq.com
