Polo360网站页面制作练习

最新推荐文章于 2022-04-30 17:55:47 发布

mufengs16

最新推荐文章于 2022-04-30 17:55:47 发布

阅读量793

点赞数 2

分类专栏： html&css 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/qq_44087363/article/details/107396379

版权

本文介绍了Polo360网站页面的制作过程，涉及HTML源码和CSS源码的编写。重点讲解了reset.css的使用、选择器分组、背景属性、font属性、浮动清除以及表单元素的应用。通过这次练习，作者强调了基础网页制作的重要性，以及反复练习对巩固知识的必要性。

摘要由CSDN通过智能技术生成

页面效果

HTML源码

<!DOCTYPE html>
<html>
    <head>
         <title>Polo360</title>
		 <meta charset="utf-8">
		 <link rel="stylesheet" type="text/css" href="../css/reset.css">
		 <link rel="stylesheet" type="text/css" href="../css/index.css">
	</head>
	<body>
         <!--header开始-->
		 <div class="header  g  clearfix">
			     <div  class="nav">
						<ul>
							    <li><a  href="#hone">HOME</a>
							    <p>Back to home</p>
								</li>
							    <li><a  href="#PRODUCTS">PRODUCTS</a>
							    <p>What we have for you</p>
								</li>
								<li><a  href="#SERVICES">SERVICES</a>
							    <p>Things we do</p>
								</li>
								<li><a  href="#BLOG">BLOG</a>
								<p>Follow our updates</p>
								</li>
								<li><a  href="#hone">CONTACT</a>
								<p>Ways to reach us</p>
								</li>
						</ul>
				</div>
			    <div class="logo">
							     <img src="../image/polo360.png" alt="polo360 logo">
			     </div>
		</div>
		<!--header结束-->
				
		<!--banner开始-->
		<div class="banner g clearfix">
			    <img src="../image/banner.png" alt="banner"/>   
			    <div class="makepoint">
					 <a href="#1" class="runpoint"></a>
					 <a href="#2" class="activepoint"></a>
		             <a href="#3"  class="runpoint"></a>
			         <a href="#4"  class="runpoint"></a>
					 <a href="#5"  class="runpoint"></a>
			     </div>
				 <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
		</div>
		<!--banner结束-->
				
		<!--content开始-->
		 <div class="content g clearfix">
				 <div class="pl">
					     <h3>Perfect Logic</h3>
					     <p class="p1">All you want your website to do</p>
					     <div class="boy">
								 <img src="../image/backboy.png"