用HTML加CSS模仿的W3school的主页
来源：互联网 发布：淘宝推荐系统 编辑：程序博客网 时间：2024/05/01 09:10
作为一个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;}
0 0
- 用HTML加CSS模仿的W3school的主页
- w3school的css手册
- W3School 的 HTML 快速参考
- http://www.w3school.com.cn 学习，参考HTML，CSS，XML等超好用的网站
- 来自 W3School 的 HTML 快速参考。
- 加載CSS樣式表的HTML
- html中css无法控制下拉框select显示的解决办法用div+css来模仿的实例
- 利用html 和css模仿必应搜索主页。（一）
- 【HTML】简单的公司主页
- HTML 加链接 回到主页
- 模仿亚马逊的主页，简单的实现了一些功能
- 模仿360主页实现的两种方法-frameset
- Android自定义View模仿QQ主页的开关
- 模仿tmall主页效果 做的一个轮播
- iOS 模仿Pokemon Go主页的动画Menu
- SpintNBA项目模仿笔记(二) 主页的一些设置
- 摘自w3school的HTML标签内容——基础标签
- 摘自w3school的html标签内容——格式标签
- java 读取文件方法大全
- 安装Eclipse Maven插件的几种方法
- 性能测试-LoadRunner初级
- 文章标题
- SSH协议基础
- 用HTML加CSS模仿的W3school的主页
- python数据结构学习笔记-2016-12-10-01-AVL树
- Android 渗透测试学习手册 第四章 对 Android 设备进行流量分析
- IntelliJ IDEA导航特性Top20
- 字符串的插入
- 接口测试-初级学习
- 字符串比较
- ＨＤＵ２５４６饭卡
- Android实现硬盘缓存
