整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
TML5的結(jié)構(gòu)化標簽，對搜索引擎更友好
li 標簽對不利于搜索引擎的收錄，盡量少用
banner圖片一般擁有版權(quán)，不需要搜索引擎收錄，因此可以使用ul + li
<samp></samp>可用于淺色副標題
display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加font-size:0;
sublime安裝csscomb插件
選中css代碼，ctrl+shift+c 自動整理好代碼
排序前：
排序后：
此時存在多余的空行
解決方法：
安裝cssformat插件，對代碼執(zhí)行edit->cssformat->expanded 即可刪除空行
選中單句樣式前面的空白部分（即tab空位）
然后alt+f3 會統(tǒng)一選中所有tab留白
按一次刪除，再按一次刪除，再空一格
此時這個效果：
然后按向下箭頭，按向左箭頭，按刪除一次，再加個空格
此時效果
再向下箭頭，再刪除
此時效果
css樣式代碼美化完畢。
新標簽元素的瀏覽器兼容解決：
header,nav,section,aside,article,footer{display: block;}最后曬出所有代碼
index.html
<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<a href="#"><img src="cat-little.jpg"></a>
<nav>
<a href="#" class="active">導航</a>
<a href="#">導航</a>
<a href="#">導航</a>
<a href="#">導航</a>
<a href="#">導航</a>
</nav>
</div>
</header>
<section class="banner">
<ul>
<li class="left"><img src="banner1.jpg"></li>
<li class="active"><img src="banner3.jpg"></li>
<li class="right"><img src="banner2.jpg"></li>
</ul>
</section>
<section class="main">
<aside>
<h1>左邊<samp>標題</samp></h1>
<dl>
<dt>小標題</dt>
<dd class="text">文字內(nèi)容哦~</dd>
<dd class="pic"><img src="p1.jpg"></dd>
</dl>
<dl>
<dt>小標題</dt>
<dd class="text">文字內(nèi)容哦~</dd>
<dd class="pic"><img src="p2.jpg"></dd>
</dl>
<dl>
<dt>小標題</dt>
<dd class="text">文字內(nèi)容哦~</dd>
<dd class="pic"><img src="p3.jpg"></dd>
</dl>
</aside>
<article>
<h1>右邊<samp>標題</samp></h1>
<p>這是右邊文章內(nèi)容哦~</p>
<img src="qrt.jpg">
<p>這是右邊文章內(nèi)容哦~</p>
</article>
</section>
<footer>
<div class="container">
<p>版權(quán)信息</p>
<span>
<img src="b1.jpg">
<img src="b2.jpg">
<img src="b3.jpg">
</span>
</div>
</footer>
</body>
</html>style.css
* { font-size: 14px; margin: 0; padding: 0; border: none;}
a { text-decoration: none;}
ul { list-style: none;}
/*瀏覽器兼容解決*/
header,nav,section,aside,article,footer{display: block;}
/*頭部*/
header { width: 100%; height: 60px; background-color: #000;}
.container { width: 1200px; margin: 0 auto;}
.container > a { display: block; float: left; width: 150px; height: 60px; padding-left: 10px;}
.container > a img { height: 40px; padding-top: 10px;}
nav { font-size: 0; float: right; padding-right: 10px;}
nav > a { font-size: 16px; line-height: 60px; display: inline-block; width: 100px; height: 60px; cursor: pointer; text-align: center; color: #fff;}
nav > a:first-child { background: rgb(212, 1, 18);}
nav > a:nth-child(2) { background: rgb(254, 184, 0);}
nav > a:nth-child(3) { background: rgb(120, 185, 23);}
nav > a:nth-child(4) { background: rgb(242, 124, 1);}
nav > a:last-child { background: rgb(1, 127, 203);}
nav > a:hover, nav > a.active { padding-bottom: 5px;}
/*banner*/
.banner { background: #ccc;}
.banner ul { position: relative; width: 1200px; height: 400px; margin: 0 auto; padding-top: 100px;}
.banner ul li { position: absolute; z-index: 1; top: 0; bottom: 0; overflow: hidden; width: 500px; height: 250px; margin: auto;}
.banner ul li img { overflow: hidden; width: 100%;}
.banner ul li.active { z-index: 2; right: 0; /*設(shè)置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設(shè)置在左邊*/ left: 0;}
.banner ul li.right { /*設(shè)置在右邊*/ right: 0;}
/*主體部分*/
.main { width: 1200px; height: 350px; margin: 0 auto;}
aside { float: left; width: 600px;}
article { float: right; width: 600px;}
.main h1 { font-size: 24px; font-weight: lighter; margin: 20px 0;}
.main h1 samp { color: #7d7d7d;}
aside img { height: 70px;}
aside dl { position: relative; margin-bottom: 10px;}
aside dl dt { position: absolute; top: 0; left: 90px;}
aside dd.pic { overflow: hidden; width: 70px; height: 70px;}
aside dd.text { position: absolute; top: 20px; left: 90px;}
article > img { overflow: hidden; height: 130px;}
article > p { margin-bottom: 10px;}
/*底部*/
footer { background-color: #000;}
footer > .container { width: 1200px; height: 60px; margin: 0 auto;}
footer > .container > p { line-height: 60px; float: left; color: #fff;}
footer > .container > span { float: right;}
footer > .container > span > img { width: 25px; height: 25px; margin-left: 10px; padding-top: 17px; cursor: pointer; opacity: .7;}
footer > .container > span > img:hover { opacity: 1;}
/*# sourceMappingURL=style.css.map */效果圖
原文鏈接：https://www.cnblogs.com/chenyingying0/p/12250255.html
喜歡小編的可以點個贊關(guān)注小編哦，小編每天都會給大家分享文章。
我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！
如果你也想學習前端，可以觀看【置頂】文章。也可以私信【1】 領(lǐng)取最新前端練手實戰(zhàn)項目
、頁面使用CSS的好處：
有效的傳遞頁面信息。
使用CSS美化過的頁面文本，使頁面漂亮、美觀，吸引用戶。
可以很好的突出頁面的主題內(nèi)容，使用戶第一眼可以看到頁面主要內(nèi)容。
具有良好的用戶體驗。
2、美化網(wǎng)頁的一些基本樣式
A:字體樣式：
font-family設(shè)置字體類型font-family:"隸書";
font-size設(shè)置字體大小font-size:12px;
font-style設(shè)置字體風格font-style:italic;
font-weight設(shè)置字體的粗細font-weight:bold;
font在一個聲明中設(shè)置所有字體屬性font:italic bold 36px "宋體";
舉例：
body{font-family: Times,"Times New Roman", "楷體";}
h1{font-size:24px;} 單位->px：像素
h2{font-style:oblique;}
p{font-weight:bold;}
p span{font:oblique bold 12px "楷體";}
B:文本屬性：
color設(shè)置文本顏色color:#00C;
text-align設(shè)置元素水平對齊方式text-align:right;
text-indent設(shè)置首行文本的縮進text-indent:20px;
line-height設(shè)置文本的行高line-height:25px;
text-decoration設(shè)置文本的裝飾text-decoration:underline;
C:排版文本段落：
水平對齊方式：text-align：left|right|center|justify;
left把文本排列到左邊。默認值：由瀏覽器決定
right把文本排列到右邊
center把文本排列到中間
justify實現(xiàn)兩端對齊文本效果
首行縮進：text-indent：em或px
行高：line-height：px
文本修飾：text-decoration:none|underline|overline|line_through
值說明
none默認值，定義的標準文本
underline設(shè)置文本的下劃線
overline設(shè)置文本的上劃線
line-through設(shè)置文本的刪除線
垂直對齊方式：vertical-align屬性：middle、top、bottom
文本陰影：text-shadow : color x-offset y-offset blur-radius;
D:背景顏色和背景圖片：
background-color:"red";
background-image:url(圖片路徑);
background-repeat:
沿水平和垂直兩個方向平鋪
no-repeat：不平鋪，即只顯示一次
repeat-x：只沿水平方向平鋪
repeat-y：只沿垂直方向平鋪
background-position:X、Y方向關(guān)鍵詞 水平方向的關(guān)鍵詞：left、center、right
垂直方向的關(guān)鍵詞：top、center、bottom
舉例：
.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
線性漸變：linear-gradient ( position, color1, color2,…)
3、舉例：
<head>
<title>家用電器</title>
</head>
<link rel="stylesheet" href="jiayongdianqi.css">
<body>
<div class="container">
<h2>家用電器</h2>
<div class="type">
<h6><a href="#">大家電</a></h6>
<ul>
<li> <a href="#">平板電視</a> <a href="#">洗衣機</a> <a href="#">冰箱</a></li>
<li> <a href="#">空調(diào)</a> <a href="#">煙機/灶具</a> <a href="#"> 熱水器</a></li>
<li> <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a></li>
</ul>
<h6><a href="#">生活電器</a></h6>
<ul>
<li> <a href="#">電風扇</a> <a href="#">凈化器</a> <a href="#">吸塵器</a></li>
<li> <a href="#">凈水設(shè)備</a> <a href="#">掛燙機</a> <a href="#"> 電話機</a></li>
</ul>
<h6><a href="#">廚房電器</a></h6>
<ul>
<li> <a href="#">榨汁機</a> <a href="#">電壓力鍋</a> <a href="#">電飯煲</a></li>
<li> <a href="#">豆?jié){機</a> <a href="#">微波爐</a> <a href="#"> 電磁爐</a></li>
</ul>
<h6><a href="#">五金家裝</a></h6>
<ul>
<li> <a href="#">淋浴/水槽</a> <a href="#">電動工具</a> <a href="#">手動工具</a></li>
<li> <a href="#">儀器儀表 </a> <a href="#">浴霸/排氣 </a> <a href="#"> 燈具</a></li>
</ul>
</div>
</div>
</body>
</html>
li{
/* 去圓點 */
list-style: none;
}
/* 分類頁面總寬度 */
.container{
width: 500px;
}
a{
/* 去超鏈接下劃線 */
text-decoration: none;
}
/* 大標題字體 */
.container>h2{
font-size: 18px;
color: white;
font-weight: bolder;
line-height: 50px;
text-indent: 2px;
/*從上到下，0%開始顏色。50%顏色。70%顏色 */
background: linear-gradient(to bottom,#0467ac,#63a7d6,#b6dbf5);
}
css代碼：
/* 所有電器分類內(nèi)容 */
.type{
/* 首行縮進 */
text-indent: 4.5em;
/* 左外邊距40px */
margin-left: 40px;
}
/* 電器分類 */
.type>h6{
font-size: 14px;
font-weight: bolder;
line-height: 30px;
background: linear-gradient(to bottom,#e4f1fa,#bddff7,#e4f1fa);
}
/* 電器分類中的A標簽 */
.type>h6>a{
color:#0467ac;
}
/* 電器分類中的A標簽鼠標懸浮效果 */
.type>h6>a:hover{
text-decoration: underline;
}
/* 分類內(nèi)容字體 */
.type>ul>li{
font-size: 12px;
line-height: 26px;
}
/* 分類內(nèi)容字體里面的A標簽 */
.type>ul>li>a{
color: #969696;
}
/* 分類內(nèi)容字體里面的A標簽懸浮效果 */
.type>ul>li>a:hover{
color: #804000;
text-decoration: underline;
}
4、效果圖鏈接：file:///D:/ruanjian/VS/wenjianxiangmu/htmlFive/jiayongdianqi.html
廓線(outstyle)
比較常見于表單和鏈接等 。
outline-style:none; 取消谷歌、360等藍色邊框
:focus 獲得焦點的狀態(tài), 鼠標的光標就是焦點
.username:focus{ /*獲得焦點的狀態(tài)*/
border:1px dashed pink;
background-color:#FFF7FB;
color:pink;
}取消表單邊框
因為表單在不同瀏覽器里面, 以后不同的顯示方式。
所以, 一般情況下, 我們會把所有的表單都去掉邊框。
border: 0 none; 兼容性更好的寫法Label 標簽
<label for="txt">搜索一下</label>: <input type="text" id="txt" class="search" value="請輸入..." />這樣, 我們點擊搜索一下, 光標就跳到了相應(yīng)id的 input 里面了
完整實例:
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
