HTML+CSS的项目练习

Cherry_Zj

于 2021-05-16 10:54:58 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/Cherry_Zj/article/details/116884666

这篇博客介绍了HTML和CSS在项目中的应用，强调了ID、class和文件的命名规范，提倡使用驼峰命名法或下划线/破折号连接。还提到了在文本框中的占位符属性及其在不同浏览器的兼容性问题，以及Chrome中最小字体大小的限制。此外，文章讨论了IE6的双倍边距bug，并提供了解决方案。

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

效果图：
在这里插入图片描述
HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>polo360练习</title>
		<!--引用reset.css用来清除浏览器的默认样式-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--引入page-index-->
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
	</head>
	<body>
		<!--创建头部div header-->
		<!--header的开始-->
		<div class="header w">
			<!--创建一个导航条-->
			<ul class="nav">
				<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>follow 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>
		<!--header结束-->
		
		<!--banner开始-->
		<div class="banner w">
			<img src="img/banner/banner01.png"