HTML5+CSS3静态页面项目-PayPaul的总结

Posted 2020-09-25

 　　学习前端有一段时间了，一直在看书上的理论知识，而实战项目却很少。师兄常说，想要知道自己的实力有多少，知识掌握了多少，最好的方法就是去实践了，实践出真知嘛。于是决定在这个假期里，主要是通过项目的实践以及理论知识的辅助来提高代码水平。首先是做几个html5+CSS3静态页面布局的练习，查缺补漏知识点并且总结在实践过程中遇到的一些错误。页面的设计稿主要是网络上找来了的，也尝试自己切图、测量位置、获得内容的属性等等，假装自己真的在完成一个项目。

　　第一个页面是从设计达人这个平台上找来的，这个平台的页面设计主要也是推荐的是国外的设计还有一些网页设计上的教程，推荐页面都比较简洁、大方。比起内容爆炸的中国特色页面来说，我也是欣赏国外的设计。

　　设计图的效果图如下：

　　设计稿上的页面宽度为1550像素的，页面主体是960像素的12栏网格布局。设计的总体宽度是远远超过了浏览器的视口宽度，因此我在设计的时候，因为是静态页面，也没有使用响应式的设计，就将所有的宽高度都设置为以像素为单位的静态尺寸了。使用div元素将宽度设置为960px，并且将margin属性为0px auto，就能保证页面的主体内容在浏览器窗口中居中，而且不用再去介意页面的总宽度了。

　　我的还原图为：

　　看到设计图psd的时候，我的思路大致是这样的，先是包含有两个导航、输入栏和Logo图片的导航栏header；接着是一个网站的横幅banner，大横幅中包括了一个大标题、一个段落以及两个按钮样的连接；再下去就是网页的主要内容了，包含有三个相同布局的模块，内容是包括了图片、标题、段落和一个链接，另外还有一行导航链接在底部；最后就是页脚footer，包括了一行导航链接和两个文本段落。

　　根据这个思路，我也开始搭建页面的框架了，分为了四大部分：header、section、main、footer。并且根据每个部分中的内容把所需要的标签也写上，还根据需要添加上了class属性。接着就是每一部分一点一点完成页面内容以及使用CSS3添加样式了。下面看我详细的说明。

---

一、Header部分

　　以上是header的完成图，首先将两个导航分为了两个部分，第一行是使用nav标签插入链接和两个输入框，输入框使用border-radius处理，使其成为圆角框，但很遗憾的是出现了锯齿，并没有特别圆滑。而链接两边的竖线则是设置了带有颜色的边框。下一行的导航则是使用无序列表并设置float属性为left，使其向左浮动。Logo图片则是对设计图切图的结果了。有瑕疵的地方是链接后影视有小三角作为有二级链接的标示的，因为懒 （心虚），所以就没有加上了。详细的HTML代码如下： 

<header>                 
    <nav class="firstnav">
        <div class="headerlimit"> 
            <a href="#" class="firstnav1">Business</a>
            <a href="#" class="firstnav2">Personal</a>
            <input type="text" name="email" placeholder="&nbsp;&nbsp;Leave your email" class="inputcase1" />
            <input type="text" name="omit" palaceholder="……" class="inputcase2" />
        </div>
                        
    <nav class="secondnav"> 
        <div class="headerlimit"> 
            <img src="images/Logo.png" />
            <div class="headnav">
                <ul>
                    <li><a href="#">Buy</a></li>
                    <li><a href="#">Sell</a></li>
                    <li><a href="#">Manage</a></li>
                </ul>
            </div>
        </div>
    </nav>    
</header>

　　其中遇到了一个问题是，图片和无序列表在浏览器中显示时分为了两行，查找了资料以后是使用div元素包含无序列表，并且设值margin和padding的值才使得两个元素在同一行中。无序列表表示链接的CSS代码如下：

.headnav {
    width: 280px;
    padding-left: 170px;
    margin-top: -70px;
}
.headerlimit ul {
    list-style-type: none;
    padding-left: 0px;
}
.headerlimit li a{
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #ebebeb;
    width: 90px;
    text-align: center;
    line-height: 25px;
    color: #68676a;
    float: left;
    font-family: PTSans;
    font-size: 14px;
}

二、Banner部分

　　背景的大图是使用background-img实现的，而在这个banner部分的设置中使用了position的定位方法，将所有的文字内容模块相对于背景模块的绝对定位，使得在缩小视口的时候，两个模块可以保持位置的不变形、不一位，position属性值也是CSS中很重要的一点。HTML代码和两个模块的绝对定位CSS代码如下：

<section class="banner">
    <div class="backimg">
        <div class="bannercontent">
             <div class="bannerintr">
                 <h1>Paul makes your payments easy</h1>
                 <p>With over 1 Billion users, paypal is simply the best way to pay</p>
             </div>

             <div class="button1">
                 <a href="#">
                      <p>Check this awesome button right here</p>
                 </a>
             </div>

             <div class="button2">
                 <p>Sign up for a paypaul account today</p>
                 <button><a href="#">Click here to join</a></button>
            </div>
        </div>
    </div>
</section>

.bannercontent {
    width: 960px;
    margin: 0px auto;
    position: absolute;
    left: 10px;
    top: 25px;
}
.backimg {
    width: 1055px;
    height: 415px;
    margin-left: 195px;
    background-image: url(../images/banner.png);
    position: relative;
}

三、Main部分

　　因为三个模块的布局是一模一样的，所以只要使用同一个class属性就能保证样式相同。图片和文字都处理都比较简单，没有特别需要指出的了，因此代码也省略了。

四、Footer部分

　　在footer部分，导航栏的部分同样是使用无序列表的方式，要注意的是，在设置的时候发现，因为无序列表中设置了向左浮动，因此会影响后面的两个段落在浏览器中的显示，需要使用clear: both; 清除两个段落的浮动，才能使得两个段落在导航栏的下方。问题产生和清除浮动的部分CSS代码如下：

.footernav li a{
    color: #fff;
    font-size: 12px;
    margin-right: 15px;
    margin-top: 35px;
    float: left;
}
.footercontent {
    width: 960px;
    margin: 0px auto;
    padding: 25px 0px;
    clear: both;
}

　　 

---

　　当然在根据设计稿实现这个静态页面的时候也会遇到一些问题，比如说要知道每个元素的大小、元素间的间距、字体的大小颜色属性之类的很是麻烦的一个操作呢（吐槽）。当然，真正遇到的问题不是这个，而是一些自己认为应该是这个样子的，结果在浏览器中显示就会变成另一个模样，这才是让人头疼的根源。因此，在实现的过程中也记录了一些遇到的问题，尝试找找是什么原因以及解决的方案。

1、当文字和图片出现在同一行，或是同一个div元素中时，浏览器运行的效果是在不同的行。

通过查询了资料，给出了三种解决的方案：

①在CSS中，为div设置vertical-align: middle;的属性。这个div是包含了图片和文字的，使得div中的元素可以垂直居中对齐。

②当图片为背景图片时，将图片使用background-img设置，并将文字的padding修改即可在同一行了。

③将图片和文字放在两个div中，并设置margin值即可。我使用的就是这个方法，相对于第一种方法麻烦了一些。

2、行内元素不支持上下方向上的margin和padding属性值，修改需要使用line-height。

3、元素经常会莫名奇妙地出现一些多余的边距，其实是浏览器的默认效果，需要在设置CSS样式前，将这些效果手动清除。如无序列表ul会有多余的左边距。

---

总结

     很久之前也曾经模仿过微软中国的项目，那时候利用课余的时间来完成，对于结构和布局还没有全局观，会花费很大的精力去完成。而这两天再做这个，就没有那么吃力了，本以为自己很久没有代码实战，会很生疏，但实际上会的知识点仍然会，不会的知识点仍然欠缺，实战的过程中也一直在查找资料，找到方法运用到实例中，真的能提高知识点的理解和记忆。虽然水平依旧不怎么高，很高兴自己一直在进步着，继续努力，那样就很好。

     接下也会继续把静态页面的实现多练习，直到很熟练后，就会开始练习javascript的动态页面了，这一直是我拖延症的地方，不敢尝试是大忌！要继续加油追赶大家的步伐呢！

     完整的项目，包括设计图psd、HTML代码、CSS代码放在了github上，希望有心、有余力的大神可以指出我的不足，希望能和大家一起交流、一起进步！

所有文件地址：

https://github.com/omocc/PracticeItem/tree/master/6.23%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-1

网页观看地址：

http://htmlpreview.github.io/?https://github.com/omocc/PracticeItem/blob/master/6.23%E5%AE%9E%E6%88%98%E7%BB%83%E4%B9%A0-1/index.html