html_css静态页面项目_polo360

最新推荐文章于 2024-09-09 16:03:21 发布

Sharpen__

最新推荐文章于 2024-09-09 16:03:21 发布

阅读量477

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/Sharpen__/article/details/108407974

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，引入reset.css用来清除浏览器的默认样式

<link rel="stylesheet" type="text/css" href="css/reset-min.css"/>

引入page-index.css 设置主页的样式

<link rel="stylesheet" type="text/css" href="css/page-index.css"/>

下面完成body标签的内容
header部分:
在这里插入图片描述

<!--创建头部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结束-->

对应的格式：

/*设置logo的位置*/
.logo{
	margin-left: 15px;//设置外边距15px
}

/*
 * 设置导航条
 */
.nav{
	/*设置向右浮动*/
	float: right;
	/*设置一个上外边距*/
	margin-top: 22px;
}

.nav li{
	/*设置向左浮动*/
	float: left;
	/*设置左右内边距*/
	padding: 0 10px 8px;
	/*设置左边框*/
	border-left: 1px #d6d6d6 dotted;
}

/*设置导航条中的超链接*/
.nav a{
	/*设置字体颜色*/
	color: #666;
	/*设置字体*/
	font: bold 14px Georgia;
	/*去除下划线*/
	text-decoration: none;
	
}

/*设置超链接的移入效果*/
.nav a:hover{
	color: #a1a1a1;
	text-decoration: underline;
}

/*
 * 设置导航中的小标题
 * 在chrome浏览器中字体最小支持到12px
 * 	1-11都显示为12px
 */
.nav p{
	/*字体颜色*/
	color: #b7b7b7;
	/*字体大小*/
	font: 11px tahoma;
}

banner部分：
在这里插入图片描述

<!--banner开始-->
		<div class="banner w">
			<img src="img/banner/banner01.png" alt="这是一个图片" />
			
			<!-- 创建一个div，用于放置导航按钮 -->
			<div class="pointerDiv">
				<a href="#"></a>
				<a class="active" href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<!--banner结束-->

对应的格式：

/*
 * 设置banner
 */
.banner{
	/*设置高度*/
	height: 356px;
	/*设置背景*/
	background: url(../img/banner-bg.png) no-repeat bottom center;
	/*开启一个相对定位*/
	position: relative;
}

/*设置导航按钮*/
.pointerDiv{
	/*开启绝对定位*/
	position: absolute;
	/*为导航点进行定位*/
	top: 314px;
	left: 15px;
}

.pointerDiv a{
	/*设置a浮动*/
	float: left;
	
	/*设置宽度和高度*/
	width: 17px;
	height: 17px;
	
	/*设置一个左外边距*/
	margin-left: 4px;
	
	background:url(../img/sprite.png) no-repeat;
}

/*设置超链接的hover*/
.pointerDiv .active,
.pointerDiv a:hover{
	background:url(../img/sprite.png) no-repeat -27px 0px;
}

Content部分：
在这里插入图片描述

<!--content开始-->
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<!-- 放置内容的三个div -->
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p class="p1">All you want your website to do.</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic1.jpg" alt="小男孩" />
				</div>
				
				<p class="p2">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt 
				</p>
				
				<a class="lm" href="#">Learn More</a>
			</div>
			
			
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="p1">A tool anything and everything you can think</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="小女孩" />
				</div>
				
				<p class="p2">
					Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				</p>
				
				<a class="lm" href="#">Learn More</a>
			</div>
			
			
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">Fresh. Modern and ready for future</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic3.jpg" alt="大绿球" />
				</div>
				
				<p class="p2">
					Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
				</p>
				
				<a class="lm" href="#">Learn More</a>
				
			</div>
		</div>
		<!--content结束-->

对应的格式：

/*设置content部分*/

.content h1{
	/*设置文本居中*/
	text-align: center;
	/*设置字体*/
	font: bold 24px Georgia;
	/*设置上内边距*/
	padding: 6px 0 20px 0;
	/*设置一个下外边距*/
	margin-bottom: 38px;
	/*设置背景*/
	background: url(../img/line.png) no-repeat bottom center;
}


/*
 * 中间的三个div
 */
.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu
{
	/*向左浮动*/
	float: left;
	width: 300px;
}

/*
 * 给div添加左右边距
 */
.content .cs , .contact .co {
	margin: 0 20px;
}

/*设置div中的标题*/
.content h2{
	color: #11719e;
	font: 21px Georgia;
}

.content .p1{
	color: #8c8c8c;
	font: 12px Helvetica;
}

/*设置图片div*/
.content .imgDiv{
	width: 299px;
	height: 190px;
	background: url(../img/img-bg.png) no-repeat;
	/*设置上下外边距*/
	margin: 16px 0px 10px 0px;
	/*设置水平居中*/
	text-align: center;
	/*设置上内边距*/
	padding-top: 12px;
}

/*设置第二个段落*/
.content .p2{
	height: 92px;
	color: #3e3e3e;
	font: 13px Helvetica;
	word-spacing: 2px;
}

/**
 * 设置按钮的样式
 */
.content .lm{
	/*设置块元素*/
	display: block;
	/*设置宽和高*/
	width: 163px;
	height: 40px;
	/*设置背景*/
	background: url(../img/sprite.png) no-repeat 0px -70px;
	/*设置下划线*/
	text-decoration: none;
	/*设置文字*/
	color: #016999;
	font: 12px/40px Helvetica ;
	/*设置文字的缩进*/
	text-indent: 1em;
	/*设置下外边距*/
	margin-bottom: 35px;
}

contract、footer部分：
在这里插入图片描述

<!--contact开始-->
		<div class="contact w clearfix">
			<!-- 创建三栏div -->
			<div class="sc">
				<h2>Social Connection</h2>
				<!-- 设置段落 -->
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<!-- 设置小图标的div -->
				<div class="icon">
					<a href="#"><img src="img/rss.png" /></a>
					<a href="#"><img src="img/fb.png" /></a>
					<a href="#"><img src="img/in.png" /></a>
					<a href="#"><img src="img/yt.png" /></a>
					<a href="#"><img src="img/tw.png" /></a>
				</div>
				
				<h2 class="nl">Newsletter</h2>
				
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				
				<!-- 创建一个表单 -->
				<form action="#">
					<input class="txt" type="text" placeholder="your email address" />
					<button class="btn">Subscribe</button>
				</form>
				
			</div>
			
			<!-- 联系栏中间 -->
			<div class="co">
				<!-- 创建一个标题 -->
				<h2>Contact</h2>
				<!-- 创建一个表单 -->
				<form action="#">
					<!-- 
						在文本框和文本域中可以通过placeholder来指定提示文字（水印）
						这个属性在IE8及以下的浏览器中不支持，如果要兼容IE8需要使用JS
					-->
					<input class="txt" type="text" placeholder="your name"  />
					<input class="txt" type="text" placeholder="your email address" />
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn">Send it</button>
				</form>
			</div>
			
			<div class="nu">
				<h2>News Updates</h2>
				<p>
					<img src="img/pic/1.gif"/>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				</p>
				<p>
					<img src="img/pic/2.gif"/>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</p>
				<p class="no-margin">
					<img src="img/pic/3.gif"/>
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
				</p>
				<button class="btn">Visit our Blog</button>
			</div>
			
		</div>
		<!--contact结束-->
		
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<p class="copy">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home</a>  | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
			</div>
		</div>
		<!--footer结束-->
		
		
		<!-- 处理ie6的png问题 -->
		<!--[if IE 6]>
			<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
			<script type="text/javascript">DD_belatedPNG.fix("div,img,a,h1");</script>
		<![endif]-->
	</body>
</html>

contract、footer尾部对应的css格式：

/*设置背景*/
.contact{
	background: url(../img/line.png) no-repeat top center;
}


/**
 * 设置联系栏中的表单项
 */
.contact .txt{
	width: 276px;
	height: 33px;
	line-height: 33px;
	/*
	 * 设置背景图片
	 */
	background: url(../img/input.png) no-repeat;
	/*单独为IE6设置一个背景不随元素滚动*/
	_background-attachment: fixed;
	
	/*
	 * 去除默认边框
	 */
	border: none;
	
	/*去除默认的内边距*/
	padding: 0px 10px;
	margin: 0px 0px 16px;
}

.contact .tarea{
	width: 276px;
	height: 114px;
	background: url(../img/textarea.png) no-repeat;
	/*单独为IE6设置一个背景不随元素滚动*/
	_background-attachment: fixed;
	/*
	 * 去除默认边框
	 */
	border: none;
	/*
	 * 去除滚动条
	 */
	overflow: auto;
	/*
	 * 设置文本域不能调整大小
	 */
	resize: none;
	
	/*
	 * 去除默认内外边距
	 */
	padding: 10px;
	margin: 0;
}

.contact .btn{
	width: 163px;
	height: 32px;
	background: url(../img/sprite.png) no-repeat 0px -27px;
	border: none;
	
	/*
	 * 去除默认内外边距
	 */
	padding: 0;
	margin: 11px 0px 23px;
	
	/*设置字体*/
	color: white;
	font: 13px Georgia;
	/*设置文字的位置*/
	text-align: left;
	text-indent: 1em;
	/*
	 * cursor可以用来设置鼠标指针的样式
	 */
	cursor:pointer ;
	
}

/*
 * 设置标题
 */
.contact h2{
	color: #444;
	font: 18px/1 georgia;
	/**
	 * 设置下边框
	 */
	border-bottom: 1px dashed #d3d3d3;
	/*
	 * 设置内边距
	 */
	padding: 44px 0px 10px;
	/*设置一个下外边距*/
	margin-bottom: 15px;
}

/*设置联系栏左侧*/
.sc .p1{
	color: #444;
	font: 12px/1 Helvetica;
}
/*设置小图标*/
.sc .icon{
	/*设置字体大小为0，去除空格*/
	font-size: 0;
	/*设置上外边距*/
	margin-top: 4px;
}

.sc .icon a{
	margin-right: 6px;
}

/*设置左侧的第二个标题*/
.sc .nl{
	font: bold 18px/1 "gill sans mt";
	
	/*设置内边距*/
	padding: 34px 0px 10px;
	
}

/*设置左侧的表单项*/
.sc .txt{
	/*设置上外边距*/
	margin-top: 15px;
	/*为ie6设置上外边距*/
	_margin-top: 18px;
	margin-bottom: 0px;
}

/*设置联系栏右侧*/

.nu p{
	color: #444;
	font: 12px/1 helvetica;
	height: 58px;
	/*单独为IE6设置一个高度*/
	_height: 60px;
	/**
	 * 设置下边框
	 */
	border-bottom: 1px dashed #d3d3d3;
	
	margin-bottom: 14px;
	padding-bottom: 9px;
}

.nu .no-margin{
	margin-bottom: 0px;
}

.nu img{
	/*设置向左浮动*/
	float: left;
	margin-right: 8px;
	
}

.nu .btn{
	_margin-left: -1em;
}

/*设置底部*/
.footer{
	height: 173px;
	background: #333;
	/*设置上边框*/
	border-top: 10px solid #4c4c4c;
}

/*
 * 设置底部的文字的样式
 */
.footer a , .footer p{
	color: #999;
	font: 11px Helvetica ;
	text-decoration: none;
}

/*
 * 设置a元素的hover
 */
.footer a:hover{
	color: #cccaca;
	text-decoration: underline;
}

.footer p{
	margin-left: 8px;
	margin-right: 23px;
	margin-bottom: 6px;
}

.footer .w{
	padding-top:18px ;
}

.footer .copy{
	float: right;
	/*处理双倍边距的bug*/
	display: inline;
}