界面小项目之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员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
