POLO360网站制作

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

阿牛大牛中

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

阅读量1.8k

点赞数 6

分类专栏： css html

本文链接：https://blog.csdn.net/weixin_46351593/article/details/105819822

版权

css 同时被 2 个专栏收录

16 篇文章 3 订阅

订阅专栏

html

16 篇文章 2 订阅

订阅专栏

文章目录

POLO360网页效果图
HTML代码
CSS代码

POLO360网页效果图

目前为止我们关于HTML和CSS的基础内容就差不多了，我们做一POLO360网页来巩固我们的知识，从实践中总结经验！！！我们看一下这次要做的网页：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w2DeDGdo-1588067178447)(/Users/mac/Desktop/MarkDown /polo360/polo360picture/1.png)]

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>
		
		<!--
			id class 文件 命名规范
				- 命名时尽量使用英文，如果不会可以使用拼音。
				- 命名格式：
					- 驼峰命名法：首字母小写，每个单词的开头字母大写。
					- 所有的字母都小写，单词之间使用_或-连接。
		-->
		
		<!--创建头部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，将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/banner1.png" alt="这是一个图片"/>
			
			<!--创建一个div，用于防止导航按钮-->
			<div class="pointerDiv">
				<a href="#"></a>
				<a href="#" 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-->
			
			
			<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 quaeab illo inventore veritatis et quasi architocto beatae vitae dicta sunt.
				</p>
				
				<a href="#" class="lm">Learn More</a>
			</div>

			
			
			<div class="cs">
				<h2>Compete Solution</h2>
				<p class="p1">All you want your website to do.</p>
				<!--创建图片的div-->
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="小女孩"/>
				</div>
				
				<p class="p2">
				Nemo qnim ipasam voluptatem quia voluptas sit aspernatur aut odit aut fugit,sed quia consequuntur magni dolores eos qui ratione volupatatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.
				</p>
				
				<a href="#" class="lm">Learn More</a>
			</div>
			
			
			
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">All you want your website to do.</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 href="#" class="lm">Learn More</a>
			</div>
			
		</div>
		<!--content结束-->
			
		<!--contact开始-->
		<div class="contact w clearfix">
			<!--创建三栏div-->
			<dic 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.jpg"/></a>
					<a href="#"><img src="img/fb.jpg"/></a>
					<a href="#"><img src="img/in.jpg"/></a>
					<a href="#"><img src="img/yt.jpg"/></a>
					<a href="#"><img src="img/tw.jpg"/></a>
				</div>
				
				<h2 class="nl">Newsletter</h2>
				
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</p>
				<input class="txt" type="text" placeholder="your name"/>
				<button class="btn">Subscribe</button>
			</dic>
			
			<!--联系栏中间部分-->
			<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 Upadas</h2>
				
				<p>
					<img src="img/1.jpg"/>
					Lorem ipsum dolor sit amet , consectetur adipidicing elit , sed do eiusmod tempor incididunt ut labore et  dolore  magna  aliqua.
				</p>
				<p>
					<img src="img/2.jpg"/>
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloreamque laudantium, totam rem aperiam.
				</p>
				<p class="no-margin">
					<img src="img/3.jpg"/>
					At vero eos et accusamus et iusto odio dignissimos ducimus qui blandtiis 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 VIVEOCKS.</p>
				<p><a href="">Home</a> | <a href="">About</a> | <a href="">Proudct</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结束-->
		
	</body>
</html>

CSS代码

/*
 * 在这里编辑主页样式表
 */

/*设置body*/
body{
	/*方便调试添加高度*/
	/*height:3000px;*/
	/*设置body的背景水平方向 重复*/
	background: url(../img/bd-bg.png) repeat-x;
}

/*解决高度塌陷问题的clearfix*/
.clearfix:before,
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}



/*固定元素的宽度和居中*/
.w{
	width: 940px;
	margin: 0 auto;
}
/*设置header*/
.header{
	/*设置背景颜色以便观察*/
	/*background-color: #bfa;*/
	/*设置上内边距使header垂直居中*/
	padding-top: 37px;
	/*设置下内边距*/
	padding-bottom: 49px;
}

.logo{
	/*设置logo的位置*/
	margin-left: 15px;
}
/*设置导航条*/
.nav{
	/*设置向右浮动*/
	float: right;
	/*设置上外边距*/
	margin-top: 21px;
}

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

.nav a{
	/*设置字体*/
	font: bold 14px sans-serif;
	/*设置字体颜色*/
	color: #666;
	/*去除下滑线*/
	text-decoration: none;
}

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


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

/*设置banner*/
.banner{
	/*设置高度*/
	height: 352px;
	/*设置背景*/
	background:  url(../img/banner/banner-bg.png) no-repeat bottom center;
	
	/*给banner开启相对定位*/
	position: relative;
}
/*设置导航按钮*/
.pointerDiv{
	/*开启绝对定位*/
	position: absolute;
	/*设置绝对定位坐标*/
	top: 314px;
	left: 15px;
}



.pointerDiv a{
	/*设置a浮动*/
	float: left;	
	/*设置宽高*/
	width: 17px;
	height: 17px;
	/*设置左外边距*/
	margin-left: 4px;
	/*设置背景*/
	background: url(../img/banner/pointer.png) no-repeat;
}
/*设置超链接的hover伪类*/
.pointerDiv .active,
.pointerDiv a:hover{
	background: url(../img/banner/pointer-active.png) no-repeat;
}

/*设置content部分*/
.content{
	/*background-color: red;*/
}

.content h1{
	/*设置文本居中*/
	text-align: center;
	/*设置字体*/
	font: bold 24px georgia ;
	/*设置上内边距*/
	padding: 5px 0px 20px 0px;
	/*设置下外边距*/
	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;
	/*height: 100px;*/
	width: 300px;
	/*background-color: yellow;*/
}
/*给div添加左右边距*/
.content .cs, .contact .co{
	margin: 0px 20px; 
}

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

.content .p1{
	color: #8c8c8c;
	font: 12px helvetica;
}
/*设置图片Div*/
.content .imgDiv{
	width: 299px;
	height: 195px;
	background: url(../img/img-bg.png) no-repeat;
	/*设置上下外边距*/
	margin: 12px 0px 8px 0px;
	/*设置水平方向居中*/
	text-align: center;
	/*设置上内边距*/
	padding-top: 18px;
}
/*设置第二个段落*/
.content .p2{
	height: 90px;
	color: #3e3e3e;
	font: 13px helvetica;
	/*设置文字间距*/
	word-spacing: 3px;
}

.content .lm{
	/*设置块元素*/
	display: block;
	/*设置宽高*/
	width: 163px;
	height: 38px;
	/*设置背景*/
	background: url(../img/btn1.png) no-repeat;
	/*取消下划线*/
	text-decoration: none;
	/*颜色*/
	color: #016999;
	/*设置文字*/
	font: 12px/38px helvetica;
	/*设置文字缩进*/
	text-indent: 1em;
	/*设置下外边距*/
	margin-bottom: 36px;
}

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

/*设置联系栏的高度背景颜色，用来观察，一会儿关掉*/
.contact .sc, .contact .co, .contact .nu{
	/*height: 500px;*/
	/*background-color: yellow;*/
}

/*设置练习栏中的表单项*/
.contact .txt{
	width: 276px;
	height: 33px;
	/*line-height: 33px;*/
	background:url(../img/input.png) no-repeat;
	
	/*去除默认边框*/
	border: none;
	/*去除默认的内边距*/
	padding: 0px 10px;
	margin: 0px 0px 16px 0px;
}

.contact .tarea{
	width: 276px;
	height: 114px;
	background: url(../img/testarea.png) no-repeat;
	
	/*去除默认边框*/
	border: none;
	/*去除滚动条*/
	overflow: auto;
	/*设置文本域不能调整大小*/
	resize:none;
	/*去除默认的内外边距*/
	padding: 10px 10px;
	margin: 0px;
}
	
.contact .btn{
	width: 163px;
	height: 32px;
	background: url(../img/btn2.png) no-repeat;
	border: none;
	/*去除默认的内外边距*/
	padding: 0px;
	margin: 11px 0px 23px 0px;
	
	/*设置字体*/
	color: white;
	font: 13px georgia;
	/*设置位置*/
	text-align: left;
	text-indent:1em ;
	
	
	/*cursor可以用来设置鼠标指针的样式*/
	cursor: pointer;
	
	
	
}
/*设置标题*/
.contact h2{
	color: #444;
	font: 18px/1 georgia;
	padding: 40px 0px 13px 0px;
	border-bottom: 1px dashed #d3d3d3;
	margin-bottom: 15px;
}


/*设置联系栏左侧*/
.sc .p1{
	color: #444;
	font: 12px/1 helvetica;
}

.sc .icon{
	/*设置字体大小为0去除空格*/
	font-size: 0px;
	/*设置往外边距*/
	margin-top: 5px;
}
.sc .icon a{
	margin-right: 7px;
}
/*设置左侧第二个标题*/
.sc .nl{
	font: bold 18px/1 "gill sans mt";
	
	/*设置内边距*/
	padding: 35px 0px 10px 0px;
	/*设置下外边距*/
	margin-bottom: 14px;
	
}
/*设置左侧的表单项*/
.sc .txt{
	margin-top: 14px;
	margin-bottom: 3px;
}

/*设置联系栏右侧*/

.nu p{
	color: #444;
	font: 12px/1 helvetica;
	height: 58px;
	
	border-bottom: 1px dashed #d3d3d3;
	
	padding-bottom: 8px;
	margin-bottom: 15px;
}

.nu img{
	/*向左浮动*/
	float: left;
	padding-right: 9px;
}
/*取消最后一个p标签的下外边距*/
.nu .no-margin{
	margin-bottom: 0px;
}

/*为最后一个按钮调整上外边距，使三个按钮水平*/
.nu .btn{
	margin-top:14px;
}
/*设置底部*/
.footer{
	background: #333;
	height: 173px;
	
	/*设置上边框*/
	border-top: 10px solid #4c4c4c;
}


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

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

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

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

.footer .copy{
	float: right;
}