利用HTML+CSS进行页面练习（3）

最新推荐文章于 2024-07-13 11:50:40 发布

爱学习的小八

最新推荐文章于 2024-07-13 11:50:40 发布

阅读量756

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/weixin_43788627/article/details/111407899

版权

利用HTML+CSS进行页面练习（3）

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>页面练习</title>
		<!--将外部CSS文件引入-->
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
	</head>
	<body>
		
		<!--头部文件开始-->
		<div class="header w">
			
			
			<!--创建一个导航条-->
			<div class="nav">
				<ul>
					<li>
						<a href="#">HOME</a>
						<p>Back to home</p>
					</li>
					<li>
						<a href="#">PRODUCTS</a>
						<p>What we have for you</p>
					</li>
					<li>
						<a href="#">SERVICES</a>
						<p>Things we do</p>
					</li>
					<li>
						<a href="#">BLOG</a>
						<p>Fellow our updates</p>
					</li>
					<li>
						<a href="#">CONTACT</a>
						<p>Ways to reach us</p>
					</li>
				</ul>
			</div>
			
		<!--设置logo-->	
		<div class="logo">
				<a href="#" title="这是一个好的网站">
					<img src="img/logo.png" alt="网站的logo"/>
				</a>
			</div>	
			
		</div>
		<!--头部文件结束-->
		
		
		<!--banner文件开始-->
		<div class="banner w">
			<img src="img/banner/banner01.png" alt="这是一张图片"/>
			<div class="poinerDIV">
				<a href="#"></a>
				<a class="active"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				
			</div>
		</div>
		<!--banner文件结束-->
		
		<!--content开始-->
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p cla

最低0.47元/天解锁文章

爱学习的小八

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
利用HTML+CSS进行页面练习（3）

利用HTML+CSS进行页面联系（2）HTML代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>页面练习</title>  <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" t
复制链接

扫一扫