<!DOCTYPE html> <!-- 這是HTML的注釋 --> <html lang="en" id="myHtml"> <head> <!-- 這里不是設(shè)置了編碼,而是告訴瀏覽器,用什么編碼方式打開文件避免亂碼 --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HtmlAll</title> <!-- 這里是我們引入外部配置的Css樣式文件,也是開發(fā)最主流的方式 --> <link rel="stylesheet" type="text/css" href="css.css"/> <style type="text/css"> /* 這是css的語言注釋 */ /* id選擇器,寫法#后面加ID然后大括號(hào) */ #usernameError{ font-size: 30px; color: red; } /* 標(biāo)簽選擇器,這個(gè)作用范圍比較廣,他會(huì)對當(dāng)前頁面的所有該標(biāo)簽生效 */ div{ background-color: black; border: 1px solid red; width: 100px; height: 100px; } /* 類選擇器,.后面類名大括號(hào) */ /* 這種方式所有是這個(gè)class都可以使用到這個(gè)效果,優(yōu)點(diǎn)是我們可以實(shí)現(xiàn)跨標(biāo)簽 */ /* 這種所有標(biāo)簽都可以,這要class信息一樣即可 */ .myClass{ border: red 1px solid; width: 80px; height: 30px; } </style> </head> <body> <!-- 引入CSS效果的第一種方式,直接在元素上設(shè)置 --> <div style="width: 300px; height: 300px; background-color: #CCFFFF; display: block; border-color: red; border-width: 1px; border-style: solid;"></div> <!-- width寬度,height高度,bakgroundcolor背景色設(shè)置,display布局樣式none就是隱藏,block表示顯示 --> <!-- border默認(rèn)不顯示,我們要通過設(shè)置是否顯示來顯示該邊框,跨域設(shè)置顏色寬度 --> <div style="width: 300px; height: 300px; background-color: #CCFFFF; display: block; border: black 1px solid;"></div> <!-- 第二種設(shè)置方法,直接在border內(nèi)設(shè)置所有的信息,樣式還能這樣寫 --> <span id="usernameError">對不起,用戶名不能為空</span> <div></div> <div></div> <input type="text" class="myClass"/> <select class="myClass"> <option>專科</option> <option>本科</option> <option selected>研究生</option> <option>碩士</option> </select> <a >百度一下</a> <span id="baiDuSpan">點(diǎn)擊我鏈接到百度</span> <ul> <li>中國 <ul> <li>北京</li> <li>上海</li> <li>廣州</li> </ul> </li> <li>美國</li> <li>俄國</li> </ul> <div id="div1"> </div> </body> </html><!DOCTYPE html>
<!-- 這是HTML的注釋 -->
<html lang="en" id="myHtml">
?? ?<head>
?? ??? ?<!-- 這里不是設(shè)置了編碼,而是告訴瀏覽器,用什么編碼方式打開文件避免亂碼 -->
?? ??? ?<meta charset="UTF-8">
?? ??? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
?? ??? ?<title>HtmlAll</title>
?? ??? ?<!-- 這里是我們引入外部配置的Css樣式文件,也是開發(fā)最主流的方式 -->
?? ??? ?<link rel="stylesheet" type="text/css" href="css.css"/>
?? ??? ?<style type="text/css">
?? ??? ??? ?/* 這是css的語言注釋 */
?? ??? ??? ?/* id選擇器,寫法#后面加ID然后大括號(hào) */
?? ??? ??? ?#usernameError{
?? ??? ??? ??? ?font-size: 30px;
?? ??? ??? ??? ?color: red;
?? ??? ??? ?}
?? ??? ??? ?/* 標(biāo)簽選擇器,這個(gè)作用范圍比較廣,他會(huì)對當(dāng)前頁面的所有該標(biāo)簽生效 */
?? ??? ??? ?div{
?? ??? ??? ??? ?background-color: black;
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?width: 100px;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?/* 類選擇器,.后面類名大括號(hào) */
?? ??? ??? ?/* 這種方式所有是這個(gè)class都可以使用到這個(gè)效果,優(yōu)點(diǎn)是我們可以實(shí)現(xiàn)跨標(biāo)簽 */
?? ??? ??? ?/* 這種所有標(biāo)簽都可以,這要class信息一樣即可 */
?? ??? ??? ?.myClass{
?? ??? ??? ??? ?border: red 1px solid;
?? ??? ??? ??? ?width: 80px;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<!-- 引入CSS效果的第一種方式,直接在元素上設(shè)置 -->
?? ??? ?<div style="width: 300px; height: 300px; background-color: #CCFFFF;
?? ??? ? display: block; border-color: red; border-width: 1px; border-style: solid;"></div>
?? ??? ?<!-- width寬度,height高度,bakgroundcolor背景色設(shè)置,display布局樣式none就是隱藏,block表示顯示 -->
?? ??? ?<!-- border默認(rèn)不顯示,我們要通過設(shè)置是否顯示來顯示該邊框,跨域設(shè)置顏色寬度 -->
?? ??? ?<div style="width: 300px; height: 300px; background-color: #CCFFFF;
?? ??? ? display: block; border: black 1px solid;"></div>
?? ??? ?<!-- 第二種設(shè)置方法,直接在border內(nèi)設(shè)置所有的信息,樣式還能這樣寫 -->
?? ??? ?<span id="usernameError">對不起,用戶名不能為空</span>
?? ??? ?<div></div>
?? ??? ?<div></div>
?? ??? ?<input type="text" class="myClass"/>
?? ??? ?<select class="myClass">
?? ??? ??? ?<option>?？?lt;/option>
?? ??? ??? ?<option>本科</option>
?? ??? ??? ?<option selected>研究生</option>
?? ??? ??? ?<option>碩士</option>
?? ??? ?</select>
?? ??? ?<a >百度一下</a>
?? ??? ?<span id="baiDuSpan">點(diǎn)擊我鏈接到百度</span>
?? ??? ?<ul>
?? ??? ??? ?<li>中國
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li>北京</li>
?? ??? ??? ??? ??? ?<li>上海</li>
?? ??? ??? ??? ??? ?<li>廣州</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</li>
?? ??? ??? ?<li>美國</li>
?? ??? ??? ?<li>俄國</li>
?? ??? ?</ul>
?? ??? ?<div id="div1">
?? ??? ??? ?
?? ??? ?</div>
?? ?</body>
</html>
a{ text-decoration: none; font: red; } #baiDuSpan { text-decoration: underline; cursor: pointer; } /* cursor是鼠標(biāo)樣式,pointer是小手,hand也是,建議使用pointer */ /* wait會(huì)顯示轉(zhuǎn)圈圈 */ ul{ list-style-type: none; } /* 通過設(shè)置list-style-type為none就可以去掉我們無序列表和有序列表的前面的符號(hào) */ #div1{ position: absolute; border: 1px solid black; width: 300px; height: 300px; left: 100px; right: 100px; } /* position: absolute;設(shè)置絕對定位 */a{
?? ?text-decoration: none;
?? ?font: red;
}#baiDuSpan
{
?? ?text-decoration: underline;
?? ?cursor: pointer;
}/* cursor是鼠標(biāo)樣式,pointer是小手,hand也是,建議使用pointer */
/* wait會(huì)顯示轉(zhuǎn)圈圈 */ul{
?? ?list-style-type: none;
}
/* 通過設(shè)置list-style-type為none就可以去掉我們無序列表和有序列表的前面的符號(hào) */文章來源：http://www.zghlxwxcb.cn/news/detail-744085.html#div1{
?? ?position: absolute;
?? ?border: 1px solid black;
?? ?width: 300px;
?? ?height: 300px;
?? ?left: 100px;
?? ?right: 100px;
}
/* position: absolute;設(shè)置絕對定位 */文章來源地址http://www.zghlxwxcb.cn/news/detail-744085.html
到了這里，關(guān)于CSS樣式前端HTML頁面常用CSS效果實(shí)現(xiàn)及其相關(guān)配置信息------前端入門基礎(chǔ)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
