概述
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>POLO360练习</title>
<!-- 引入reset.css用来清除浏览器的默认样式 -->
<link rel="stylesheet" type="text/css" href="../POLO360/css/reset.css" />
<!-- 引入page-index -->
<link rel="stylesheet" type="text/css" href="../POLO360/css/page-index.css" />
</head>
<body>
<!--
id class和文件的命名规范
命名时尽量使用英文，如果不会可以使用拼音
但是不要英文和拼音混?
命名格式
驼峰命名法
首字母小写，每个单词的开头字母大写?
例子: aaaBbbCcc
也可以所有的字母都小写，单词之间使用_或-链接
aaa_bbb_CCC aaa-bbb-ccc
-->
<!-- 创建头部div header -->
<div class="header w">
<!-- 创建一个导航条 -->
<ul class="nav">
<li>
<a href="#">HOME</a>
<p>Back to home</p>
<li>
<a href="#">PRODUCTS</a>
<p>What we have for you</p>
</li>
<li>
<a href="#">SERVICES</a>
<p>Thing we do</p>
</li>
<li>
<a href="#">BLOG</a>
<p>Follow our updates</p>
</li>
<li>
<a href="#">CONTACT</a>
<p>Way to reach us</p>
</li>
</li>
</ul>
<!-- 在div中设置logo -->
<div class="logo">
<a href="#">
<img src="../POLO360/img/logo.png" alt="网站的logo" />
</a>
</div>
</div>
<!-- header结束 -->
<!-- banner开始 -->
<div class="banner w">
<img src="../POLO360/img/banner01.png" alt="这是一个图片">
<div class="pointerDiv">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
</div>
<!-- banner结束 -->
<!-- content开始 -->
<div class="content w clearfix">
<h1>
Locem ipsum dolor sit amet, consectetur adipisicing elit
</h1>
<div class="pl">
<h2>Perfect Logic</h2>
<p>All you want your website to do. </p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="../POLO360/pic/pic1.png" 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 ilo 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>A tool anything and everything you can think
</p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="../POLO360/pic/pic2.png" 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>Fresh. Modern and ready for future</p>
<!-- 创建图片的div -->
<div class="imgDiv">
<img src="../POLO360/pic/pic3.png" 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结束 -->
<!-- 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 blanditis praesentium</p>
<div class="icon">
<a href="#"><img src="../POLO360/pic/rss.png" /></a>
<a href="#"><img src="../POLO360/pic/fb.png" /></a>
<a href="#"><img src="../POLO360/pic/in.png" /></a>
<a href="#"><img src="../POLO360/pic/tw.png" /></a>
<a href="#"><img src="../POLO360/pic/yt.png" /></a>
</div>
<h2 class="nl">Newsletter</h2>
<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditis 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="../POLO360/pic/1.png" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</p>
<p>
<img src="../POLO360/pic/2.png" />
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam.
</p>
<p class="no-margin">
<img src="../POLO360/pic/3.png" />
Atvero eos et accusamus et iusto odio dignissimos ducimus qui blanditis 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 IE6]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8p-min.js"></script>
<script type="text/javascript">DD_belatedPNG.fix("div,img,a");</script>
<![endif]-->
</body>
</html>
page-index.css
/* 在这里编辑主页的样式表 */
/* 设置body */
body{
/*设置body的背景图片，水平方向重复*/
background: url(../img/bd-bg.png) repeat-x;
}
/*解决高度塌陷问题clearfix*/
.clearfix:before,
.clearfix:after{
content :"";
display: table;
clear: both;
}
.clearfix{
zoom: 1;
}
/* 固定元素宽度和居中 */
.w{
width: 940px;
margin: 0 auto;
}
/* 设置header */
.header{
/* background-color: #bfa; */
/* 设置上内边距 */
padding-top: 37px;
/* 设置下内边距 */
padding-bottom: 46px;
}
/* 设置logo */
.logo{
/* 设置左外边距 */
margin-left: 15px;
}
/* 设置导航条 */
.nav{
float: right;
margin-top: 22px;
}
.nav li{
float: left;
padding: 0 10px 10px;
/* 设置左边框 */
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{
/*设置高度*/
/* height: 356px; */
/*设置背景*/
/* background: ur1(../img/banner-bg.png) no-repeat bottom center; */
/*开启一个相对定位*/
position: relative;
}
/* 设置导航按钮 */
.pointerDiv{
/* 开启绝对定位 */
position: absolute;
top: 314px;
left: 15px;
}
.pointerDiv a{
float: left;
/* 设置宽度和高度 */
width: 17px;
height: 17px;
/* 设置一个左外边距 */
margin-left: 0.6px;
background: url(../img/pointer.png) no-repeat;
}
.pointerDiv .active , .pointerDiv a:hover{
background: url(../img/pointer-active.png) no-repeat;
}
/* 设置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;
}
.content .pl , .content .cs , .content .uc,
.contact .sc , .contact .co , .contact .nu{
float: left;
width: 300px;
/* background-color: yellow; */
}
.content .cs, .contact .co{
margin: 0 20px;
}
/*设置div中的标题*/
.content h2{
color:#11719e;
font: 21px Georgia;
}
.content p{
color: #8c8c8c;
font: 12px Helvetica;
}
/*设置图片div*/
.content .imgDiv{
width: 299px;
height: 190px;
/*设置上下外边距*/
margin:16px 0px 30px 0px;
text-align: center;
padding-top: 12px;
/* background-color: red; */
}
/*设置第二个段落*/
.content .p2{
height: 92px;
color: #3e3e3e;
font: 13px Helvetica;
word-spacing: 3px;
/* background-color: red; */
}
.content .lm{
display: block;
width: 162px;
height: 40px;
background: url(../pic/btn1.png) no-repeat;
text-decoration: none;
color: #016999;
font: 12px/38px Helvetica ;
/* 设置文字缩进 */
text-indent: 14px;
margin-bottom: 36px;
/* background-color: red; */
}
.contact{
/*设置背景*/
background: url(../img/line.png) no-repeat top center;
}
/*设置联系栏中的表单项*/
.contact .txt{
width: 276px;
height: 33px;
line-height: 33px;
/*设置背景图片*/
background: url(../pic/input.png) no-repeat;
/*单独为IE6设置-一个背景不随元素滚动*/
_background-attachment: fixed;
/* 去除默认边框 */
border: none;
/* 去除默认内外边距 */
padding: 0 10px;
margin: 0 0 16px 0;
}
.contact .tarea{
width: 276px;
height: 114px;
/*设置背景图片*/
background: url(../pic/txtarea.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(../pic/btn2.png) no-repeat;
border: none;
/* 去除默认内外边距 */
padding: 0;
margin: 11px 0 23px 0;
/* 设置字体 */
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;
}
.contact .sc .p1{
color: #444;
font: 12px/1 Helvetica;
}
/* 设置小图标 */
.contact .sc .icon{
/* 设置字体大小为0，去除空格 */
font-size: 0;
/* 设置上外边距 */
margin-top: 8px;
}
.contact .sc .icon a{
margin-right: 5px;
}
/* 设置左侧的第二个标题 */
.contact .sc .nl{
font: bold 18px/1 "gill sans mt";
padding: 30px 0 10px;
}
/* 设置左侧的表单项 */
.contact .sc .txt{
margin-top: 18px;
_margin-top: 18px;
margin-bottom: 0px;
}
.nu p{
color: #444;
font: 12px/1 helvetica;
height: 69px;
/* 设置下边框 */
margin-bottom: 13px;
padding-bottom: 9px;
border-bottom: 1px dashed #d3d3d3;
}
.nu .no-margin{
margin-bottom: 0px;
}
.nu img{
float: left;
margin-right: 6px;
}
/* 设置底部 */
.footer{
height: 173px;
background: #333;
/* 设置上边框 */
border-top: 10px solid #4c4c4c;
}
.footer a:hover{
color:#cccaca;
}
.footer a ,.footer p{
color: #999;
font: 11px HELVETICA;
text-decoration: none;
}
.footer p{
margin-left: 8px;
margin-right: 23px;
margin-bottom: 8px;
}
.footer .w{
padding-top: 18px;
}
.footer .copy{
float: right;
}
reset.css
/*
html5doctor.com Reset Stylesheet
v1.4.1
2010-03-01
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
box-sizing:border-box;
}
body {
line-height:1;
}
:focus {
outline: 1;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;
}
ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
img
banner01.png
db-bg.png
line.png
logo.png
pointer.png
pointer-active.png
pic
1.png
2.png
3.png
btn1.png
btn2.png
fb.png
in.png
rss.png
tw.png
yt.png
input.png
texarea.png
pic1.png
pic2.png
pic3.png
最后
以上就是昏睡小伙为你收集整理的HTML练习—POLO360的全部内容，希望文章能够帮你解决HTML练习—POLO360所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复