作业完成汇报
- 编程题
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="yemianstyle.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><a href="http://www.baidu.com" title="w3school 在线教程" style="float: left;">w3school 在线教程</a>
</h1>
<div id="search">
<form>
<input type="hidden" name="sitesearch" value="w3school.com.cn"/>
<input type="text" name="as_q" class="box" id="searched_content" title="在此输入搜索内容。"/>
<input type="submit" value="Go" class="button" title="搜索！"/>
</form>
</div>
</div>
<div id="navbar">
<ul id="menu">
<li id="h"><a href="http://www.baidu.com" title="HTML 系列教程">HTML 系列教程</a></li>
<li id="b"><a href="http://www.baidu.com" title="浏览器脚本教程">浏览器脚本</a></li>
<li id="s"><a href="http://www.baidu.com" title="服务器脚本教程">服务器脚本</a></li>
<li id="d"><a href="http://www.baidu.com" title="ASP.NET 教程">ASP.NET 教程</a></li>
<li id="x"><a href="http://www.baidu.com" title="XML 系列教程">XML 系列教程</a></li>
<li id="ws"><a href="http://www.baidu.com" title="Web Services 系列教程">Web Services 系列教程</a></li>
<li id="w"><a href="http://www.baidu.com" title="建站手册">建站手册</a></li>
</ul>
</div>
<div id="navlist">
<h2>HTML 教程</h2>
<ul>
<li><a href="http://www.baidu.com" title="HTML 教程">HTML</a></li>
<li><a href="http://www.baidu.com" title="HTML5 教程">HTML5</a></li>
<li><a href="http://www.baidu.com" title="XHTML 教程">XHTML</a></li>
<li><a href="http://www.baidu.com" title="CSS 教程">CSS</a></li>
<li><a href="http://www.baidu.com" title="CSS3 教程">CSS3</a></li>
<li><a href="http://www.baidu.com" title="TCP/IP 教程">TCP/IP</a></li>
</ul>
<h2>浏览器脚本</h2>
<ul>
<li><a href="http://www.baidu.com" title="JavaScript 教程">JavaScript</a></li>
<li><a href="http://www.baidu.com" title="HTML DOM 教程">HTML DOM</a></li>
<li><a href="http://www.baidu.com" title="jQuery 教程">jQuery</a></li>
<li><a href="http://www.baidu.com" title="jQuery Mobile 教程">jQuery Mobile</a></li>
<li><a href="http://www.baidu.com" title="AJAX 教程">AJAX</a></li>
<li><a href="http://www.baidu.com" title="JSON 教程">JSON</a></li>
<li><a href="http://www.baidu.com" title="DHTML 教程">DHTML</a></li>
<li><a href="http://www.baidu.com" title="E4X 教程">E4X</a></li>
<li><a href="http://www.baidu.com" title="WMLScript 教程">WMLScript</a></li>
</ul>
<h2>服务器脚本</h2>
<ul>
<li><a href="http://www.baidu.com" title="PHP 教程">PHP</a></li>
<li><a href="http://www.baidu.com" title="SQL 教程">SQL</a></li>
<li><a href="http://www.baidu.com" title="ASP 教程">ASP</a></li>
<li><a href="http://www.baidu.com" title="ADO 教程">ADO</a></li>
<li><a href="http://www.baidu.com" title="VBScript 教程">VBScript</a></li>
</ul>
<h2>XML 教程</h2>
<ul>
<li><a href="http://www.baidu.com" title="XML 教程">XML</a></li>
<li><a href="http://www.baidu.com" title="DTD教程">DTD</a></li>
<li><a href="http://www.baidu.com" title="XML DOM 教程">XML DOM</a></li>
<li><a href="http://www.baidu.com" title="XSL 语言">XSL</a></li>
<li><a href="http://www.baidu.com" title="XSLT 教程">XSLT</a></li>
<li><a href="http://www.baidu.com" title="XSL-FO 教程">XSL-FO</a></li>
<li><a href="http://www.baidu.com" title="XPath 教程">XPath</a></li>
<li><a href="http://www.baidu.com" title="XQuery 教程">XQuery</a></li>
<li><a href="http://www.baidu.com" title="XLink 教程">XLink</a></li>
<li><a href="http://www.baidu.com" title="XPointer 教程">XPointer</a></li>
<li><a href="http://www.baidu.com" title="Schema 教程">Schema</a></li>
<li><a href="http://www.baidu.com" title="XForms 教程">XForms</a></li>
<li><a href="http://www.baidu.com" title="WAP 教程">WAP</a></li>
<li><a href="http://www.baidu.com" title="SVG 教程">SVG</a></li>
</ul>
<h2>Web Services</h2>
<ul>
<li><a href="http://www.baidu.com" title="Web Services 教程">Web Services</a></li>
<li><a href="http://www.baidu.com" title="WSDL 教程">WSDL</a></li>
<li><a href="http://www.baidu.com" title="SOAP 教程">SOAP</a></li>
<li><a href="http://www.baidu.com" title="RSS 教程">RSS</a></li>
<li><a href="http://www.baidu.com" title="RDF 教程">RDF</a></li>
</ul>
<h2>.NET</h2>
<ul>
<li><a href="http://www.baidu.com" title="ASP.NET 教程">ASP.NET</a></li>
<li><a href="http://www.baidu.com" title="ASP.NET Web Pages - 教程">Web Pages</a></li>
<li><a href="http://www.baidu.com" title="ASP.NET Razor - 标记">Razor</a></li>
<li><a href="http://www.baidu.com" title="ASP.NET MVC - 教程">MVC</a></li>
<li><a href="http://www.baidu.com" title="ASP.NET Web Forms - 教程">Web Forms</a></li>
</ul>
<h2>建站手册</h2>
<ul>
<li><a href="http://www.baidu.com" title="网站构建">网站构建</a></li>
<li><a href="http://www.baidu.com" title="万维网联盟 (W3C)">万维网联盟 (W3C)</a></li>
<li><a href="http://www.baidu.com" title="浏览器信息">浏览器信息</a></li>
<li><a href="http://www.baidu.com" title="网站品质">网站品质</a></li>
<li><a href="http://www.baidu.com" title="语义网">语义网</a></li>
<li><a href="http://www.baidu.com" title="职业规划">职业规划</a></li>
<li><a href="http://www.baidu.com" title="网站主机教程">网站主机</a></li>
<li><a href="http://www.baidu.com" title="网络媒体教程">网络媒体</a></li>
</ul>
<h2 id="link_about">
<a href="http://www.baidu.com" title="关于 W3School">关于 W3School</a>
</h2>
<h2 id="link_help">
<a href="http://www.baidu.com" title="帮助 W3School">帮助 W3School</a>
</h2>
</div>
<div id="content">
<div class="idea" id="d1">
<h2>领先的 Web 技术教程 - 全部免费</h2>
<p>在 w3school，你可以找到你所需要的所有的网站建设教程。</p>
<p>从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP 和 ASP.NET。</p>
<p><strong>从左侧的菜单选择你需要的教程！</strong></p>
</div>
<div class="idea" id="d2">
<h3>完整的网站技术参考手册</h3>
<p>我们的参考手册涵盖了网站技术的方方面面。</p>
<p>其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。</p>
</div>
<div class="idea" id="d3">
<h3>在线实例测试工具</h3>
<p>在 w3school，我们提供上千个实例。</p>
<p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p>
</div>
<div class="idea" id="d4">
<h3>快捷易懂的学习方式</h3>
<p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p>
<p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p>
</div>
<div class="idea" id="d5">
<h3>从何入手？</h3>
<p>什么是一个Web建设者需要学习的知识呢？</p>
<p>W3School将为您回答这个问题，在您成为专业 Web 开发者的路上助一臂之力。</p>
<p>如果您是初学者，请您阅读《<a href="http://www.baidu.com" title="网站构建初级教程">网站构建初级教程</a>》。</p>
<p>如果您是开发者，请您阅读《<a href="http://www.baidu.com" title="网站构建">网站构建高级教程</a>》。</p>
</div>
<div class="idea" id="d6">
<h3>W3School 新闻</h3>
<p>
<a href="http://www.baidu.com" title="CSS 参考手册">CSS3 参考手册</a> 已上线，敬请批评指正。
</p>
</div>
<div class="idea" id="d7">
<h3>W3School 更新信息</h3>
<p>
<a href="http://www.baidu.com" title="PHP Calendar 函数">参考手册：PHP Calendar 函数</a>
<a href="http://www.baidu.com" title="PHP Date / Time 函数">参考手册：PHP Date / Time 函数</a>
<a href="http://www.baidu.com" title="HTML 教程">教程：HTML 教程</a>
</p>
</div>
<div id="d8">
<h3>W3School 友情链接</h3>
<p class="partner">
<a href="http://www.baidu.com">Firefox 中文社区</a>
<a href="http://www.baidu.com">w3ctech</a>
<a href="http://www.baidu.com">WeTest腾讯质量开放平台</a>
</p>
</div>
<div id="d9">
<h3>新浪微博</h3>
<p><a href="http://www.baidu.com">W3School 官方微博</a></p>
</div>
<div id="d10">
<h3>微信公众号</h3>
<p>W3School 官方服务号</p>
</div>
</div>
<div id="sidebar">
<h2>参考手册</h2>
<ul>
<li><a href="http://www.baidu.com" title="HTML 参考手册">HTML/HTML5 标签</a></li>
<li><a href="http://www.baidu.com" title="HTML 颜色名">HTML 颜色</a></li>
<li><a href="http://www.baidu.com" title="CSS 参考手册">CSS 1,2,3</a></li>
<li><a href="http://www.baidu.com" title="JavaScript 参考手册">JavaScript</a></li>
<li><a href="http://www.baidu.com" title="HTML DOM 参考手册">HTML DOM</a></li>
<li><a href="http://www.baidu.com" title="jQuery 参考手册">jQuery</a></li>
<li><a href="http://www.baidu.com" title="jQuery Mobile 参考手册">jQuery Mobile</a></li>
<li><a href="http://www.baidu.com" title="VBScript 函数">VBScript</a></li>
<li><a href="http://www.baidu.com" title="ASP 参考手册">ASP</a></li>
<li><a href="http://www.baidu.com" title="ADO 参考手册">ADO</a></li>
<li><a href="http://www.baidu.com" title="ASP.NET 参考手册">ASP.NET</a></li>
<li><a href="http://www.baidu.com" title="PHP 参考手册">PHP 5.1</a></li>
<li><a href="http://www.baidu.com" title="XML DOM 参考手册">XML DOM</a></li>
<li><a href="http://www.baidu.com" title="XSLT 元素参考手册">XSLT 1.0</a></li>
<li><a href="http://www.baidu.com" title="XPath、XQuery 以及 XSLT 函数">XPath 2.0</a></li>
<li><a href="http://www.baidu.com" title="XSL-FO 参考手册">XSL-FO</a></li>
<li><a href="http://www.baidu.com" title="WML 参考手册">WML 1.1</a></li>
<li><a href="http://www.baidu.com" title="W3C 术语表和词典">W3C 术语表</a></li>
</ul>
<h2>字符集</h2>
<ul>
<li><a href="http://www.baidu.com" title="HTML 字符集">HTML 字符集</a></li>
<li><a href="http://www.baidu.com" title="HTML ASCII 参考手册">HTML ASCII</a></li>
<li><a href="http://www.baidu.com" title="HTML ISO-8859-1 参考手册">HTML ISO-8859-1</a></li>
<li><a href="http://www.baidu.com" title="HTML 4.01 符号实体">HTML 符号</a></li>
</ul>
<h2>实例/案例</h2>
<ul>
<li><a href="http://www.baidu.com">HTML 实例</a></li>
<li><a href="http://www.baidu.com">CSS 实例</a></li>
<li><a href="http://www.baidu.com">XML 实例</a></li>
<li><a href="http://www.baidu.com">JavaScript 实例</a></li>
<li><a href="http://www.baidu.com">JavaScript 对象实例</a></li>
<li><a href="http://www.baidu.com">HTML DOM 实例</a></li>
<li><a href="http://www.baidu.com">jQuery 实例</a></li>
<li><a href="http://www.baidu.com">jQuery Mobile 实例</a></li>
<li><a href="http://www.baidu.com">XML DOM 实例</a></li>
<li><a href="http://www.baidu.com">DHTML 实例</a></li>
<li><a href="http://www.baidu.com">AJAX 实例</a></li>
<li><a href="http://www.baidu.com">VBScript 实例</a></li>
<li><a href="http://www.baidu.com">ASP 实例</a></li>
<li><a href="http://www.baidu.com">ADO 实例</a></li>
<li><a href="http://www.baidu.com">SVG 实例</a></li>
<li><a href="http://www.baidu.com" title="WAP 演示">WAP 实例</a></li>
</ul>
<h2>测验/考试</h2>
<ul>
<li><a href="http://www.baidu.com">HTML 测验</a></li>
<li><a href="http://www.baidu.com">HTML5 测验</a></li>
<li><a href="http://www.baidu.com">XHTML 测验</a></li>
<li><a href="http://www.baidu.com">CSS 测验</a></li>
<li><a href="http://www.baidu.com">XML 测验</a></li>
<li><a href="http://www.baidu.com">JavaScript 测验</a></li>
<li><a href="http://www.baidu.com">jQuery 测验</a></li>
<li><a href="http://www.baidu.com">SQL 测验</a></li>
<li><a href="http://www.baidu.com">ASP 测验</a></li>
<li><a href="http://www.baidu.com">PHP 测验</a></li>
</ul>
<h2>代码验证</h2>
<ul>
<li><a href="http://www.baidu.com" title="网页验证">验证HTML</a></li>
<li><a href="http://www.baidu.com" title="网页验证">验证CSS</a></li>
<li><a href="http://www.baidu.com" title="网页验证">验证XHTML</a></li>
<li><a href="http://www.baidu.com" title="网页验证">验证XML</a></li>
<li><a href="http://www.baidu.com" title="网页验证">验证WML</a></li>
</ul>
</div>
<div id="footer">
<p id="p1">
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
</p>
<p id="p2">
<a href="http://www.baidu.com" title="关于使用">使用条款</a>和<a href="http://www.baidu.com" title="关于隐私">隐私条款</a>。版权所有，保留一切权利。
赞助商：<a href="http://www.baidu.com" title="上海赢科投资有限公司">上海赢科投资有限公司</a>。
<a href="http://www.baidu.com">蒙ICP备06004630号</a>
</p>
</div>
</div>
</body>
</html>
/* common 开始 */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
background: #fdfcf8;
}
/* common 结束 */
/* 页面 开始 */
div#wrapper {
width: 1240px;
margin: 0 auto;
}
/* 页面 结束 */
/* 头部 开始 */
div#header {
width: 1210px;
height: 100px;
background: #fdfcf8;
}
div#header a {
width: 500px;
height: 100px;
text-indent: -9999px;
float: left;
background: transparent url("bg.png") 0 -150px no-repeat;
}
div#header a:hover {
background: transparent url("bg.png") 0 -250px no-repeat;
}
div#header div#search {
height: 100px;
margin-right: 20px;
float: right;
}
div#header div#search #searched_content {
margin-top: 35px;
width: 300px;
height: 30px;
}
div#header div#search input.button {
width: 30px;
height: 30px;
background: #ae4141;
border: 0;
}
/* 头部 结束 */
/* 导航栏 开始 */
div#navbar {
width: 1210px;
height: 48px;
background: transparent url("bg.png") 0 0 no-repeat ;
}
div#navbar ul#menu {
width: 1210px;
height: 48px;
position: relative;
}
div#navbar ul#menu li {
position: absolute;
}
div#navbar ul#menu li a {
text-indent: -9999px;
height: 48px;
display: block;
}
#h {
left: 0;
width: 155px;
}
#b {
left: 155px;
width: 157px;
}
#s {
left: 312px;
width: 167px;
}
#d {
left: 479px;
width: 158px;
}
#x {
left: 637px;
width: 101px;
}
#ws {
left: 738px;
width: 185px;
}
#w {
left: 923px;
width: 177px;
}
#h a:hover {
background: transparent url("bg.png") 0 -48px no-repeat;
}
#b a:hover {
background: transparent url("bg.png") -155px -48px no-repeat;
}
#s a:hover {
background: transparent url("bg.png") -312px -48px no-repeat;
}
#d a:hover {
background: transparent url("bg.png") -479px -48px no-repeat;
}
#x a:hover {
background: transparent url("bg.png") -637px -48px no-repeat;
}
#ws a:hover {
background: transparent url("bg.png") -738px -48px no-repeat;
}
#w a:hover {
background: transparent url("bg.png") -923px -48px no-repeat;
}
/* 导航栏 结束 */
/* 导航列表 开始 */
div#navlist {
width: 180px;
float: left;
border-left: 1.5px solid #E8E7E3;
border-right: 1.5px solid #E8E7E3;
line-height: 25px;
}
div#navlist a {
text-decoration: none;
display: block;
margin-left: 10px
}
div#navlist a:hover {
background: gray;
}
div#navlist a:visited, a:link,a:visited{
font-size:13px;
}
div#navlist h2#link_about a {
color: #0479A7;
}
div#navlist h2#link_about a:hover {
background: transparent;
border-bottom: 1px solid #0479A7;
}
div#navlist h2#link_help a {
color: #0479A7;
}
div#navlist h2#link_help a:hover {
background: transparent;
border-bottom: 1px solid #0479A7;
}
div#navlist h2{
font-size:15px;
margin-left: 8px
}
/* 导航列表 结束 */
/* 主体内容 开始 */
div#content {
width: 850px;
float: left;
}
div#content div.idea {
border-bottom: 1px solid black;
}
div#content div {
padding: 30px 0;
width: 810px;
}
div#content div p {
margin-top: 20px;
}
div#content div#d1 {
text-align: center;
}
div#content div h3, div#content div p {
margin-left: 120px;
}
div#content div#d2 {
background: transparent url("icon2.png") 0 0 no-repeat;
}
div#content div#d3 {
background: transparent url("icon3.png") 0 0 no-repeat;
}
div#content div#d4 {
background: transparent url("icon4.png") 0 0 no-repeat;
}
div#content div#d5 {
background: transparent url("icon5.png") 0 0 no-repeat;
}
div#content div#d6 {
background: transparent url("icon6.png") 0 0 no-repeat;
}
div#content div#d7 {
background: transparent url("icon7.png") 0 0 no-repeat;
}
div#content div#d8 {
margin: 30px 0;
height: 80px;
background: transparent url("icon8.png") 0 0 no-repeat;
}
div#content div#d8 h3 {
font-size: 24px;
}
div#content div#d9 {
float: left;
margin-left: 40px;
width: 300px;
background: transparent url("icon9.png") 0 0 no-repeat;
}
div#content div#d9 h3, div#content div#d9 p {
margin-left: 55px;
}
div#content div#d9 p {
margin-top: 0px;
}
div#content div#d10 {
float: left;
width: 300px;
margin-left: 40px;
background: transparent url("icon10.png") 0 0 no-repeat;
}
div#content div#d10 h3, div#content div#d10 p {
margin-left: 55px;
}
div#content div#d10 p {
margin-top: 0px;
}
/* 主体内容 结束 */
/* 侧边栏 开始 */
div#sidebar {
width: 180px;
float: left;
}
div#sidebar {
width: 180px;
float: left;
border-left: 1.5px solid #E8E7E3;
border-right: 1.5px solid #E8E7E3;
line-height: 25px;
}
div#sidebar a {
text-decoration: none;
display: block;
margin-left: 10px
}
div#sidebar a:hover {
background: red;
}
div#sidebar a:visited, a:link,a:visited{
font-size:13px;
}
div#sidebar h2#link_about a {
color: #0479A7;
}
div#sidebar h2#link_about a:hover {
background: transparent;
border-bottom: 1px solid #0479A7;
}
div#sidebar h2#link_help a {
color: #0479A7;
}
div#sidebar h2#link_help a:hover {
background: transparent;
border-bottom: 1px solid #0479A7;
}
div#sidebar h2{
font-size:15px;
margin-left: 8px
}
/* 侧边栏 结束 */
/* 底部 开始 */
div#footer {
width: 1210px;
height: 56px;
clear: both;
padding-top: 15px;
background: url("footer.png") 0 0 repeat-x;
}
div#footer #p1 {
text-align: center;
background: transparent url("alert.png") 0 0 no-repeat;
background-position: 120px;
}
div#footer #p2 {
text-align: center;
margin: 30px 0;
}
/*链接字体颜色*/
div#navlist a:visited, a:link{
color: black;
}
div#d9 a:visited, a:link{
color: black;
}
div#d8 a:visited, a:link{
color: black;
}
p#p2 a:visited, a:link{
color: black;
}
p#p2 a{
text-decoration: none;
}
div#d5 a:visited, a:link{
color: #900b09;
}
div#d6 a:visited, a:link{
color: #900b09;
}
div#d7 a:visited, a:link{
color: #900b09;
}
div#sidebar a:visited, a:link{
color: #900b09;
}
今日学习总结
1.w3school 页面编写 css样式排版 footer浮动的学习
118
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
