界面小項目之W3C
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>text8</title> <link rel="stylesheet" href="css/reset.css"></head> <style> .header { width: 1210px; height: 100px; background-color: #fdfcf8; margin: 0 auto; /*border: 1px solid black;*/ } .header-h1 { float: left; } .header-h1 a { width: 500px; height: 100px; /*border: 1px solid black;*/ background-image: url("img/bg.png"); display: block; background-position: 0 -150px; } .header-h1 a:hover { background-position-y: -250px; } .header-form { float: right; padding-top: 35px; padding-right: 20px; } .inp { height: 24px; width: 240px; border: 1px solid #cccccc; } .btn { width: 28px; height: 28px; border: none; background-color: red; color: white; }</style> <style> .nav-ul { width: 1210px; margin: 0 auto; background-image: url("img/bg.png"); } .nav-ul:after { content: ''; display: block; clear: both; } .nav-ul li { float: left; } .nav-a { display: block; height: 48px; background-image: url("img/bg.png"); } .nav-a:hover { background-position-y: -48px; } .nav-a1 { width: 155px; } .nav-a2 { width: 157px; background-position-x: -155px; } .nav-a3 { width: 167px; background-position-x: -312px; } .nav-a4 { width: 158px; background-position-x: -479px; } .nav-a5 { width: 101px; background-position-x: -637px; } .nav-a6 { width: 185px; background-position-x: -738px; } .nav-a7 { width: 177px; background-position-x: -923px; } </style> <style> .main { width: 1210px; margin: 0 auto; } .main:after { content: ''; display: block; clear: both; } .main-left, .main-center, .main-right { float: left; } .main-left, .main-right { width: 178px; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; } .main-center { width: 850px; } .main-box { padding-top: 15px; user-select: none; } .main-box h4 { padding-left: 8px; line-height: 30px; } .main-box li { padding-left: 20px; line-height: 24px; font-size: 14px; } .main-box li:hover { color: white; background-color: #aaaaaa; cursor: pointer; } .main-right .main-box li { color: tomato; } .main-right .main-box li:hover { background-color: red; } .main-right .main-box li:hover { color: white; } .main-box h3 { padding-left: 10px; line-height: 40px; font-size: 18px; color: blue; } .main-box h3:hover { text-decoration: underline; } </style> <style> .main-center-box { width: calc(100% - 30px); margin: 0 auto; padding: 30px 0; border-bottom: 1px solid #cccccc; } .main-center-box.box1 { text-align: center; font-size: 18px; } .main-center-box h2 { line-height: 45px; } .main-center-box p { font-size: 16px; line-height: 35px; } </style> <style> .main-center-box.sbox div { margin-left: 120px; } .main-center-box.box2 { background-image: url("img/icon2.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box3 { background-image: url("img/icon3.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box4 { background-image: url("img/icon4.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box5 { background-image: url("img/icon5.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box6 { background-image: url("img/icon6.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box6 a { color: brown; text-decoration: underline; line-height: 35px; } .main-center-box.box6 a:hover { color: red; } .main-center-box.box7 { background-image: url("img/icon7.png"); background-repeat: no-repeat; background-position: 0 30px; } .main-center-box.box7 a { color: brown; text-decoration: underline; font-size: 18px; line-height: 35px; } .main-center-box.box7 a:hover { color: red; } </style> <style> .footer { width: 1210px; height: 70px; background-color: pink; margin: 0 auto; } </style><body> <div class="header"> <h1 class="header-h1"> <a href=""></a> </h1> <form action="" class="header-form"> <input type="text" class="inp"> <input type="submit" class="btn" value="GO" title="搜索"> </form> </div> <div class="nav"> <ul class="nav-ul"> <li><a href="" class="nav-a nav-a1"></a></li> <li><a href="" class="nav-a nav-a2"></a></li> <li><a href="" class="nav-a nav-a3"></a></li> <li><a href="" class="nav-a nav-a4"></a></li> <li><a href="" class="nav-a nav-a5"></a></li> <li><a href="" class="nav-a nav-a6"></a></li> <li><a href="" class="nav-a nav-a7"></a></li> </ul> </div> <div class="main"> <div class="main-left"> <div class="main-box"> <h4>HTML.教程</h4> <ul> <li> HTML </li> <li>HTML5</li> <li>XHTML</li> <li>CSS</li> <li>CSS3</li> <li>TCP/IP</li> </ul> <h4>瀏覽器版本</h4> <ul> <li>JavaScript</li> <li>HTML DOM</li> <li>jQuery</li> <li>AJAX</li> <li>JSON</li> <li>DHTML</li> <li>E4X</li> <li>WMLScript</li> </ul> <h4>服務器腳本</h4> <ul> <li>PHP</li> <li>SQL</li> <li>ASP</li> <li>ADO</li> <li>VBScript</li> </ul> <h4>XML 教程</h4> <ul> <li>XML</li> <li>DTD</li> <li>XML DOM</li> <li>XSL</li> <li>XSLT</li> <li>XSL-FO</li> <li>XPath</li> <li>XQuery</li> <li>XLink</li> <li>XPointer</li> <li>Schema</li> <li>XForms</li> <li>WAP</li> <li>SVG</li> </ul> <h4>Web Services</h4> <ul> <li>Web Services</li> <li>WSDL</li> <li>SOAP</li> <li>RSS</li> <li>RDF</li> </ul> <h4>.NET</h4> <ul> <li>ASP.NET</li> <li>Web Pages</li> <li>Razor</li> <li>MVC</li> <li>Web Forms</li> </ul> <h4>建站手冊</h4> <ul> <li>網站構建</li> <li>萬維網聯盟</li> <li>瀏覽器信息</li> <li>網站品質</li> <li>語義網</li> <li>職業規劃</li> <li>網站主機</li> <li>網絡媒體</li> </ul> <h3>關於 W3School</h3> <h3>幫助 W3School</h3> </div> </div> <div class="main-center"> <div class="main-center-box box1"> <h2>領先的 Web 技術教程 - 所有免費</h2> <p>在 W3School，你能夠找到你所須要的全部的網站建設教程。</p> <p>從基礎的 HTML 到 CSS，乃至進階的 XML、SQL、JS、PHP 和 ASP.NET。</p> <p> <b>從左側的菜單選擇你須要的教程！</b> </p> </div> <div class="main-center-box sbox box2"> <div> <h2>完整的網站技術參考手冊</h2> <p>咱們的參考手冊涵蓋了網站技術的方方面面</p> <p>其中包括W3C標準技術：HTML、CSS、XML 。以及其餘技術，諸如 JavaScript、PHP、SQL 等。</p> </div> </div> <div class="main-center-box sbox box3"> <div> <h2>在線實例測試工具</h2> <p>在 W3School，咱們提供上千個實例。</p> <p>經過使用咱們的在線編輯器，你能夠編輯這些例子，並對代碼進行實驗。</p> </div> </div> <div class="main-center-box sbox box4"> <div> <h2>快捷易懂的學習方式</h2> <p>一寸光陰一寸金，所以，咱們爲您提供快捷易懂的學習內容。</p> <p>在這裏，您能夠經過一種易懂的便利的模式得到您須要的任何知識。</p> </div> </div> <div class="main-center-box sbox box5"> <div> <h2>從何入手？</h2> <p>什麼是一個 Web 建設者須要學習的知識呢？</p> <p>W3School 將爲您回答這個問題，在您成爲專業 Web 開發者的路上助一臂之力。</p> <p>若是您是初學者，請您閱讀 《網站構建初級教程》。</p> <p>若是您是開學者，請您閱讀 《網站構建高級教程》。</p> </div> </div> <div class="main-center-box sbox box6"> <div> <h2>W3School 新聞</h2> <p><a href="http://www.w3school.com.cn/cssref/index.asp">CSS3 參考手冊</a>已上線，敬請批評指正。</p> </div> </div> <div class="main-center-box sbox box7"> <div> <h2>W3School 更新信息</h2> <a href="http://www.w3school.com.cn/js/index.asp">2019 版 W3School JavaScript 教程全新上線！</a> </div> </div> <div class="main-center-box sbox box8"> <div class="box8-title"> <h2>W3School 友情連接</h2> <p> <a href="">Firefox 中文社區</a> <a href="">w3ctech</a> <a href="">WeTest騰訊質量開放平臺</a> </p> </div> <div class="box8-body"> <h4>新浪微博</h4> <p> <a href="">3School 官方微博</a> </p> </div> <div class=""> <h4>微信公衆號</h4> <p><a href="">W3School 官方服務號</a></p> </div> </div> </div> <div class="main-right"> <div class="main-box"> <h4>HTML.教程</h4> <ul> <li> HTML </li> <li>HTML5</li> <li>XHTML</li> <li>CSS</li> <li>CSS3</li> <li>TCP/IP</li> </ul> <h4>瀏覽器版本</h4> <ul> <li>JavaScript</li> <li>HTML DOM</li> <li>jQuery</li> <li>AJAX</li> <li>JSON</li> <li>DHTML</li> <li>E4X</li> <li>WMLScript</li> </ul> <h4>服務器腳本</h4> <ul> <li>PHP</li> <li>SQL</li> <li>ASP</li> <li>ADO</li> <li>VBScript</li> </ul> <h4>XML 教程</h4> <ul> <li>XML</li> <li>DTD</li> <li>XML DOM</li> <li>XSL</li> <li>XSLT</li> <li>XSL-FO</li> <li>XPath</li> <li>XQuery</li> <li>XLink</li> <li>XPointer</li> <li>Schema</li> <li>XForms</li> <li>WAP</li> <li>SVG</li> </ul> <h4>Web Services</h4> <ul> <li>Web Services</li> <li>WSDL</li> <li>SOAP</li> <li>RSS</li> <li>RDF</li> </ul> <h4>.NET</h4> <ul> <li>ASP.NET</li> <li>Web Pages</li> <li>Razor</li> <li>MVC</li> <li>Web Forms</li> </ul> <h4>建站手冊</h4> <ul> <li>網站構建</li> <li>萬維網聯盟</li> <li>瀏覽器信息</li> <li>網站品質</li> <li>語義網</li> <li>職業規劃</li> <li>網站主機</li> <li>網絡媒體</li> </ul> </div> </div> </div> <div class="footer"> <p>W3School 簡體中文版提供的內容僅用於培訓和測試，不保證內容的正確性。經過使用本站內容隨之而來的風險與本站無關。</p> </div></body></html>
相關文章
- 1. html+css 小項目 微信界面
- 2. android項目——登陸界面
- 3. 修改Tomcat歡迎界面爲本身項目界面（發佈項目）
- 4. iOS 仿寫項目之微信聊天界面、QQ聊天界面
- 5. Java 小項目——字符界面收銀臺（初級版）
- 6. [JAVA小項目]GUI界面的局域網聊天室
- 7. javaScirpt小項目-----英雄聯盟遊戲登陸界面
- 8. android項目中刷新activity界面
- 9. swift開源項目-界面佈局
- 10. 項目搭建篇：前端界面（vue）
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 項目模板 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
