前端top100_請問這個web前端的頁面要怎樣空格

⑴ 前端 body都有哪些屬

body標簽是每個網頁都會用到的，對於它的屬性雖然大多數不建議使用（建議用css代替），但常用屬性我們還是應該了解一下，下面介紹了body標簽常用屬性的一些用法，對此還不了解的可以學習一下。
格式：

<body 屬性=」屬性值」> 網頁的主體部分</body>

常用屬性：
bgcolor屬性：網頁的背景顏色 background屬性=背景圖片 text屬性：文本顏色 link屬性：鏈接文本的顏色（鏈接未被點擊） vling屬性：訪問過的文本顏色（鏈接被點擊過後） alink屬性：激活的鏈接文本顏色（當鏈接被點擊時） topmargin屬性：上邊距 bottommargin屬性：下邊距 leftmargin屬性：左邊距 rightmargin屬性：右邊距

建議：能用css代替的盡量用css代替

代碼演示：
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>body標簽</title> </head> <body bgcolor=「#87CEEB」 text="#CD0000" rightmargin="100px" link=「#E066FF」 vlink=「#CDC9C9」><br/><br/> body標簽text屬性用法演示效果<br/> <a href="#"> body標簽link、vling屬性用法演示</a> </body> </html>

⑵ 前端，哪位大神知道這種布局的表格代碼怎麼寫

好了，至於樣式您再調一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
ul li{list-style: none;}
div{width: 600px;float: left;border: 1px solid #000000;text-align: center;}
div ul li{border-bottom: 1px solid #000000;}
div ul li:last-child ul li:last-child{border-bottom: 0px;}
div ul li ul li{margin-bottom: 0px;width: 100%;float: left;}
div ul li ul li span{width: 33.3%;float: left;border-right: 1px solid #000000;box-sizing: border-box;}
div ul li ul li span:last-child{border-right: 0px;}
</style>
</head>
<body>
<div>
<ul>
<li>
<h1>大標題1</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題2</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
<li>
<h1>大標題3</h1>
<ul>
<li>
<span>溫度</span>
<span>濕度</span>
<span>熱量</span>
</li>
<li>
<span>10</span>
<span>20</span>
<span>30</span>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>

⑶ 前端面試的H5問題有哪些

前端面試的H5問題匯總：
1.HTML5 為什麼只需要寫 <!DOCTYPE HTML>？
答案解析：
HTML5不基於SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規范瀏覽器的行為（讓瀏覽器按照他們應該的方式來運行）而HTML4.01基於SGML，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
2、行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
答案解析：
行內元素：a b span img input select strong
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4 p 等
空元素：<br> <hr> <img> <link> <meta>

3、頁面導入樣式時，使用link和@import有什麼區別？
答案解析：
1）link屬於XHTML標簽，而@import是css提供的；
2）頁面被載入時，link會同時被載入，而@import引用的css會等到頁面被載入完再載入；
3）@import只在IE5以上才能識別，而link是XHTML標簽，無兼容問題；
4）link方式的樣式的權重高於@import的權重。

4、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
答案解析：
新特性，新增元素：
1）內容元素：article、footer、header、nav、section
2）表單控制項：calendar、date、time、email、url、search
3）控制項元素：webworker，websockt，Geolocation
移除元素：
1）顯現層元素：basefont，big，center，font，s，strike，tt，u
2）性能較差元素：frame，frameset，noframes
處理兼容問題有兩種方式：
1）IE6/IE7/IE8支持通過document方法產生的標簽，利用這一特性讓這些瀏覽器支持HTML5新標簽。
2）使用是html5shim框架
另外，DOCTYPE聲明的方式是區分HTML和HTML5標志的一個重要因素，此外，還可以根據新增的結構，功能元素來加以區分。

5、如何區分 HTML 和 HTML5？
答案解析：
1）在文檔類型聲明上不同：
HTML是很長的一段代碼，很難記住，而HTML5卻只有簡簡單單的聲明，方便記憶。
2）在結構語義上不同：
HTML：沒有體現結構語義化的標簽，通常都是這樣來命名的<div id="header"></div>，這樣表示網站的頭部。
HTML5：在語義上卻有很大的優勢。提供了一些新的標簽，比如：<header><article><footer>

6、簡述一下你對HTML語義化的理解？
答案解析：
1）用正確的標簽做正確的事情；
2）html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析；
3）即使在沒有樣式css情況下也以一種文檔格式顯示，並且是容易閱讀的；
4）搜索引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO；
5）使於都源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

7、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
答案解析：
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。

8、iframe有那些缺點？
答案解析：
1）在網頁中使用框架結構最大的弊病是搜索引擎的「蜘蛛」程序無法解讀這種頁面；
2）框架結構有時會讓人感到迷惑，頁面很混亂；

9、Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
答案解析：
1）<!Doctype>聲明位於文檔中的最前面，處於<html>標簽之前。告知瀏覽器的解析器，用什麼文檔類型規范來解析這個文檔。
2）嚴格模式的排版和JS運作模式是以該瀏覽器支持的最高標准運行。
3）在混雜模式中，頁面以寬松的向後兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
4）DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

10、常見兼容性問題？
1）png24位的圖片在IE6瀏覽器上出現背景；
解決方案是：做成PNG8；
2）瀏覽器默認的 margin 和 padding 不同。
解決方案是：加一個全局的*{margin:0;padding:0;}來統一。
3）IE6雙邊距bug：塊屬性標簽float後，又有橫行的 margin 情況下，在 IE6 顯示 margin 比設置的大。浮動IE產生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 100px;} 這種情況下IE6會產生200px的距離。
解決方法：加上_display：inline，使浮動忽略
4）IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用getAttribute()獲取自定義屬性； Firefox下，只能使用getAttribute()獲取自定義屬性。
解決方法：統一通過getAttribute()獲取自定義屬性。
5）IE下，even對象有x，y屬性，但是沒有pageX，pageY屬性，但是沒有x，y屬性；
解決方法：（條件注釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
6）Chrome中文界面下默認會將小於 12px 的文本強制按照 12px 顯示
解決方法：可通過加入 CSS 屬性 -webkt-text-size-adjust:none;解決
7）超鏈接訪問過後 hover 樣式就不出現了，被點擊訪問過的超鏈接樣式不在具有 hover 和 active ；
解決方法：改變CSS屬性的排列順序：L-V-H-A: a:link{ } a:visited{ } a:hover{ } a:active{ }

11、如何實現瀏覽器內多個標簽頁之間的通信？
答案解析：
調用localstorge、cookies等本地存儲方式

12、webSocket如何兼容低瀏覽器？
答案解析：
Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR

13、支持HTML5新標簽
答案解析：
1）IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式；
2）當然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架


14、如何區分：DOCTYPE 聲明\新增的結構元素\功能元素，語義化的理解？
答案解析：
1）用正確的標簽做正確的事情；
2）html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
3）在沒有樣式 CSS 情況下也以一種文檔格式顯示，並且是容易閱讀的；
4）搜索引擎的爬蟲依賴於標記來確定上下文和各個關鍵字的權重，利用 SEO ；
5）使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

15、介紹一下 CSS 的盒子模型？
答案解析：
1）有兩種，IE 盒子模型、標准 W3C 盒子模型； IE 的 content 部分包含了 border 和 padding；
2）盒模型：內容（content）、填充（padding）、邊界（margin）、邊框（border）。

16、CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3 新增偽類有哪些？
答案解析：
1）id 選擇器（#myid）
2）類選擇器（.myclassname）
3）標簽選擇器（div，h1，p）
4）相鄰選擇器（h1 + p）
5）子選擇器（ul > li）
6）後代選擇器（li a）
7）通配符選擇器（* ）
8）屬性選擇器（ a[rel = "external"]）
9）偽類選擇器（a: hover, li: nth - child）

17、可繼承的樣式： font-size font-family color, UL LI DL DD DT

18、不可繼承的樣式：border padding margin width height

19、優先順序就近原則，同權重情況下樣式定義最近者為准

20、載入樣式以最後載入的定位為准;
解析答案：優先順序為: !important > id > class > tag ； important 比內聯優先順序高

21、CSS3新增偽類舉例：
答案解析：
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素；
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素；
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素；
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素；
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素；
:enabled :disabled 控製表單控制項的禁用狀態；
:checked 單選框或復選框被選中。

22、如何居中div？如何居中一個浮動元素？
答案解析：
給div 設置一個寬度，然後添加 margin:0 auto 屬性；div{width:200px; margin:0 auto; }

23、居中一個浮動元素
答案解析：
確定容器的寬高寬500 高300的層，設置層的外邊距
.div{width:500px;height:300px;margin:-150px 0 0 -250px;position:relative;background:green；left：50%；頭：50%}

24、css3有哪些新特性？
答案解析：
CSS3 實現圓角（border-radius:8px;），陰影（box-shadow:10px）,對文字加特效（text-shadow）,線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉，縮放，定位，傾斜
增加了更多的 css 選擇器多背景 rgba

25、為什麼要初始化 CSS 樣式
答案解析：
因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對 CSS 初始化往往會出現瀏覽器之間的頁面顯示差異。
當然，初始化樣式會對 SEO 有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。
最簡單的初始化方法是：*{padding:0;margin:0} (不建議)
淘寶的樣式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

26、display:inline-block 什麼時候會顯示間隙？
答案解析：
移除空格，使用margin 負值、使用 font-size:0、letter-spacing 、word-spacing

27、使用 CSS 預處理器嗎？喜歡哪個？
答案解析：SASS
28、什麼是盒子模型？
答案解析：
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分可以顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一起構成了css中元素的盒模型。
29、CSS實現垂直水平居中
答案解析：
一道經典的問題，實現方法有很多種，以下是其中一種實現：
HTML結構：
<divclass="wrapper">
<divclass="content"></div>
</div>
CSS：
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position:absolute; //父元素需要相對定位
top:50%;
left:50%;
margin-top:-100px; //二分之一的height，width
margin-left:
-100px;
}
30、簡述一下src與href的區別
答案解析：
href 是指向網路資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，用於超鏈接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執行完畢，圖片和框架等元素也如此，類似於將所指向資源嵌入當前標簽內。這也是為什麼將js腳本放在底部而不是頭部。
31、簡述同步和非同步的區別
答案解析：
同步是阻塞模式，非同步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求需要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
非同步是指進程不需要一直等下去，而是繼續執行下面的操作，不管其他進程的狀態。當有消息返回時系統會通知進程進行處理，這樣可以提高執行的效率。
32、px和em的區別
答案解析：
px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，並且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。所以未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em
33、瀏覽器的內核分別是什麼?

答案解析：
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)

⑷ 我要讓我的歌曲進入百度MP3 TOP100，有什麼可行的辦法

MP3 TOP100 指的意思是歌曲的搜索、下載或查找量前100的排行（TOP100的數據來自網路MP3搜索中搜索量最高100首歌曲，由系統自動計算統計只要你的歌曲點擊搜索率高關注de ren o 才會上top100，要提高關注度就要靠宣傳了，發布一首新歌宣傳很重要，讓你的歌在網路廣泛流傳，被搜索得 xia zai de 多了就有可能上100)

參考的相關：
搜索引擎的自動信息搜集功能分兩種。一種是定期搜索，即每隔一段時間（比如Google一般是28天），搜索引擎主動派出「蜘蛛」程序，對一定IP地址范圍內的互聯網站進行檢索，一旦發現新的網站，它會自動提取網站的信息和網址加入自己的資料庫。
另一種是提交網站搜索，即網站擁有者主動向搜索引擎提交網址，它在一定時間內（2天到數月不等）定向向你的網站派出「蜘蛛」程序，掃描你的網站並將有關信息存入資料庫，以備用戶查詢。由於近年來搜索引擎索引規則發生了很大變化，主動提交網址並不保證你的網站能進入搜索引擎資料庫，因此目前最好的辦法是多獲得一些外部鏈接，讓搜索引擎有更多機會找到你並自動將你的網站收錄。
當用戶以關鍵詞查找信息時，搜索引擎會在資料庫中進行搜尋，如果找到與用戶要求內容相符的網站，便採用特殊的演算法——通常根據網頁中關鍵詞的匹配程度，出現的位置/頻次，鏈接質量等——計算出各網頁的相關度及排名等級，然後根據關聯度高低，按順序將這些網頁鏈接返回給用戶。

這里有一段摘自網路MP3搜索的文字：」根據用戶指令，網路的搜索引擎系統會以非人工方式自動生成到第三方網頁的鏈接。「網路」自身不存儲、控制、編輯或修改被鏈接的第三方網頁的信息。」注意！非人工三個字說明網路主要的工作方式是靠智能程序實現添加新信息，而非手工檢索錄入．（也不可能，效率未免太低下，並且價值不高）

而與搜索引擎相對的還有一個概念就是目錄索引（比如yahoo就有此功能）．目錄索引，顧名思義就是將網站分門別類地存放在相應的目錄中，因此用戶在查詢信息時，可選擇關鍵詞搜索，也可按分類目錄逐層查找。如以關鍵詞搜索，返回的結果跟搜索引擎一樣，也是根據信息關聯程度排列網站，只不過其中人為因素要多一些。如果按分層目錄查找，某一目錄中網站的排名則是由標題字母的先後順序決定（也有例外）。搜索引擎屬於自動網站檢索，而目錄索引則完全依賴手工操作。用戶提交網站後，目錄編輯人員會親自瀏覽你的網站，然後根據一套自定的評判標准甚至編輯人員的主觀印象，決定是否接納你的網站。

所以，想要讓自己的歌曲連接地址能出現在網路搜索頁面的前端，最直接簡單的做法就是多撒種，到盡可能多的地方發布你的歌曲地址，這樣就有比較大的幾率被系統自動錄入．

希望可以幫到你一點.關鍵是靠自己努力哦加油支持你一下。嘿！

⑸ JS 前端的篩選代碼

我特么的終於寫出來了，，給大家拿去用用看，自己添加css樣式。我感覺頭發要掉了。

粗略的樣子就是這樣，後面是代碼。

//JavaScriptDocument
//JavaScriptDocument
/*!jQueryv2.1.4|(c)2005,2015jQueryFoundation,Inc.|jquery.org/license*/

$(document).ready(function(){
$(".uox").click(function(){
$(".uox-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);

});

$(".uos").click(function(){
$(".uos-1").show(500);
$(".uox-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".box").click(function(){
$(".box-1").show(500);
$(".uos-1").hide(500);
$(".uox-1").hide(500);
$(".jod-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".jod").click(function(){
$(".jod-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".uox-1").hide(500);
$(".sor-1").hide(500);
$("#page").hide(500);
});

$(".sor").click(function(){
$(".sor-1").show(500);
$(".uos-1").hide(500);
$(".box-1").hide(500);
$(".jod-1").hide(500);
$(".uox-1").hide(500);
$("#page").hide(500);
});

//第一組篩選結束
//開始第二組篩選

$(".newch").click(function(){
$(".newch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});
$(".luoch").click(function(){
$(".luoch-1").show(500);
$(".newch-1").hide(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide();
$("#page").hide(500);
});

$(".bopch").click(function(){
$(".bopch-1").show(500);
$(".newch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".luoch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".dizch").click(function(){
$(".dizch-1").show(500);
$(".bopch-1").hide(500);
$(".newch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".dnych").click(function(){
$(".dnych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".newch-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".ousch").click(function(){
$(".ousch-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".newch-1").hide(500);
$(".tiych-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".tiych").click(function(){
$(".tiych-1").show(500);
$(".bopch-1").hide(500);
$(".dizch-1").hide(500);
$(".luoch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".newch-1").hide(500);
$(".getch-1").hide(500);
$("#page").hide(500);
});

$(".getch").click(function(){
$(".getch-1").show(500);
$(".bopch-1").hide(500);
$(".luoch-1").hide(500);
$(".dizch-1").hide(500);
$(".dnych-1").hide(500);
$(".ousch-1").hide(500);
$(".tiych-1").hide(500);
$(".newch-1").hide(500);
$("#page").hide(500);
});
//第二組結束
//第三組篩選

$(".wan-10").click(function(){
$(".wan-sh").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-20").click(function(){
$(".wan-es").show(500);
$(".wan-sh").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-30").click(function(){
$(".wan-ss").show(500);
$(".wan-es").hide(500);
$(".wan-sh").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-50").click(function(){
$(".wan-ws").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-sh").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-80").click(function(){
$(".wan-bs").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-sh").hide(500);
$(".wan-yb").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-100").click(function(){
$(".wan-yb").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-sh").hide(500);
$(".wan-oth").hide(500);
});
$(".wan-ot").click(function(){
$(".wan-oth").show(500);
$(".wan-es").hide(500);
$(".wan-ss").hide(500);
$(".wan-ws").hide(500);
$(".wan-bs").hide(500);
$(".wan-yb").hide(500);
$(".wan-sh").hide(500);
});

//第三組結束

//全部==按鈕
$(".qos").click(function(){
$("*").show(500);
$(".uio").show(500);
$(".uip").show(500);
$("#page").hide();
});

$(".zhan").click(function(){
$("#page").slideToggle(500);

});

$(".hons").click(function(){
$("*").toggleClass("red");
});
//變色（紅色）

$(".newsli").first().css("color","#5A0305");
$(".newsa").first().css("color","#5A0305");

$(".newsli").eq(1).css("color","#C0832C");
$(".newsa").eq(1).css("color","#C0832C");

$(".newsli").eq(2).css("color","#12B4B7");
$(".newsa").eq(2).css("color","#12B4B7");

$(".newsli").eq(3).css("color","#000");
$(".newsli").eq(4).css("color","#000");
$(".newsli").eq(5).css("color","#000");
$(".newsli").eq(6).css("color","#000");
$(".newsli").eq(7).css("color","#000");
$(".newsli").eq(8).css("color","#000");
$(".newsli").eq(9).css("color","#000");

//獲取外部文件代碼
$(".huoq").click(function(){
$("#div1").load("../DW+GY/css/loud.htm");
});

});

⑹ 請問這個web前端的頁面要怎樣空格

你那個</div>放錯地方了要麼用完整的div來包裹下面的ul 要麼就刪掉想調整頁面元素的高度如果不是絕對定位的話給<ul class="mui-table-view" >加上一條屬性

style="margin-top: 100px"

就是改成這樣

<ulclass="mui-table-view"style="margin-top:100px">

100px可以隨便調整

建議看一遍html跟css基礎，一上來就用現成架構出東西的速度是快，但是這么基本的問題都不能自己解決後期很吃力的

⑺ 前端下拉。

厲害厲害，你這是有問題的嗎？為什麼不用偽類寫下拉不就好了么

⑻ 前端常用的框架有哪些

web前端的主流框架，下面，我具體給你介紹一下：
1、Angular：Angular是一款優秀的前端JS框架，Angular有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能，在自定義指令後可以在項目中多次使用。
2、React：React可以非常輕松地創建用戶交互界面。為你應用的每一個狀態設計簡潔的視圖，在數據改變時React也可以高效地更新渲染界面。React為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
3、Vue：近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue對模塊很友好，可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
以上三個就是我給你介紹的關於web前端主流的框架，希望我的回答對你有所幫助

⑼ 前端開發時meta標簽一般怎麼寫

注釋：<meta> 標簽永遠位於 head 元素內部。
注釋：元數據總是以名稱/值的形式被成對傳遞的。
name屬性
name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
meta標簽的name屬性語法格式是：<meta name="參數" content="具體的參數值">；。
其中name屬性主要有以下幾種參數：
A、Keywords（關鍵字）
說明：keywords用來告訴搜索引擎你網頁的關鍵字是什麼。
舉例：<meta name ="keywords" content="science,ecation,culture,politics,ecnomics,relationships,entertainment,human">
B、description（網站內容描述）
說明：description用來告訴搜索引擎你的網站主要內容。
網站內容描述（description）的設計要點：
①網頁描述為自然語言而不是羅列關鍵詞（與keywords設計正好相反）；
②盡可能准確地描述網頁的核心內容，通常為網頁內容的摘要信息，也就是希望搜索引擎在檢索結果中展示的摘要信息；
③網頁描述中含有有效關鍵詞；
④網頁描述內容與網頁標題內容有高度相關性；
⑤網頁描述內容與網頁主體內容有高度相關性；
⑥網頁描述的文字不必太多，一般不超過搜索引擎檢索結果摘要信息的最多字數（通常在100中文字之內，不同搜索引擎略有差異）。
舉例：<meta name="description" content="This page is about the meaning of science,ecation,culture.">
C、robots（機器人向導）
說明：robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。
content的參數有all,none,index,noindex,follow,nofollow。默認是all。
舉例：<meta name="robots" content="none">
D、author（作者）
說明：標注網頁的作者
http-equiv屬性
http-equiv顧名思義，相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變數值。
meta標簽的http-equiv屬性語法格式是：<meta http-equiv="參數" content="參數變數值"> ；其中http-equiv屬性主要有以下幾種參數：
A、Expires（期限）
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸。
用法：<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
注意：必須使用GMT的時間格式。
B、Pragma(cache模式）
說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。
用法：<meta http-equiv="Pragma" content="no-cache">
注意：這樣設定，訪問者將無法離線瀏覽。
C、Refresh（刷新）
說明：自動刷新並轉到新頁面。
用法：<meta http-equiv="Refresh" content="2;URL">；（注意後面的分號，分別在秒數的前面和網址的後面，URL可為空）
注意：其中的2是指停留2秒鍾後自動刷新到URL網址。
D、Set-Cookie(cookie設定）
說明：如果網頁過期，那麼存檔的cookie將被刪除。
用法：<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Friday,12-Jan-2001 18:18:18 GMT; path=/">
注意：必須使用GMT的時間格式。
E、Window-target（顯示窗口的設定）
說明：強制頁面在當前窗口以獨立頁面顯示。
用法：<meta http-equiv="Window-target" content="_top">
注意：用來防止別人在框架里調用自己的頁面。
F、content-Type（顯示字元集的設定）
說明：設定頁面使用的字元集。
用法：<meta http-equiv="content-Type" content="text/html; charset=gb2312">
G、content-Language（顯示語言的設定）
用法：<meta http-equiv="Content-Language" content="zh-cn" />
功能
上面我們介紹了meta標簽的一些基本組成，接著我們再來一起看看meta標簽的常見功能：

⑽ 求前端大神！！！兩端對齊怎麼弄啊！！

公司名稱的字間距要變大么？
letter-spacing添加字之間的空白；而word-spacing添加每個單詞之間的空白。
word-spacing對中文無效。

或是……直接加幾個空格，讓冒號對齊？

你網路一下都有的 http://www.cnblogs.com/PeunZhang/p/3289493.html

前端top100

與前端top100相關的內容