界面小项目之W3C
Posted huanghongzheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了界面小项目之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>
以上是关于界面小项目之W3C的主要内容，如果未能解决你的问题，请参考以下文章