HTML练习—POLO360

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;
}