【项目】小试牛刀-polo360静态网页项目（附psd文件资源）

笔者尝试下开发简单的静态网页，下面分享过程及源码。这是polo360的下载链接：https://pan.baidu.com/s/1WqGxKMYY_DHfrSJ9lLL-WA 提取码：v2qi 

（一）前期准备

　　首先打开最终效果图，简单分析了网页结构并大致构思了设计思路。笔者采用边编写html边写css样式。我们可见将网页按从上到下大致分成五部分，头部栏header（此栏采用了一个向左浮动的包含着logo图片的块元素，和一个向右浮动的列表，并且列表里采用了超链接形式），横幅栏banner（主要是居中的图片块元素，用背景图片来达到图片下边的阴影），内容栏content（此部分包含三个块元素，每个块元素里又包含图片和超链接等元素），脚步栏footer（三个块元素，又包含了表单。在设置表单时注意：通过对表单设添加景图片，去掉边框，设置宽高来达到想要的效果），底部信息栏botton（此部分最简单，一个带上边框黑色背景和两边的两个元素）。于是我们可以创建这个五个大的div块元素来布局。再再里面嵌套各个小的元素。其次还要利用ps对psd图片进行切图，取我们想要的图片储存为wed所用格式图片类型为png-24到指定文件夹下。在写代码之前还要清除默认样式，我们创建了一个reset.css文件专门用来清除默认样式。用来清除内边距外边距等浏览器自带的默认样式。

（二）优化及总结

优化的过程也是修改bug的过程，此时要注意几点：1.是否兼容各种浏览器如谷歌火狐ie各个版本。2.是否性能最优，通过图片整合成雪碧图能来提示浏览器加载网页的速度，但是要注意也不是所有图片都能做成雪碧图，只有背景图片background-img才能使用雪碧图因为背景图片可以通过backgroun-position来改变位置。还有一种提高性能的方法是将css文件压缩， 笔者采用了网页在线压缩的方法，这样压缩后的css文件内存减少了所有网页的加载速度就快了。这是改善性能的两者思路。

                                                                                                                                                       　　 

（三）代码编写

这里是css代码

/* 在这里编辑主页样式表 */

/* 通过body设置header的背景图片 */
body {
    background-image: url(../img/body-bg.png);
    background-repeat: repeat-x;
}

/* 因为一些div宽度都一样,所以设置通用class属性值来设置不同div一样的样式
 固定元素宽度和居中*/
.w {
    width: 940px;
    margin: 0px auto;
}

/* 将父元素设置相对定位,以便子元素绝对定位 */
.header {
    position: relative;
    height: 160px;
    /* background-color: yellow; */
}

/* 设置logo图片向左浮动和具体位置 */
.logo {
    float: left;
    position: absolute;
    left: 15px;
    top: 37px;
    ;
}


/* 为导航条设置上内边距 */
.nav {
    padding-top: 59px;
}

/* 设置导航条字体居中 并设置左边虚线边框 */
.nav li {
    height: 50px;
    float: right;
    text-align: center;
    border-left: dotted 2px rgb(214 214 214);
    padding: 0px 10px;
}

/* 设置导航条字体 */
.nav a {
    font: bold 14px Georgia;
    color: rgb(102, 102, 102);
    text-decoration: none;
}
.nav a:hover {
    color: rgb(62, 62, 62);
    text-decoration: underline;
}

.nav p {
    font: 11px Tahoma;
    color: rgb(204, 204, 204);
}

/* 设置固定高度并在图片底部添加阴影背景图片达到立体效果 */
.banner {
    height: 348px;
    background-image: url(../img/shadow.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    position: relative;
}

/* 设置轮播图按钮的位置和外边距 */
.button li {
    float: left;
    margin-right: 6px;
}

.button ul {
    position: absolute;
    left: 20px;
    top: 314px;
}

/* 通过雪碧图来实现轮播图按钮伪类 */
.btn-img {
    display: inline-block;
    /* img是内联元素不能设置高度,我们需要设置block用子元素撑起父元素 */
    height: 15px;
    width: 15px;
    background: url(../img/button.png) no-repeat;
}

.btn-img:hover {
    background-position: right;
}


/* 头部栏 */
/* 对标题进行位置字体阴影背景等设置 */
.h1 {
    margin-top: 17px;
    height: 43px;
    font: bold 24px Georgia;
    text-align: center;
    background: url(../img/break.png) no-repeat bottom center;
}

/* 对文本内容设置上外边距和高度并添加第二个break下划线 */
.content {
    margin-top: 34px;
    height: 441px;
    background: no-repeat bottom center url(../img/break.png);

}

/* 对3个内容div设置向左浮动和宽度 */
.content1,
.content2 {
    float: left;
    width: 320px;
}

.content3 {
    float: left;
    width: 300px;
}

/* 设置h2和超链接和span的文字样式 */
h2,
.content a {
    font: Georgia 21px bold;
    color: rgb(50 125 165);
}

.content span {
    font: 12px Georgia;
    color: rgb(62, 62, 62);
    display: block;
    margin: 16px 0px;
    word-spacing: 2px;
}

/* 设置超链接背景图片行间距居中和a的hover伪类 */
.content a {
    text-decoration: none;
    text-align: center;
    line-height: 40px;
    display: block;
    width: 167px;
    height: 40px;
    background: no-repeat url(../img/content1-btn.png);
}

.content a:hover {
    color: yellowgreen;
}


/* 脚部栏 */
/* 创建包含三个大div的脚部栏 */
.footer {
    margin-top: 38px;
}

/* 设置footer1的宽度 */
.footer1 {
    /* background-color: #9ACD32; */
    width: 302px;
    /* height: 800px; */
}

/* 设置footer1的五个图片超链接 */
.footer1 li {
    float: left;
/*     height: 57px;
    width: 60px; */

}

.footer1 ul li a {
    display: block;
    height: 57px;
    width: 60px;
}
.ft1-a1 {
    background: url(../img/footer-img.png);
    background-position:0px;
}
.ft1-a2 {
    background: url(../img/footer-img.png) ;
    background-position:-60px;
}
.ft1-a3 {
    background: url(../img/footer-img.png);
    background-position:-120px;
}
.ft1-a4 {
    background: url(../img/footer-img.png);
    background-position:-180px;
}
.ft1-a5 {
    background:url(../img/footer-img.png);
    background-position:-240px;
}

/* 设置footer下面的三个超链接背景图片及字体样式 */
.footer-img {
    color: white;
    display: block;
    text-decoration: none;
    text-indent:1em;
    line-height: 32px;
    width: 165px;
    height: 32px;
    background: no-repeat url(../img/foot-btn.png);
    /* 设置上外边距 */
    margin-top: 8px;
    /* 统一给三个超链接设置位置 */
    position: absolute;
    top: 285px;
}

.footer1,
.footer2,
.footer3 {
    position: relative;
}

/* 设置浮动 */
.footer1,
.footer2 {
    float: left;
}

.footer3 {
    float: right;
}

.footer2,
.footer3 {
    margin-left: 16px;
}

/* 设置footer1标题的样式 */
.footer1 h2,
.footer2 h2,
.footer3 h2 {

    font: 18px Georgia;
    padding-bottom: 8px;
    border-bottom: dashed rgb(204, 204, 204);
}

/* 设置footer1字体的样式 */
.footer1 span,
.footer3 span {
    display: block;
    margin-top: 13px;
    font: 12px Myriad Pro;
    color: rgb(62, 62, 62);
}

/* 设置text1,2的文本框的样式 */
#text1,
#text2 {
    font: 10px Verdana;
    color: rgb(62, 62, 62);
    height: 30px;
    width: 300px;
    display: block;
    margin: 13px 0px;
    /* 给表单添加背景图片并去掉边框 */
    background: url(../img/btn-bg.png) no-repeat;
    border: none;
    resize: none;
    overflow: auto;
}

#text3 {
    font: 10px Verdana;
    color: rgb(62, 62, 62);
    height: 30px;
    width: 300px;
    display: block;
    background: url(../img/btn-bg.png) no-repeat;
    border: none;
    resize: none;
    overflow: auto;
}

/* 设置文本域text4的样式 */
#text4 {
    display:block;
    margin-top: 13px;
    width: 296px;
    height: 89px;
    margin-bottom: 30px;
    background: url(../img/btn-bg1.png);
    border: none;
    resize: none;
    text-align: left;
}

.footer2 {
    /* background-color: green; */
    width: 296px;
}

.footer3 {
    width: 299px;
}

.footer3 li {
    display: inline-block;
    border-bottom: dashed rgb(214, 214, 214);
}

/* 通过一张雪碧图来设置footer3中的三张图片 */
.footer3-1 {
    margin-top: 13px;
    margin-right: 8px;
    height: 58px;
    width: 58px;
    background: no-repeat url(../img/footer-img1.png);
    padding-bottom: 6px;
    float: left;
}

.footer3-2 {
    margin-top: 13px;
    margin-right: 8px;
    height: 58px;
    width: 58px;
    background: no-repeat url(../img/footer-img1.png);
    background-position: 0px -82px;
    padding-bottom: 6px;
    float: left;
}

.footer3-3 {
    margin-top: 13px;
    margin-right: 8px;
    height: 58px;
    width: 59px;
    background: no-repeat url(../img/footer-img1.png);
    background-position: 0px -164px;
    padding-bottom: 6px;
    float: left;
}

/* helper div用来布局,因为脚部栏脱离了文档流,阻止在下面的底部栏拱上来 */
.helper {
    height: 360px;
}

/* 底部栏 */
/* 两个div分别向两边浮动 */
.botton-text1 {
    display: block;
    /* float: left; */
    width: 302px;
    float: left;

}

.botton-text2 {
    display: block;
    float: right;
    width: 299px;

}

/* 对底部文字设置字体 */
.botton-text1,
.botton-text2 {
    color: rgb(153, 153, 153);
    font: 11px Myriad Pro;
    line-height: 22px;
    margin-top: 16px;
}

/* 设置底部黑色背景及灰色上边距 */
.botton-bg {
    height: 180px;
    background-color: rgb(51, 51, 51);
    border-top: solid rgb(76, 76, 76) 10px;


}

这是是html代码

    
        "utf-8" />
        
        
        "stylesheet" type="text/css" href="css/reset-min.css"/>
        
        "stylesheet" type="text/css" href="css/page-index-min.css"/>
    
    
        
        
        
class="header w">
            
            
class="logo">
                "img/logo.png" >
            
            
            
class="nav">
                
"#">CONTACT
                
Ways to reach us
                
                
"#">BLOG
                
Follow our updates
                
                
"#">SERVICES
                
Things we do
                
                
"#">PRODUCTS
                
What we have for you
                
                
"#">HOME 
                
Back to home
            
        
        
        
        
class="banner w">
            "img/banner.png" alt="旗帜图片">
            
            
            
class="button">
                

                    
class="btn-img" href="#">
                    
"#">"img/button-hover.png" >
                    
class="btn-img" href="#">
                    
class="btn-img" href="#">
                    
class="btn-img" href="#">
                
            
        
        
        
        
class="w h1">
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit
        
        
        
        
        
class="w content">
            
        
class="content1">
            
Perfect Logic
            All you want your website to do.
            "img/content1-img.png" alt="小男孩">
            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.
            "#">learn more
        
    
        
class="content2"> 
        
Complete Solution
        A tool anything and everything you can think
        "img/content2-img.png" alt="跳跃的女孩">
        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.
        "#">learn more
        
        
        
class="content3">
            
Uber Culture
            and ready for future
            "img/content3-img.png" alt="绿色地球" >
            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.
             "#">learn more
        
        
        
        
        
        
class="helper w">
        
class="w footer">
            
        
class="footer1">
            
Social Connection
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
            
            

                
class="ft1-a1"  href="#">
                
class="ft1-a2" href="#">
                
class="ft1-a3" href="#">
                
class="ft1-a4" href="#">
                
class="ft1-a5" href="#">
            
            
Newsletter
            At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
            

            
"#">
                "text" name="" id="text1" value="your email adress" />
            
            

            class="footer-img" href="#">Subscribe
        
        
        
class="footer2">
            
Contact
            
"#" method="">
            "text" name="" id="text2" value="your name" />
            

            "text" name="" id="text3" value="your email adress" />
            

            "</span><span style="color: #800000;">area</span><span style="color: #800000;">"</span> id=<span style="color: #800000;">"</span><span style="color: #800000;">text4</span><span style="color: #800000;">"</span> value=<span style="color: #800000;">"</span><span style="color: #800000;">message</span><span style="color: #800000;">"</span>><span style="color: #000000;">message
            </span>
            
            

            class="footer-img" href="#">Send it
        
        
        
class="footer3">
            
News Updates
            

                
class="footer3-1">
                Lorem ipsum dolor sit amet, consectetur
                adipisicing elit, sed do eiusmod tempor incid
                idunt ut labore et dolore magna aliqua. 
                
                
class="footer3-2">
                Sed ut perspiciatis unde omnis
                 iste natus error sit voluptatem accusantium 
                 doloremque laudantium, totam rem aperiam. 
                
                
class="footer3-3">
                At vero eos et accusamus et iusto odio 
                dignissimos ducimus qui blanditiis praesentium. 
                
            
        class="footer-img" href="#">Visit our Blog
                
        
        
        
        
        
class="botton-bg">
        
class="w botton">
            
class="botton-text2">Copyright 2010. Studio VIVROCKS. All Rights Reserved.
            
class="botton-text1">Site Powered by Wordpress. Design and Developed by VIVROCKS.
                Home | About | Products | Services | Contact
                Privacy Policy | Terms of use