POLO360网站制作
文章目录
- POLO360网页效果图
- HTML代码
- CSS代码
POLO360网页效果图
目前为止我们关于HTML和CSS的基础内容就差不多了，我们做一POLO360网页来巩固我们的知识，从实践中总结经验！！！我们看一下这次要做的网页：
HTML代码
<html>
<head>
<meta charset="utf-8" />
<title>POLO360练习·title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
head>
<body>
<div class="header w">
<ul class="nav">
<li>
<a href="#">HOMEa>
<p>Back to homep>
li>
<li>
<a href="#">PRODUCTSa>
<p>What we have for youp>
li>
<li>
<a href="#">SERVICESa>
<p>Things we dop>
li>
<li>
<a href="#">BLOGa>
<p>Follow our updatesp>
li>
<li>
<a href="#">CONTACTa>
<p>Ways to reach usp>
li>
ul>
<div class="logo">
<a href="#" title="一个非常非常好的网站！！">
<img src="img/logo.png" alt="网站的logo"/>
a>
div>
div>
<div class="banner w">
<img src="img/banner/banner1.png" alt="这是一个图片"/>
<div class="pointerDiv">
<a href="#">a>
<a href="#" class="active">a>
<a href="#">a>
<a href="#">a>
<a href="#">a>
div>
div>
<div class="content w clearfix">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elith1>
<div class="pl">
<h2>Perfect Logich2>
<p class="p1">All you want your website to do.p>
<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 Morea>
div>
<div class="cs">
<h2>Compete Solutionh2>
<p class="p1">All you want your website to do.p>
<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 Morea>
div>
<div class="uc">
<h2>Uber Cultureh2>
<p class="p1">All you want your website to do.p>
<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 Morea>
div>
div>
<div class="contact w clearfix">
<dic class="sc">
<h2>Social Connectionh2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.p>
<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">Newsletterh2>
<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">Subscribebutton>
dic>
<div class="co">
<h2>Contacth2>
<form action="#">
<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 itbutton>
form>
div>
<div class="nu">
<h2>News Upadash2>
<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 Blogbutton>
div>
div>
<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="">Homea> | <a href="">Abouta> | <a href="">Proudcta> | <a href="">Servicesa> | <a href="">Contacta>p>
<p><a href="">Privacy Policya> | <a href="">Terms of usea>p>
div>
div>
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;
}