整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5的結構化標簽，對搜索引擎更友好
li 標簽對不利于搜索引擎的收錄，盡量少用
banner圖片一般擁有版權，不需要搜索引擎收錄，因此可以使用ul + li
<samp></samp>可用于淺色副標題
display:inline-block; 每個導航塊存在水平間隙，解決方法是在父元素上添加font-size:0;
sublime安裝csscomb插件
選中css代碼，ctrl+shift+c 自動整理好代碼
排序前：
排序后：
此時存在多余的空行
解決方法：
安裝cssformat插件，對代碼執行edit->cssformat->expanded 即可刪除空行
選中單句樣式前面的空白部分（即tab空位）
然后alt+f3 會統一選中所有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">文字內容哦~</dd>
<dd class="pic"><img src="p1.jpg"></dd>
</dl>
<dl>
<dt>小標題</dt>
<dd class="text">文字內容哦~</dd>
<dd class="pic"><img src="p2.jpg"></dd>
</dl>
<dl>
<dt>小標題</dt>
<dd class="text">文字內容哦~</dd>
<dd class="pic"><img src="p3.jpg"></dd>
</dl>
</aside>
<article>
<h1>右邊<samp>標題</samp></h1>
<p>這是右邊文章內容哦~</p>
<img src="qrt.jpg">
<p>這是右邊文章內容哦~</p>
</article>
</section>
<footer>
<div class="container">
<p>版權信息</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; /*設置水平居中*/ left: 0; width: 600px; height: 300px;}
.banner ul li.left { /*設置在左邊*/ left: 0;}
.banner ul li.right { /*設置在右邊*/ 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
喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。
我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！
如果你也想學習前端，可以觀看【置頂】文章。也可以私信【1】 領取最新前端練手實戰項目
、HTML
<div id="ad"></div>
<div id="search">
<div class="search_box">
<input type="text" class="search_txt" />
<input type="button" value="搜索" class="search_btn" />
</div>
</div>
<div id="box"></div>
二、CSS
*{
padding: 0px;
margin: 0px;
list-style: none;
}
#ad{
width: 100%;
height: 80px;
background: #142DA8;
}
#search{
width: 1300px;
height: 40px;
margin:0 auto;
border:1px solid black;
background: #25B3D9;
position: absolute;
top:80px;
left: 24px;
z-index: 2;
}
#search .search_box{
width: 800px;
margin: 0 auto;
}
#search .search_txt{
display: block;
width: 600px;
height: 36px;
border:2px solid red;
margin:0 auto;
float: left;
}
#search .search_btn{
margin-left: 5px;
font-size: 24px;
line-height: 38px;
float: left;
border:1px solid blue;
}
#box{
width:1300px;
height: 2000px;
background: #858282;
position: absolute;
left: 24px;
top:120px;
}
三、script
window.onscroll=function(){
var oSearch=document.getElementById('search');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if (parseInt(scrollTop)>200) {
oSearch.style.position='fixed';
oSearch.style.top='0px';
}
else{
oSearch.style.position='absolute';
oSearch.style.top='80px';
}
}
四、效果圖
此方法是本人想到的，不知道大伙還有沒有其他好的方法，請留言！！
op microsoft是一款窗口置頂工具，因此利用該軟件，用戶們就可以將任意的窗口進行置頂，特別是用戶們在進行畫圖，或者校對文本的時候，就可以將目標文件進行置頂，方便用戶們隨時進行比對，所以有需求的用戶，快來下載體驗吧！
來源：http://www.3h3.com/soft/271750.html
窗口置頂可以用于任何窗口，將某個窗口置頂顯示。有時候，我們編寫文檔，或者畫圖時，需要參考一些圖片或文檔，
為了避免頻繁切換窗口，此時這個小工具就可以置頂任意窗口，很方便
1、鼠標拖動方式：拖動十字到目標窗口，釋放鼠標即可置頂
2、拖動手型方式：拖動十字圖標再到目標窗口，該窗口將恢復到正常的窗口
3、快捷鍵的方法：單擊目標窗口，激活目標窗口，按快捷鍵（F7）設置窗口總在最前。再次按下快捷鍵（F7）重新設置窗口，恢復正常窗口。
4、通過托盤里的設置，你可以更改其他快捷鍵
1.修復已知bug
2.優化操作體驗
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
