今日学习概况
认真学习啊
学习内容
1.按标准开发步骤临摹实例演练开发过程
2.练习金山打字
作业完成情况
1.按标准开发步骤临摹实例演练开发过程
(1)代码如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="网页.css">
<meta charset="utf-8">
</head>
<body id="homefirst">
<div id="wrapper">
<!-- 头部DIV -->
<div id="header_index">
<h1><a href="" title="w3school 在线教程" style="float: left;">w3chool在线教程</a></h1>
<div id="searchui">
<form method="get" id="searchform" action="http://www.google.com.hk/search">
<input type="hidden" name="sitesearch" value="w3school.com.cn">
<input type="text" name="as_p" class="box" title="在此输入搜索内容">
<input type="submit" value="GO" class="button" title="搜索">
</form>
</div>
</div>
<!-- 主菜单DIV -->
<div id="navfirst">
<ul id="menu">
<li id="h"><a href="/h.asp" title="HTML 系列教程">HTML 系列教程</a></li>
<li id="b"><a href="/b.asp" title="浏览器脚本教程">浏览器脚本</a></li>
<li id="s"><a href="/s.asp" title="服务器脚本教程">服务器脚本</a></li>
<li id="d"><a href="/d.asp" title="ASP.NET 教程">ASP.NET 教程</a></li>
<li id="x"><a href="/x.asp" title="XML 系列教程">XML 系列教程</a></li>
<li id="ws"><a href="/ws.asp" title="Web Services 系列教程">Web Services 系列教程</a></li>
<li id="w"><a href="/w.asp" title="建站手册">建站手册</a></li>
</ul>
</div>
<!-- 左侧菜单DIV -->
<div id="navsecond">
<h2>HTML教程</h2>
<ul>
<li><a href="/html/index.asp" title="HTML 教程">HTML</a></li>
<li><a href="/html5/index.asp" title="HTML5 教程">HTML5</a></li>
<li><a href="/xhtml/index.asp" title="XHTML 教程">XHTML</a></li>
<li><a href="/css/index.asp" title="CSS 教程">CSS</a></li>
<li><a href="/css3/index.asp" title="CSS3 教程">CSS3</a></li>
<li><a href="/tcpip/index.asp" title="TCP/IP 教程">TCP/IP</a></li>
</ul>
<h2>浏览器脚本</h2>
<ul>
<li><a href="/js/index.asp" title="JavaScript 教程">JavaScript</a></li>
<li><a href="/htmldom/index.asp" title="HTML DOM 教程">HTML DOM</a></li>
<li><a href="/jquery/index.asp" title="jQuery 教程">jQuery</a></li>
<li><a href="/jquerymobile/index.asp" title="jQuery Mobile 教程">jQuery Mobile</a></li>
<li><a href="/ajax/index.asp" title="AJAX 教程">AJAX</a></li>
<li><a href="/json/index.asp" title="JSON 教程">JSON</a></li>
<li><a href="/dhtml/index.asp" title="DHTML 教程">DHTML</a></li>
<li><a href="/e4x/index.asp" title="E4X 教程">E4X</a></li>
<li><a href="/wmlscript/index.asp" title="WMLScript 教程">WMLScript</a></li>
</ul>
<h2>服务器脚本</h2>
<ul>
<li><a href="/php/index.asp" title="PHP 教程">PHP</a></li>
<li><a href="/sql/index.asp" title="SQL 教程">SQL</a></li>
<li><a href="/asp/index.asp" title="ASP 教程">ASP</a></li>
<li><a href="/ado/index.asp" title="ADO 教程">ADO</a></li>
<li><a href="/vbscript/index.asp" title="VBScript 教程">VBScript</a></li>
</ul>
<h2>XML教程</h2>
<ul>
<li><a href="/xml/index.asp" title="XML 教程">XML</a></li>
<li><a href="/dtd/index.asp" title="DTD教程">DTD</a></li>
<li><a href="/xmldom/index.asp" title="XML DOM 教程">XML DOM</a></li>
<li><a href="/xsl/xsl_languages.asp" title="XSL 语言">XSL</a></li>
<li><a href="/xsl/index.asp" title="XSLT 教程">XSLT</a></li>
<li><a href="/xslfo/index.asp" title="XSL-FO 教程">XSL-FO</a></li>
<li><a href="/xpath/index.asp" title="XPath 教程">XPath</a></li>
<li><a href="/xquery/index.asp" title="XQuery 教程">XQuery</a></li>
<li><a href="/xlink/index.asp" title="XLink 教程">XLink</a></li>
<li><a href="/xlink/index.asp" title="XPointer 教程">XPointer</a></li>
<li><a href="/schema/index.asp" title="Schema 教程">Schema</a></li>
<li><a href="/xforms/index.asp" title="XForms 教程">XForms</a></li>
<li><a href="/wap/index.asp" title="WAP 教程">WAP</a></li>
<li><a href="/svg/index.asp" title="SVG 教程">SVG</a></li>
</ul>
<h2>Web Services</h2>
<ul>
<li><a href="/webservices/index.asp" title="Web Services 教程">Web Services</a></li>
<li><a href="/wsdl/index.asp" title="WSDL 教程">WSDL</a></li>
<li><a href="/soap/index.asp" title="SOAP 教程">SOAP</a></li>
<li><a href="/rss/index.asp" title="RSS 教程">RSS</a></li>
<li><a href="/rdf/index.asp" title="RDF 教程">RDF</a></li>
</ul>
<h2>.NET</h2>
<ul>
<li><a href="/aspnet/index.asp" title="ASP.NET 教程">ASP.NET</a></li>
<li><a href="/aspnet/webpages_intro.asp" title="ASP.NET Web Pages - 教程">Web Pages</a></li>
<li><a href="/aspnet/razor_intro.asp" title="ASP.NET Razor - 标记">Razor</a></li>
<li><a href="/aspnet/mvc_intro.asp" title="ASP.NET MVC - 教程">MVC</a></li>
<li><a href="/aspnet/aspnet_intro.asp" title="ASP.NET Web Forms - 教程">Web Forms</a></li>
</ul>
<h2>建站手册</h2>
<ul>
<li><a href="/site/index.asp" title="网站构建">网站构建</a></li>
<li><a href="/w3c/index.asp" title="万维网联盟 (W3C)">万维网联盟 (W3C)</a></li>
<li><a href="/browsers/index.asp" title="浏览器信息">浏览器信息</a></li>
<li><a href="/quality/index.asp" title="网站品质">网站品质</a></li>
<li><a href="/semweb/index.asp" title="语义网">语义网</a></li>
<li><a href="/careers/index.asp" title="职业规划">职业规划</a></li>
<li><a href="/hosting/index.asp" title="网站主机教程">网站主机</a></li>
<li><a href="/media/index.asp" title="网络媒体教程">网络媒体</a></li>
</ul>
<h2 id="link_about"><a href="/about/index.asp" title="关于 W3School">关于 W3School</a></h2>
<h2 id="link_help"><a href="/about/about_helping.asp" title="帮助 W3School">帮助 W3School</a></h2>
</div>
<!-- 中间主体内容 -->
<div id="maincontent">
<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="/web/index.asp" title="网站构建初级教程">网站构建初级教程</a>》。</p>
<p>如果您是开发者，请您阅读《<a href="/site/index.asp" title="网站构建">网站构建高级教程</a>》。</p>
</div>
<div class="idea" id="d6">
<h3>W3School 新闻</h3>
<p>
<a href="/cssref/index.asp" title="CSS 参考手册">CSS3 参考手册</a> 已上线，敬请批评指正。
</p>
</div>
<div class="idea" id="d7">
<h3>W3School 更新信息</h3>
<p>
<a href="/php/php_ref_calendar.asp" title="PHP Calendar 函数">参考手册：PHP Calendar 函数</a>
<a href="/php/php_ref_date.asp" title="PHP Date / Time 函数">参考手册：PHP Date / Time 函数</a>
<a href="/html/index.asp" title="HTML 教程">教程：HTML 教程</a>
</p>
</div>
<div id="d8">
<h3>W3School 友情链接</h3>
<p class="partner">
<a target="_blank" href="http://mozilla.com.cn/">Firefox 中文社区</a>
<a target="_blank" href="http://www.w3ctech.com/">w3ctech</a>
<a target="_blank" href="http://wetest.qq.com/?from=links_w3school">WeTest腾讯质量开放平台</a>
</p>
</div>
<div id="d9">
<h3>新浪微博</h3>
<p><a target="_blank" href="http://weibo.com/w3schoolcomcn">W3School 官方微博</a></p>
</div>
<div id="d10">
<h3>微信公众号</h3>
<p>W3School 官方服务号</p>
</div>
</div>
<!-- 右侧菜单 -->
<div id="sidebar">
<h2>参考手册</h2>
<ul>
<li><a href="/tags/index.asp" title="HTML 参考手册">HTML/HTML5 标签</a></li>
<li><a href="/tags/html_ref_colornames.asp" title="HTML 颜色名">HTML 颜色</a></li>
<li><a href="/cssref/index.asp" title="CSS 参考手册">CSS 1,2,3</a></li>
<li><a href="/jsref/index.asp" title="JavaScript 参考手册">JavaScript</a></li>
<li><a href="/jsref/index.asp" title="HTML DOM 参考手册">HTML DOM</a></li>
<li><a href="/jquery/jquery_reference.asp" title="jQuery 参考手册">jQuery</a></li>
<li><a href="/jquerymobile/jquerymobile_ref_data.asp" title="jQuery Mobile 参考手册">jQuery Mobile</a></li>
<li><a href="/vbscript/vbscript_ref_functions.asp" title="VBScript 函数">VBScript</a></li>
<li><a href="/asp/asp_ref.asp" title="ASP 参考手册">ASP</a></li>
<li><a href="/ado/ado_reference.asp" title="ADO 参考手册">ADO</a></li>
<li><a href="/aspnet/aspnet_reference.asp" title="ASP.NET 参考手册">ASP.NET</a></li>
<li><a href="/php/php_ref.asp" title="PHP 参考手册">PHP 5.1</a></li>
<li><a href="/xmldom/xmldom_reference.asp" title="XML DOM 参考手册">XML DOM</a></li>
<li><a href="/xsl/xsl_w3celementref.asp" title="XSLT 元素参考手册">XSLT 1.0</a></li>
<li><a href="/xpath/xpath_functions.asp" title="XPath、XQuery 以及 XSLT 函数">XPath 2.0</a></li>
<li><a href="/xslfo/xslfo_reference.asp" title="XSL-FO 参考手册">XSL-FO</a></li>
<li><a href="/wap/wml_reference.asp" title="WML 参考手册">WML 1.1</a></li>
<li><a href="/glossary/index.asp" title="W3C 术语表和词典">W3C 术语表</a></li>
</ul>
<h2>字符集</h2>
<ul>
<li><a href="/tags/html_ref_charactersets.asp" title="HTML 字符集">HTML 字符集</a></li>
<li><a href="/tags/html_ref_ascii.asp" title="HTML ASCII 参考手册">HTML ASCII</a></li>
<li><a href="/tags/html_ref_entities.html" title="HTML ISO-8859-1 参考手册">HTML ISO-8859-1</a></li>
<li><a href="/tags/html_ref_symbols.html" title="HTML 4.01 符号实体">HTML 符号</a></li>
</ul>
<h2>实例/案例</h2>
<ul>
<li><a href="/example/html_examples.asp">HTML 实例</a></li>
<li><a href="/example/csse_examples.asp">CSS 实例</a></li>
<li><a href="/example/xmle_examples.asp">XML 实例</a></li>
<li><a href="/example/jseg_examples.asp">JavaScript 实例</a></li>
<li><a href="/example/jsrf_examples.asp">JavaScript 对象实例</a></li>
<li><a href="/example/hdom_examples.asp">HTML DOM 实例</a></li>
<li><a href="/jquery/jquery_examples.asp">jQuery 实例</a></li>
<li><a href="/jquerymobile/jquerymobile_examples.asp">jQuery Mobile 实例</a></li>
<li><a href="/example/xdom_examples.asp">XML DOM 实例</a></li>
<li><a href="/example/dhtm_examples.asp">DHTML 实例</a></li>
<li><a href="/example/ajax_examples.asp">AJAX 实例</a></li>
<li><a href="/example/vbst_examples.asp">VBScript 实例</a></li>
<li><a href="/example/aspe_examples.asp">ASP 实例</a></li>
<li><a href="/example/adoe_examples.asp">ADO 实例</a></li>
<li><a href="/svg/svg_examples.asp">SVG 实例</a></li>
<li><a href="/wap/wap_demo.asp" title="WAP 演示">WAP 实例</a></li>
</ul>
<h2>测验/考试</h2>
<ul>
<li><a href="/html/html_quiz.asp">HTML 测验</a></li>
<li><a href="/html5/html5_quiz.asp">HTML5 测验</a></li>
<li><a href="/xhtml/xhtml_quiz.asp">XHTML 测验</a></li>
<li><a href="/css/css_quiz.asp">CSS 测验</a></li>
<li><a href="/xml/xml_quiz.asp">XML 测验</a></li>
<li><a href="/js/js_quiz.asp">JavaScript 测验</a></li>
<li><a href="/jquery/jquery_quiz.asp">jQuery 测验</a></li>
<li><a href="/sql/sql_quiz.asp">SQL 测验</a></li>
<li><a href="/asp/asp_quiz.asp">ASP 测验</a></li>
<li><a href="/php/php_quiz.asp">PHP 测验</a></li>
</ul>
<h2>代码验证</h2>
<ul>
<li><a href="/site/site_validate.asp" title="网页验证">验证HTML</a></li>
<li><a href="/site/site_validate.asp" title="网页验证">验证CSS</a></li>
<li><a href="/site/site_validate.asp" title="网页验证">验证XHTML</a></li>
<li><a href="/site/site_validate.asp" title="网页验证">验证XML</a></li>
<li><a href="/site/site_validate.asp" title="网页验证">验证WML</a></li>
</ul>
</div>
<!-- 底部法律著作权说明 -->
<div id="footer">
<p id="p1">W3School简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
<p id="p2">
保留一切权利。赞助商：上海赢科投资有限公司。蒙ICP备06004630号
</p>
</div>
</div>
</body>
</html>(2)css样式如下:
/*整体*/
* {
padding: 0px;
margin: 0px;
border: 0px;
}
#homefirst {
text-align: center;
margin: 0px;
padding: 0px;
border: 0px;
background-color: #fdfcf8;
}
#wrapper {
margin: 0 auto;
padding: 0px;
border: 0px;
width: 1239px;
text-align: left;
background: transparent url(wrapper.png) top left repeat-y;
}
/*头部*/
#header_index {
margin: 0 0 0 12px;
padding: 0px;
width: 1210px;
height: 100px;
background: #fdfcf8;
}
#header_index h1 a {
text-indent: -9999px;
margin: 0px;
padding: 0px;
border: 0px;
}
#header_index h1 a:link,#header_index h1 a:visited {
display: block;
width: 372px;
height: 90px;
background: transparent url(bg.png) 0 -150px no-repeat;
}
#header_index h1 a:hover {
background: transparent url(bg.png) 0 -250px no-repeat;
}
#searchui {
margin: 0px;
padding: 0px;
width: 306px;
height: 100px;
float: right;
}
.box {
margin: 35px 0 0 0;
padding: 0px;
width: 256px;
height: 28px;
background-color: #fdfdfd;
font: 12px Verdana,Arial,Helvetica,sana-serif;
border: 1px solid #ddd;
}
.button {
padding: 0;
margin:0;
background-color: #AE4141;
font:12px Verdana,Arial,Helvetica,sana-serif;
color: #ffffff;
width: 30px;
height: 30px;
border: 1px solid;
}
/*主菜单*/
#navfirst {
height: 48px;
width: 1210px;
margin: 0 0 0 12px;
padding: 0;
border: 0;
background-color: #E8E7E3;
}
#menu {
height: 48px;
width: 1210px;
background: transparent url(bg.png) top left no-repeat;
margin: 0;
padding: 0;
position: relative;
}
#menu li {
margin: 0px;
padding: 0px;
list-style: none;
position: absolute;
top: 0px;
}
#menu a,#menu li {
display: block;
height: 48px;
border-bottom: 0px;
}
#menu li a {
text-indent: -9999px;
text-decoration: none;
}
#h {left: 0;width: 144px;}
#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;}
/*左侧菜单*/
#navsecond {
float: left;
margin: 0 0 0 12px;
padding: 0;
border: 0;
width: 180px;
background: transparent;
}
#homefirst div#navsecond h2:first-child, #homefirst div#sidebar h2:first-child {
margin:10px 0 0 0;
}
#navsecond h2,#sidebar h2 {
font-size: 14px;
padding: 10px 0 5px 10px;
color: #000;
display: block;
border-bottom: 0px solid #ddd;
font-family: "微软雅黑";
}
#navsecond ul {
padding: 0;
border: 0px;
margin: 0px;
}
#navsecond li,#sidebar li {
list-style: none;
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#navsecond li a,#sidebar li a {
display: block;
padding: 5px 0 5px 15px;
font-size: 12px;
border-bottom: 0px solid #ddd;
text-decoration: none;
}
#navsecond li a:link,#navsecond li a:visited {
text-decoration: none;
color: #000;
background: transparent;
}
#navsecond li a:hover {
text-decoration: none;
color: #fff;
background: #aaa;
}
#navsecond h2#link_about {
margin-top:20px;
margin-bottom:15px;
}
#navsecond h2#link_help {
margin-bottom:20px;
}
#navsecond h2#link_about a, #navsecond h2#link_help a {
display:inline;
padding:0;
font-size:14px;
border-bottom:0px solid #ddd;
text-decoration:none;
color:#0479A7;
}
#navsecond h2#link_about a:hover, #navsecond h2#link_help a:hover {
border-bottom:1px solid #0479A7;
color:#0479A7;
background-color:transparent;
}
/*中间祖逖内容*/
#maincontent
{
float: left;
margin: 0;
padding: 30px 0 0 0;
border: 0;
width: 850px;
background: transparent;
}
#homefirst #maincontent #d1
{
text-align:center;
}
#homefirst #maincontent .idea
{
padding: 0;
padding-bottom:30px;
min-height: 118px;
border-bottom: 1px solid rgb(170,170,170);
width: 810px;
}
#homefirst #maincontent #d1 h2
{
margin-top:35px;
font-size:24px;
}
#homefirst #maincontent #d1 p
{
margin-left:0;
font-size:18px;
}
#homefirst #maincontent #d2
{
background : transparent url(icon2.png) 0 0 no-repeat;
}
#homefirst #maincontent h3
{
margin-top:35px;
margin-left:110px;
font-size:24px;
}
#homefirst #maincontent p
{
font-size:16px;
margin-left:110px;
}
#maincontent p
{
margin: 12px 0 0 0;
line-height: 150%;
}
#homefirst #maincontent #d3
{
background : transparent url(icon3.png) 0 0 no-repeat;
}
#homefirst #maincontent #d4
{
background : transparent url(icon4.png) 0 0 no-repeat;
}
#homefirst #maincontent #d5
{
background : transparent url(icon5.png) 0 0 no-repeat;
}
#homefirst #maincontent #d6
{
background : transparent url(icon6.png) 0 0 no-repeat;
}
a:link, a:visited {
text-decoration : none;
color : #900b09;
background : transparent;
border-bottom:1px solid #900b09;
}
a:hover {
text-decoration : none;
color: #ff0000;
background : transparent;
border-bottom:1px solid #ff0000;
}
a:active {
text-decoration : none;
color : #ff0000;
background : transparent;
}
#homefirst #maincontent #d7
{
background : transparent url(icon7.png) 0 0 no-repeat;
}
#homefirst #maincontent #d8
{
background : transparent url(icon8.png) 0 0 no-repeat;
border:0px;
}
#homefirst #maincontent #d9, #homefirst #maincontent #d10 {
width:290px;
}
#homefirst #maincontent #d10 {
width:299px;
}
#homefirst #maincontent #d9, #homefirst #maincontent #d10 {
margin-left:75px;
margin-top:15px;
float:left;
border:0;
min-height:87px;
}
#homefirst #maincontent #d9 h3, #homefirst #maincontent #d10 h3 {
font-size:14px;
margin:23px 0 0 58px;
color:#777;
font-weight:400;
}
#homefirst #maincontent #d9 p, #homefirst #maincontent #d10 p {
font-size:14px;
margin:0 0 0 58px;
line-height:normal;
}
#d9 p a {
color:#000;
}
#homefirst #maincontent #d9 {
background: transparent url(icon9.png) top left no-repeat;
}
#homefirst #maincontent #d10 {
background: transparent url(icon10.png) top left no-repeat;
}
/*右侧菜单*/
#sidebar {
float: right;
margin: 0 16px 0 0;
padding: 0;
border: 0;
width: 180px;
background: transparent;
}
#sidebar li a:link,#sidebar li a:visited {
color: #900b09;
background: transparent;
}
#sidebar li a:hover {
background: #BD2D30;
color: #fff;
}
/*底部*/
#footer {
clear: both;
margin: 0px;
padding-top: 16px;
margin-left: 12px;
width: 1210px;
line-height: 24px;
border-top: 0px solid #fff;
background: #fdfcf8 url(footer.png) top left repeat-x;
font: PingFangSC-Regular,'微软雅黑',Verdana,Arial,'宋体';
}
#p1 {
font-size: 12px;
color: #777;
text-align: center;
background: transparent url(alert.png) no-repeat;
background-position: 235px 2px;
}
#p2 {
margin: 30px 0 30px 0;
font-size: 14px;
text-align: center;
color: #777;
}
(3)效果如下:
2.练习打字,已经完成.
今日总结
虽然网页做出来了,但是还是有些迷糊,要多练习.
扫一扫
559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
