用HTML加CSS模仿的W3school的主页

最新推荐文章于 2022-04-12 11:12:51 发布

原创

最新推荐文章于 2022-04-12 11:12:51 发布 · 4.2k 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

本文记录了一位HTML和CSS初学者模仿W3school主页的过程，虽然不尽相同，但作为首次尝试，作者感到兴奋。文章中，作者希望能得到关于如何改进头部导航栏间距以及博客写作的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个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 hr