POLO页面联系

最新推荐文章于 2024-08-15 10:47:57 发布

笨笨的猿

最新推荐文章于 2024-08-15 10:47:57 发布

阅读量164

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_43744966/article/details/106553303

版权

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>POLO360练习</title>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/Polo.css" />
	</head>
	<body>
		<!--创建头部div-->
		<div id="header" class="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 id="logo">
				<a href="#" title="这是一个测试性网站">
					<img src="img/logo.png" />
				</a>
			</div>	
		</div>
		<!--banner-->
		<div id="banner" class="w">
			<img src="img/banner/banner01.png" alt="这是banner的图片" />
			<!--创建一个超链接，用于放置导航按钮-->
			<div id="pointer">
				<a href="#"></a>
				<a href="#" id="active"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<div id="conten" class="w clearfix" >
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<div id="pl">
				<h2>Perfect Logic</h2>
				<p class="P1">All you want your website to do.</p>
				<div id="imgdiw">
					<img src="img/pic/pic1.jpg" />
				</div>
				<p id="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 explicab
				</p>
				<a  id="lm" href="#">Leam more</a>
			</div>
			<div id="cs">
				<h2>Complete Solution</h2>
				<p class="P1">A tool anything and everything you can think</p>
			    <div id="imgdiw">
					<img src="img/pic/pic2.jpg" />
				</div>
				<p id="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  id="lm" href="#">Leam more</a>
			</div>
			<div id="uc">
				<h2>Uber Culture</h2>
				<p class="P1">Fresh. Modern and ready for future</p>
			    <div id="imgdiw">
					<img src="img/pic/pic3.jpg" />
				</div>
				<p id="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  id="lm" href="#">Leam more</a>
			</div>
		</div>
		<div id="contack" class="w ">
			<div class="sc">
				<h2>Social Connection</h2>
			</div>
			<div class="co">
				<h2>Content</h2>
				<form action="#">  
					<input class="txt" type="text" />
					<input class="txt" type="text" />
					<textarea class="tarea"></textarea>
					<button class="btn">Send it</button>
				</form>
			</div>
			<div class="nu">
				<h2>News Updates</h2>
			</div>
		</div>
		<!--处理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,a,h1");</script>
		<![endif]-->
	</body>
</html>

Polo CSS

body{
	background: url(../img/bd-bg.png) repeat-x;
	height: 3000px;
}
.w{
	width: 940px;
	margin: 0 auto;
}
#header{
	padding-top: 37px;
	padding-bottom: 46px;
}
#logo{
	margin-left: 15px;
}
.nav{
	float: right;
	margin-top: 22px;
}
.nav li{
	float: left;
	/*设置内边距 上下为0，左右间距为10，下边10*/
	padding: 0 10px 8px;
	/*设置左边框*/
	border-left: 1px dotted;
}
.nav a{
	color: #666;
	font: 14px bold georgia;
	/*去除下划线*/
	text-decoration: none;
}
.nav a:hover{
	color: #a1a1a1;
	/*鼠标移入的时候出现下划线*/
	text-decoration: underline;
}
.nav p{
	color: #b7b7b7;
	font: 11px tahoma;
}
#banner{
	height: 356px;
	/*设置背景图片的阴影，且图片不平铺，位置是底部居中*/
	background: url(../img/banner-bg.png) no-repeat center bottom;
    /*开启相对定位，便于子元素pointer使用相对定位*/
    position: relative;
}
#pointer{
	/*开启pointer的绝对定位*/
	position: absolute;
	top: 314px;
	left: 15px;
}
#pointer a{
	float: left;
	height: 17px;
	width: 17px;
	margin-left: 4px;
	background: url(../img/pointer.png);
}
#pointer #active,#pointer a:hover{
	background: url(../img/pointer-active.png);
}
#conten h1{
	text-align: center;
	font: bold 24px Georgia;
	padding: 6px 0px 20px 0px;
	margin-bottom: 38px;
	/*h1下面的一条横线*/
	background: url(../img/line.png) no-repeat bottom center;
}
#pl,#cs,#uc,#contack .sc,#contack .co, #contack .nu{
	float: left;
	width: 300px;
}
#cs{
	margin: 0 20px;
}
/*解决高度塌陷问题*/
.clearfix:before,.clearfix:after{
	content: "";
	display: table;
	clear: both;
}
#conten h2{
	color: #11719e;
	font: 21px gadget;
}
#conten .P1{
	color: #8c8c8c;
	font: 12px helvetica;
}
#imgdiw{
	width:299px;
	height: 202px;
	background: url(../img/img-bg.png) no-repeat;
	margin: 16px 0px 10px 0px;
	text-align: center;
	padding-top: 12px;
}
#p2{
	height: 92px;
	font: 13px helvetica;
	color: #3e3e3e;
}
#conten #lm{
	display: block;
	width: 163px;
	height: 40px;
	background:url(../img/btn1.png) no-repeat;
	color: #016999;
	/*font: 12px/40px设置字体和行高*/
	font: 12px/40px helvetica;
	/*首行缩进*/
	text-indent: 1em;
	text-decoration: none;
	margin-bottom: 35px;
}
 #contack .sc,#contack .co,#contack .nu{
	background-color: #016999; 
}
#contack .txt{
	background: url(../img/input.png);
}

测试

笨笨的猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
POLO页面联系

HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>POLO360练习</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/Polo.css" /> </head> &
复制链接

扫一扫