用HTML加CSS模仿的W3school的主页

作为一个HTML和CSS的初学者，我模仿了一个比较简单的静态网页，就是W3school的主页，虽然有些内容以我目前的能力还没有做到一模一样，但这是我第一次自己动手做的网页，我还是很开心的。如果有人看了我这篇文章，希望给我一点建议让我完善这个网页。比如除了加空格外如何让头部导航栏的无序列表的列表项之间隔的更宽，另外这算是我第一次用心的写博客，希望大家给我一些建议，谢谢！！

这是W3school官网的主页

这是我的网页

接下来就是我的HTML文件

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="ws.css"><title>w3school在线教程</title>
</head>
<body><div id="frame"><div id="top"><a href="#" class="first"><img src="w3.png"></a><ul><li><a href="#" title="HTML 系列教程">HTML / CSS</a>   </li><li><a href="#" title="浏览器脚本教程">JavaScript</a></li><li><a href="#" title="服务器脚本教程">Server Side</a>   </li><li><a href="#" title="ASP.NET 教程">ASP.NET</a>   </li><li><a href="#" title="XML 系列教程">XML</a>   </li><li><a href="#" title="Web Services 系列教程">Web Services</a>   </li><li><a href="#" title="建站手册">Web Building</a></li></ul></div><div id="main"><div id="left"><ul><li class="second">HTML教程</li><li><a href="#">HTML</a></li><li><a href="#">HTML5</a></li><li><a href="#">XHTML</a></li><li><a href="#">CSS</a></li><li><a href="#">CSS3</a></li><li><a href="#">TCP/IP</a></li></ul><ul><li class="second">浏览器脚本</li><li><a href="#">JavaScript</a></li><li><a href="#">HTML DOM</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery Mobile</a></li><li><a href="#">AJAX</a></li><li><a href="#">JSON</a></li><li><a href="#">DHTML</a></li><li><a href="#">E4X</a></li><li><a href="#">WMLScript</a></li></ul><ul><li class="second">服务器脚本</li><li><a href="#">PHP</a></li><li><a href="#">SQL</a></li><li><a href="#">ASP</a></li><li><a href="#">ADO</a></li><li><a href="#">VBScript</a></li></ul><ul><li class="second">XML教程</li><li><a href="#">XML</a></li><li><a href="#">DTD</a></li><li><a href="#">XML DOM</a></li><li><a href="#">XSL</a></li><li><a href="#">XSLT</a></li><li><a href="#">XSL-FO</a></li><li><a href="#">XPath</a></li><li><a href="#">XQuery</a></li><li><a href="#">XLink</a></li><li><a href="#">XPointer</a></li><li><a href="#">Schema</a></li><li><a href="#">XForms</a></li><li><a href="#">WAP</a></li><li><a href="#">SVG</a></li></ul><ul><li class="second">Web Services</li><li><a href="#">Web Services</a></li><li><a href="#">WSDL</a></li><li><a href="#">SOAP</a></li><li><a href="#">RSS</a></li><li><a href="#">RDF</a></li></ul><ul><li class="second">.NET</li><li><a href="#">ASP.NET</a></li><li><a href="#">Web Pages</a></li><li><a href="#">Razor</a></li><li><a href="#">MVC</a></li><li><a href="#">Web Forms</a></li></ul><ul><li class="second">建站手册</li><li><a href="#">网站构建</a></li><li><a href="#">万维网联盟（W3C）</a></li><li><a href="#">浏览器信息</a></li><li><a href="#">网站品质</a></li><li><a href="#">语义网</a></li><li><a href="#">职业规划</a></li><li><a href="#">网站主机</a></li><li><a href="#">网络媒体</a></li></ul><div ><a href="#">关于W3School</a></div><div><a href="#">帮助W3School</a></div></div><div id="middle"><div id="yi"><h2>领先的Web技术教程-全部免费</h2><p>在w3school，你可以找到你所需要得所有网站建设教程。</p><p>从基础的HTML到CSS，乃至进阶的XML、SQL、JS、PHP和ASP.NET。</p><h3>从左侧菜单选择你需要的教程！</h3></div><div id="er"><img src="s1.png"  align="left"><h3>完整的网站技术参考手册</h3><p>我们的参考手册涵盖了网站技术的方方面面。</p><p>其中包括W3C的标准技术：HTML、CSS、XML 。以及其他的技术，诸如JavaScript、PHP、SQL等等。</p></div><div id="san"><img src="s2.png" align="left"><h3>在线实例测试工具</h3><p>在w3school，我们提供上千个实例。</p><p>通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验。</p></div><div id="si"><img src="s3.png" align="left"><h3>快捷易懂的学习方式</h3><p>一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。</p><p>在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</p></div><div id="wu"><h3>从何入手？</h3><p>什么是一个Web建设者需要学习的知识呢？</p><p>W3School将为您回答这个问题，在您成为专业Web开发者的路上助一臂之力，从而更好地应对未来的挑战。</p><p>如果您是初学者，请您阅读<<<a href="#">网站构建初级教程</a>>>。</p><p>如果您是开发者，请您阅读<<<a href="#">网站构建高级教程</a>>>。</p></div><div id="liu"><h3>W3School新闻</h3><p><a href="#">CSS3参考手册</a>以上线，敬请批评指正。</p></div><div id="qi"><h3>W3School更新信息</h3><p><a href="#">参考手册：PHP Calendar函数</a>  <a href="#">参考手册：PHP Date/Time函数</a>  <a href="#">教程：HTML教程</a></p></div><div id="ba"><h3>W3School友情链接</h3><p><a href="#">Firefox 中文社区</a>  <a href="#">W3C中国总部</a>  <a href="#">w3ctech</a></p></div></div><div id="right"><form><label>SEARCH:</label><br><input type="text" size="11"><button type="submit">GO</button></form><ul><li class="second">参考手册</li><li><a href="#">HTML/HTML5标签</a></li><li><a href="#">HTML颜色</a></li><li><a href="#">CSS 1,2,3</a></li><li><a href="#">JavaScript</a></li><li><a href="#">HTML DOM</a></li><li><a href="#">JQuery</a></li><li><a href="#">JQuery Mobile</a></li><li><a href="#">VBScript</a></li><li><a href="#">ASP</a></li><li><a href="#">ADO</a></li><li><a href="#">ASP.NET</a></li><li><a href="#">PHP 5.1</a></li><li><a href="#">XML DOM</a></li><li><a href="#">XSLT 1.0</a></li><li><a href="#">XPath 2.0</a></li><li><a href="#">XSL-FO</a></li><li><a href="#">WML 1.1</a></li><li><a href="#">W3C 术语表</a></li></ul><ul><li class="second">字符集</li><li><a href="#">HTML字符集</a></li><li><a href="#">HTML ASCII</a></li><li><a href="#">HTML ISO-8859-1</a></li><li><a href="#">HTML符号</a></li></ul><ul><li class="second">实例/案例</li><li><a href="#">HTML实例</a></li><li><a href="#">CSS实例</a></li><li><a href="#">XML实例</a></li><li><a href="#">JavaScript实例</a></li><li><a href="#">JavaScript对象实例</a></li><li><a href="#">HTML DOM实例</a></li><li><a href="#">jQuery实例</a></li><li><a href="#">jQuery Mobile实例</a></li><li><a href="#">XML DOM实例</a></li><li><a href="#">DHTML实例</a></li><li><a href="#">AJAX实例</a></li><li><a href="#">VBScript实例</a></li><li><a href="#">ASP实例</a></li><li><a href="#">ADO实例</a></li><li><a href="#">SVG实例</a></li><li><a href="#">WAP实例</a></li></ul><ul><li class="second">测试/考试</li><li><a href="#">HTML测试</a></li><li><a href="#">HTML5测试</a></li><li><a href="#">XHTML测试</a></li><li><a href="#">XML测试</a></li><li><a href="#">JavaScript测试</a></li><li><a href="#">jQuery测试</a></li><li><a href="#">SQL测试</a></li><li><a href="#">ASP测试</a></li><li><a href="#">PHP测试</a></li></ul><ul style="padding-bottom:25px"><li class="second">代码验证</li><li><a href="#">验证HTML</a></li><li><a href="#">验证CSS</a></li><li><a href="#">验证XHTML</a></li><li><a href="#">验证XML</a></li><li><a href="#">验证WML</a></li></ul></div></div><div id="footer"><p>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。当使用本站时，代表您已接受了本站的使用条款和隐私条款。版权所有，保留一切权利。 赞助商：上海赢科投资有限公司。 蒙ICP备06004630号</p></div></div>
</body>
</html>

我的ＣＳＳ文档

body{margin:0px;font-family:'微软雅黑';font-size:12px;padding:0px;
}#frame{margin:0px 120px 0px 100px;border-left:2px solid #bbbbbb;border-right:3px solid #555555;
}
#top .first{padding-left:10px;
}
#top ul li{display:inline;
}
#top li a{padding-left:0px;color:gray;font-size:20px;text-decoration:none;
}}
#top li a:link{text-decoration:none;
}
#top li a:hover{border-bottom-color:#990033;border-bottom-width:3px;border-bottom-style:solid;
}#left{width:170px;margin-left:10px;padding-left:0px;float:left;margin-right:10px;
}
#left li{list-style-type:none;
}
#left a{text-decoration:none;color:black;
}
#left li a:hover{border-bottom-color:black;border-bottom-width:1px;border-bottom-style:solid;
}
#left div a{color:#007e7e;font-weight:bold;padding-left:15px;line-height:1.3em;
}
#left p a:hover{border-bottom:1px solid #007e7e;
}
.second{font-weight:bold;
}
#middle{float:left;border-top:1px solid #cccccc;border-bottom:1px solid #cccccc;width:740px;
}#right{width:170px;float:left;margin-left:10px;}
#right li{list-style-type:none;position:relative;right:28px;
}
#left li{position:relative;right:23px;
}
#right li a{color:#990033;
}
#right li a:hover{color:red;
}
#footer{clear:left;background-color:#aaaaaa;margin-left:10px;margin-right:10px;position:relative;top:10px;
}
form{padding-top:20px;padding-left:10px;
}
form label{line-height:1.5em;letter-spacing:2px;
}
#yi{text-align:center;border-bottom:2px solid #cccccc;padding-bottom:10px;line-height:2em;
}
#er,#san,#si,#wu,#liu,#qi{border-bottom:2px solid #cccccc;padding-bottom:25px;
}
#ba{padding-bottom:25px;
}
#liu a,#qi a,#wu a{color:#990033;
}
#liu a:hover,#qi a:hover,#wu a:hover{color:red;
}
#ba a{color:#007e7e;
}
#san{padding-left:15px;
}
#si{padding-left:8px;
}

用HTML加CSS模仿的W3school的主页相关推荐

div css标记,前端初学者必学的div加css标签
原标题:前端初学者必学的div加css标签今天给大家分享前端初学者必须要学习的标签,这些标签你都会了吗? DIV加css标签页头:header 登录条:loginBar 标志:logo 侧栏:si ...
html css模仿实例,HTML+CSS模仿大学网站主页
[实例简介] 用HTML+CSS模仿的大学主页无JS 无FLASH 没有添加超链接 [实例截图] [核心代码] pp5740492_4445056 ├── images │ ├── 01_hov ...
html加css做成的简易木马轮播图
html加css做成的简易木马轮播图自己做着当练习的,还没有加js切页效果代码如下: <!DOCTYPE html> <html lang="en"> ...
在HTML中表示内嵌CSS样式的标记,html怎么加css样式
html怎么加css样式?下面本篇文章就来给大家介绍一下在HTML中添加CSS样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.行内式(使用style属性,在HTML标 ...
如何在php中加样式,vue如何给组件加css样式,php中加入css样式
vue如何给组件加css样式哇如何给组件加钢性铸铁样式,某视频剪辑软件给组件加钢性铸铁样式的方法:首先在[.vue]文件中设置相关代码:然后新建[index.js]文件,并建立对应的[record.s ...
H5+JS+CSS模仿JD商品详情页放大镜效果
源码下载:H5+JS+CSS模仿JD商品详情页放大镜效果-Javascript文档类资源-CSDN下载适合小白模仿的H5+JS+CSS模仿JD商品详情页放大镜效果,可以熟练掌握鼠标经过和鼠标移动事件更 ...
遥控器页面html,CSS模仿遥控器按钮
注:本demo在小程序环境中测试,其他h5,pc网页通用,只需将小程序单位和标签名改成通用的即可,并按照自己的需求做适配即可. 大体思路:四个相同的正方形田字形布局,配合旋转属性即可. html结构 ...
信息管理系统平台html加css漂亮后台模板
信息管理系统平台,html加css漂亮后台模板,动画效果黑色大气的登录页面,后台包括主页面板,表单布局,布局表格组件,图片墙.日历.后台聊天组件,403.404.405等错误页面漂亮模板,还有多种按钮 ...
高手教你ie主页被篡改怎么办|加个参数永远不怕IE主页被修改
篡改IE默认主页是恶意网站和病毒惯用的手法,目的是为了增加其网站流量,并偷偷安装木马.下面告诉大家一个绝招,即使病毒修改了你的主页也没用,最后讲述清除恶意主页的办法. 加个参数一劳永逸不怕IE主页被篡 ...

用HTML加CSS模仿的W3school的主页

用HTML加CSS模仿的W3school的主页相关推荐

最新文章

热门文章