(2)polo360页面实现

进阶路

已于 2022-04-30 19:03:28 修改

阅读量986

点赞数 1

分类专栏：前端之HTML和CSS基础文章标签： css

于 2022-04-30 17:55:47 首次发布

本文链接：https://blog.csdn.net/Q_999999/article/details/124516165

版权

前端之HTML和CSS基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

注意点：

1、当有行内块元素出现，或者将元素的display属性设置为inline-block时，代码中的换行或者空格在页面中会显示一段空白。

若想去除，就得设置浮动。

2、在浏览器中，每个元素都有一定的默认值，有些是padding，有些是margin，记得将这些值重置，否则会出现在一个浏览器效果很好，在另一个浏览器布局混乱的现象。

3、在页面中设置字体样式时，对应的行高也要设置，因为浏览器对行间距也是有一定的默认值，最终会导致布局混乱，行高如下面这样设置即可：

font: 24px/1em Georgia;

对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以使单行文本在父元素中垂直居中。

目录结构：

polo.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/polo.css" />
	</head>
	<body>
		<!--header开始-->
		<div class="header w">
			<!--网页导航栏-->
			<div class="nav">
				<ul>
					<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="#"><img src="img/logo.png" /></a>
			</div>
		</div>
		<!--header结束-->
		
		<!--content开始-->
		<div class="content w">
			<!--内容区banner-->
			<div class="banner">
				<div class="banner-img">
					<img src="img/banner.jpg"  alt="这是banner"/>
				</div>
				<div class="poingter">
					<a href="#"></a>
					<a href="#"><img  src="img/pointer-active.png"/></a>
					<a href="#"></a>
					<a href="#"></a>
					<a href="#"></a>
				</div>
			</div>
			
			<!--内容区标题-->
			<div class="title w">
				<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			</div>
			
			<!--内容区pl cs uc-->
			<div class="info clearfix">
				<div class="pl">
					<h2>Perfect Logic</h2>
					<p class="p1">All you want your website to do.</p>
					<img src="img/new-pl.png" />
					<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 explicabo.</p>
					<a href="#"><button class="info-btn">Learn More</button></a>
				</div>
				
				<div class="cs">
					<h2>Complete Solution</h2>
					<p class="p1">A tool anything and everything you can think</p>
					<img src="img/new-cs.png" />
					<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 href="#"><button class="info-btn">Learn More</button></a>
				</div>
				
				<div class="uc">
					<h2>Complete Solution</h2>
					<p class="p1">Fresh. Modern and ready for future</p>
					<img src="img/new-uc.png" />
					<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="#"><button class="info-btn">Learn More</button></a>
				</div>
			</div>
		
			<!--内容区so co ne-->
			<div class="connect clearfix">
				<div class="so">
					<h2>Social Connection</h2>
					<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
					<div class="icon clearfix">
						<a href="#"><img src="img/wifi.png"/></a>
						<a href="#"><img src="img/face.png"/></a>
						<a href="#"><img src="img/inin.png"/></a>
						<a href="#"><img src="img/yuotu.png"/></a>
						<a href="#"><img src="img/bishou.png"/></a>
					</div>
					<h2 class="so-new">Newsletter</h2>
					<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
					<form>
						<input class="txt" type="text" placeholder="your email address" />
						<a href="#"><button class="connect-btn">Subscribe</button></a>
					</form>
					
					
				</div>
				<div class="co">
					<h2>Contact</h2>
					<form>
						<input class="txt" type="text" placeholder="your name"/>
						<input class="txt" type="text" placeholder="your email address" />
						<textarea class="texta" placeholder="message"></textarea>
						<a href="#"><button class="connect-btn">Send it</button></a>
					</form>
				</div>
				
				<div class="ne">
					<h2>News Updates</h2>
					<div class="list-news">
						<div class="huohu">
							<img src="img/huohu.jpg" alt="huohu" >
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
						</div>
						<div class="huohu">
							<img src="img/fenqiu.jpg" alt="fenqiu" >
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
							
						</div>
						<div class="huohu no-nottom">
							<img src="img/caise.jpg" alt="caise" >
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
						</div>
					</div>
					
					<a href="#"><button class="connect-btn">Visit our Blog</button></a>
				</div>
			</div>
		</div>
		<!--content结束-->
		
		<!--footer开始-->
		<div class="footer">
			<div class="w">
				<div class="footer-right">
				Copyright 2010. Studio VIVROCKS. All Rights Reserved.
			</div>
			<div class="footer-left">
				Site Powered by Wordpress. Design and Developed by VIVROCKS.<br />
				Home | About | Products | Services | Contact<br />
				Privacy Policy | Terms of use
			</div>
			</div>
			
		</div>
		<!--footer结束-->
	</body>
</html>

reset.css:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-weight: normal;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{
  display: block;
}
ol, ul, li{
  list-style: none;
}
blockquote, q{
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
  content: '';
  content: none;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
}
 
/* custom */
a{
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece{
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html, body{
  width: 100%;
  font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
  line-height: 1;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
  overflow-y: scroll;
}
 
/*清除浮动*/
.clearfix:before,
.clearfix:after{
  content: " ";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix{
  *zoom: 1;
}
 
/*隐藏*/
.dn{
  display: none;
}

polo.css

/*设置body的背景颜色*/
body{
	background: url(../img/bg.png) repeat-x;
}
/*设置网页固定宽度*/
.w{
	width: 940px;
	margin: 0 auto;
}
.header .logo{
	padding: 37px 0 46px 15px;
}
/*设置导航栏*/
.nav a{
	color: #666;
	font: 14px Georgia;
}
.nav a:hover{
	color: #0d0d0d;
	text-decoration: underline;
}
.nav p{
	color: #b7b7b7;
	font: 11px Tahoma;
}
/*设置导航栏浮动*/
.nav ul{
	float: right;
	padding: 59px 12px 0 0;
}
.nav ul li{
	float: left;
	padding: 0 9px 0 10px;
	border-left: 1px dashed #d6d6d6;
}
/*设置banner的pointer*/
.banner{
	position: relative;
}
.banner .banner-img{
	height: 355px;
	background: url(../img/banner-bg.png) no-repeat bottom center;
}
.banner .poingter{
	position: absolute;
	left: 19px;
	bottom: 26px;
}
.poingter a{
	width: 17px;
	height: 17px;
	float: left;
	padding-right: 4px;
	background: url(../img/pointer.png) no-repeat;
}
.poingter a:hover{
	background: url(../img/pointer-active.png) no-repeat;
}
/*设置内容区标题*/
.content .title{
	color: #000;
	font: 24px/1em Georgia;
	text-align: center;
	margin-top: 11px;
	
}
.title h1{
	padding-bottom: 21px;
	background: url(../img/title-break.png) no-repeat bottom center;
	margin-bottom: 31px;
}
.info .pl,.info .cs,.info .uc{
	width: 300px;
	float: left
}
.info .cs{
	margin: 0 20px;
}
.info h2{
	color: #11719e;
	font: 21px/1em Georgia;
	padding-left: 3px;
}
.info .p1{
	color: #8c8c8c;
	font: 12px/1em Tahoma;
	margin-bottom: 13px;
	padding-left: 3px;
}
.info .p2{
	color: #3e3e3e;
	font: 13px/1em Tahoma;
	margin: 10px 0 16px 3px;
}
.info .info-btn{
	width: 163px;
	height: 40px;
	background: url(../img/btn.png) center center;
	border: none;
	color: #016999;
	font: 12px/1em Tahoma;
	text-align: left;
	text-indent: 1em;
	margin-bottom: 31px;
}
/*设置内容区联系栏*/
.clearfix{
	content: "";
	display: table;
	clear: both;
}
.connect{
	background-color: #016999;
	padding-top: 42px;
	background: url(../img/img-break.png) no-repeat top center;
}
.connect .so,.connect .co,.connect .ne{
	width: 300px;
	float: left;
}
.connect .co{
	margin: 0 20px;
}
.connect h2{
	color: #444;
	font: 18px/1em Georgia;
	padding-bottom: 9px;
	border-bottom: 1px dashed #D3D3D3;
	margin-bottom: 15px;
	
}
.connect .connect-btn{
	width: 163px;
	height: 32px;
	background: url(../img/subscribe.png) center center;
	border: none;
	text-align: left;
	color: #fff;
	text-indent: 1em;
	margin-top: 14px;
	margin: 14px 0 23px 0;
}
.so p{
	color: #444;
	font: 12px/1em Tahoma;
	clear: both;
	padding-bottom: 9px;
}
.so .so-new{
	color: #444;
	font: 18px/1em "Gill Sans MT";
	margin-top: 32px;
}
.so .txt{
	width: 278px;
	height: 33px;
	background: url(../img/input.png) no-repeat;
	border: none;
	padding: 0 9px;	/*设置文字不贴边*/
	/* margin-bottom: 14px; */
}
.icon a{
	float: left;
}
.co .txt{
	width: 278px;
	height: 33px;
	background: url(../img/input.png) no-repeat;
	border: none;
	margin: 0 0 16px 0;
	padding: 0 9px;	/*设置文字不贴边*/
}
.co .texta{
	width: 278px;
	height: 117px;
	background: url(../img/textarea.jpg) no-repeat;
	border: none;
	/*去除滚动条*/
	overflow: auto;
	/*设置文本域不能调整大小*/
	resize: none;
	padding: 9px 9px;	/*设置文字不贴边*/
}
.ne img{
	float: left;
	margin-right: 7px;
}
.ne p{
	color: #444;
	font: 12px/1em Tahoma;
	height: 58px;
	
}
.huohu{
	padding-bottom: 9px;
	border-bottom: 1px dashed #D3D3D3;
	margin-bottom: 15px;
}
.list-news .no-nottom{
	margin-bottom: 0;
}
/*设置底部*/
.footer{
	background: #333;
	border-top: 10px solid #4c4c4c;
	clear: both;
}
.footer .footer-left{
	padding: 27px 0 104px 8px;
	color: #999;
	font: 11px Tahoma;
	line-height: 20px;
}
.footer .footer-right{
	float: right;
	padding: 27px 23px 0 0;
	color: #999;
	font: 11px Tahoma;
	/* width: 960px; */
	margin: 0 auto;
}

进阶路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(2)polo360页面实现

目录结构：polo.html:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css" /> <link rel="stylesheet" type="text/css" href="css
复制链接

扫一扫