前端学习笔记一：html（9）（练习）一个单纯的网页

最新推荐文章于 2023-03-15 21:31:17 发布

大一哟

最新推荐文章于 2023-03-15 21:31:17 发布

阅读量234

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107500854

版权

如题，算是有一个阶段小练习。
结果如图：
上半部分
在这里插入图片描述
下半部分：

可以看得出来就是把上次css的布局填上内容。
代码如下：
HTML文档：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>布局练习</title>
		<link rel="stylesheet" type="text/css" href="./css/CSS.css"/>
	</head>
	<body>
		<div id="header">
			<div class="head">
				<a href="#" class="navigation-first">BEANCMS</a>
				<a href="#" class="navigation">首页</a>
				<a href="#" class="navigation">关于我们</a>
				<a href="#" class="navigation">我们的服务</a>
				<a href="#" class="navigation">客户案例</a>
				<a href="#" class="navigation">联系我们</a>
				<img src="img/微博.png" class1="contact" height="25px">
				<img src="img/QQ.jpg" class="contact" height="25px">
				<span class="head">8888 0000</span>
			</div>
		</div>
		<div id="banner">
		</div>
		<div id="category">
			<div class="item first">
				<p class="line1">创意网站建设</p>
				<p class="line2"></