整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
根目錄下設定了中英兩個目錄分別為cn和en，分別建立index.html，在根目錄下的index.html頁面中添加入如下java script 代碼，即可實現在用戶放溫暖網站的時候自動跳轉到不同的語言界面上。
<script>
if (navigator.appName ==”Netscape”)
var language = navigator.language;
else
var language = navigator.browserLanguage;
if (language.indexOf(“en”) > -1) document.location.href = “en/index.html”;
else if (language.indexOf(“zh”) > -1) document.location.href =”cn/index.html”;
else
document.location.href =”en/index.html”;
</script>
演示網站：http://www.tool321.com
. 中英文多國語言專業翻譯公司網頁模板下載
這套響應式中英文多國語言專業翻譯公司HTML網頁模板，默認擁有網站首頁、關于我們、服務項目、博客新聞、下拉單頁面、聯系方式等幾個類型頁面。本模板首頁主要功能有關于我們的幾句話、我們提供什么、出色的行業專業知識、向所有人開放語言、用戶感言、聯系我們、聯系信息類幾個功能區，本靜態模板適合開發外語翻譯類企業網站。
詳情&下載：https://www.92jzh.com/moban/list/1949.html
2. 響應式清潔設備保潔工具中英雙語網站源碼
這套響應式清潔設備保潔工具中英雙語網站源碼，默認開設網站首頁、關于我們、產品中心、新聞中心、視頻中心、聯系我們等5個欄目，支持增刪改欄目名。網站頂部網站名和導航條，支持背景高亮效果，然后是2張自動切換通欄焦點圖。
詳情&下載：https://www.92jzh.com/com/list/1592.html
3. 響應式塑料扎帶綁繩線卡類中英雙語網站源碼
這套響應式塑料扎帶綁繩線卡類中英雙語網站源碼，支持增刪改欄目名。頂部左邊網站名，右邊是導航條，支持二級下拉子菜單和背景高亮效果，接著是3張左右滾動的通欄焦點圖。本網站源碼特別適用于開發塑料品生產類企業網站，推薦給想要制作此類平臺的朋友。
詳情&下載：https://www.92jzh.com/com/list/1349.html
4. 響應式網絡電子攝像頭類中英雙語網站源碼
這套響應式網絡電子攝像頭類中英雙語網站源碼下載，默認開設網站首頁、公司簡介、新聞中心、產品中心、設備展示、企業風采、聯系我們等八個欄目，支持增刪改欄目名。頂部左邊是聯系電話，右邊是中英文雙語切換，下方左邊是網站名，右邊是導航條，支持二級下拉子菜單和背景高亮效果
詳情&下載：https://www.92jzh.com/com/list/1248.html
5. 響應式LED照明燈具類中英雙語外貿網站源碼
這套響應式LED燈具照明設備類中英雙語外貿網站源碼，默認開設網站首頁、關于我們、產品中心、新聞資訊、服務支持、案例展示、公司相冊、聯系我們等七個欄目，支持增刪改欄目名。頂部是網站歡迎詞和語言選擇，下方左邊是網站名，右邊是搜索框，下方導航條，支持背景高亮效果，然后是兩張可以自動切換的通欄焦點圖。
詳情&下載：https://www.92jzh.com/com/list/1220.html
我們以往看到的頁面效果中，很多效果是需要JS搭配使用的，而今天在本文中，我將介紹如何使用純HTML打造屬于自己的實用效果。
使用Details和Summary標簽可以創建沒有JavaScript代碼的可折疊手風琴。
效果：
HTML
<details> <summary>Languages Used</summary> <p>This page was written in HTML and CSS. The CSS was compiled from SASS. Regardless, this could all be done in plain HTML and CSS</p> </details> <details> <summary>How it Works</summary> <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. </p> </details>
CSS
* {
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
details {
border: 1px solid #aaa;
border-radius: 4px;
padding: .5em .5em 0;
}
summary {
font-weight: bold;
margin: -.5em -.5em 0;
padding: .5em;
}
details[open] {
padding: .5em;
}
details[open] summary {
border-bottom: 1px solid #aaa;
margin-bottom: .5em;
}
瀏覽器支持：
該Meter和Progress 的元素標簽的基礎上，你可以調整屬性呈現在屏幕上的進度條。進步有兩個屬性：max和value校準進度條，而Meter標簽提供了更多的定制屬性。
效果：
HTML:
<label for="upload">Upload progress:</label> <meter id="upload" name="upload" min="0" max="100" low="33" high="66" optimum="80" value="50"> at 50/100 </meter> <hr/> <label for="file">File progress:</label> <progress id="file" max="100" value="70"> 70% </progress>
CSS:
body {
margin: 50px;
}
label {
padding-right: 10px;
font-size: 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
瀏覽器支持：
在定義輸入元素時，您要知道現代瀏覽器已經允許您指定足夠多的輸入類型了。除了你應該已經知道text，email，password，number這些類型外，還有下面的這些。
效果：
HTML:
<label for="date">Enter date:</label> <input type="date" id="date"/> <label for="datetime">Enter date & time:</label> <input type="datetime-local" id="datetime"/> <label for="month">Enter month:</label> <input type="month" id="month"/> <label for="search">Search for:</label> <input type="search" id="search"/> <label for="tel">Enter Phone:</label> <input type="tel" id="tel">
CSS:
input, label {display:block; margin: 5px;}
input {margin-bottom:18px;}
各種新輸入類型的MDN文檔非常廣泛且信息量很大。此外，檢查移動輸入類型以了解用戶在移動瀏覽器上時這些輸入元素的鍵盤行為。
video和audio元素雖然現在已經成為HTML規范的一部分，但是你一樣會驚訝于你可以使用video標簽在屏幕上渲染出一個體面的視頻播放器。
<video controls> <source src="https://addpipe.com/sample_vid/short.mp4" poster="https://addpipe.com/sample_vid/poster.png"> Sorry, your browser doesn't support embedded videos. </video
視頻標記中值得注意的一些屬性包括：
瀏覽器支持：
當你想顯示歷史編輯及校對的情況時，blockquote，del和ins元素標簽可以派上用場了。
示例：
HTML：
<blockquote> There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so. </blockquote>
CSS：
del {
text-decoration: line-through;
background-color: #fbb;
color: #555;
}
ins {
text-decoration: none;
background-color: #d4fcbc;
}
blockquote {
padding-left: 15px;
line-height: 30px;
border-left: 3px solid #d7d7db;
font-size: 1rem;
background: #eee;
width: 200px;
}
由于中英文引號的不同，使用<q>標記可以讓您很好的解決這個問題，它可使你的內容在大多數瀏覽器上更一致地呈現引號。
HTML：
Don Corleone said <q cite="https://www.imdb.com/title/tt0068646/quotes/qt0361877">I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party.</q></p> <hr/> Don Corleone said <i>"I'm gonna make him an offer he can't refuse. Okay? I want you to leave it all to me. Go on, go back to the party."</i>
CSS：
body {
margin: 50px;
}
q {
font-style: italic;
color: #000000bf;
}
<kbd>標簽應該是一個少為人知的冷門標簽，但這個能使用更好的方式來說明組合鍵的樣式。
HTML：
<p>I know that <kbd>CTRL</kbd>+<kbd>C</kbd> and <kbd>CTRL</kbd>+<kbd>V</kbd> a are like the most used key combinations</p>
CSS：
body {
margin: 50px;
}
kbd {
display: inline-block;
margin: 0 .1em;
padding: .1em .6em;
font-size: 11px;
line-height: 1.4;
color: #242729;
text-shadow: 0 1px 0 #FFF;
background-color: #e1e3e5;
border: 1px solid #adb3b9;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(12,13,14,0.2), 0 0 0 2px #FFF inset;
white-space: nowrap;
}
使用figcaption pre code標簽，您可以使用純HTML和CSS呈現出不錯的代碼片段。
HTML：
<figure>
<figcaption>
Defining a css <code>color</code> property for a class called 'golden'
</figcaption>
<pre>
<code>
.golden {
color: golden;
}
</code>
</pre>
</figure>
CSS：
pre {
background-color: #ffbdbd;
}
這篇文章也只是拋磚引玉，也許您也有更多私藏的使用技巧，不妨也貼出來分享給大家。
另外，如果您不僅僅限于以上的效率，希望有更完整的動態功能。
例如：您希望在您的頁面中加入Excel功能，可以嘗試葡萄城的 純前端表格控件SpreadJS，再或者您希望為用戶提供更完備、更高效的前端UI控件，您也不妨可以試試 WijmoJS，相信它們都能為您的應用增色不少。
關于葡萄城
賦能開發者！葡萄城公司成立于 1980 年，是全球領先的集開發工具、商業智能解決方案、管理系統設計工具于一身的軟件和服務提供商。西安葡萄城是其在中國的分支機構，面向全球市場提供軟件研發服務，并為中國企業的信息化提供國際先進的開發工具、軟件和研發咨詢服務。葡萄城的控件和軟件產品在國內外屢獲殊榮，在全球被數十萬家企業、學校和政府機構廣泛應用。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
