.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;
}登入後複製
因为三个模块的布局是一模一样的，所以只要使用同一个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;
}登入後複製
Of course, you will also encounter some problems when implementing this static page according to the design draft, such as knowing the size and size of each element. It is a very troublesome operation such as the spacing between spaces, the size and color attributes of fonts, etc.(Tucao). Of course, the real problem you encounter is not this, but something that you think should look like this. As a result, it will look different when displayed in the browser. This is the source of headaches. Therefore, during the implementation process, we also recorded some problems encountered and tried to find out the reasons and solutions.
1. When text and images appear on the same line or in the same div element, the browser will run on different lines.
After querying the information, three solutions were given:
①In CSS, set vertical-align for the div: middle; attribute. This div contains pictures and text, so that the elements in the div can be vertically aligned in the center.
② When the picture is a background picture, set the picture using background-img and modify the padding of the text so that it can be on the same line.
③Place the image and text in two divs and set the margin value. This is the method I use, which is a little more troublesome than the first method.
2. Inline elements do not support margin and padding attribute values in the upper and lower directions. You need to use line-height to modify them.
3. Elements often have some extra margins inexplicably. This is actually the default effect of the browser. These effects need to be cleared manually before setting the CSS style. For example, the unordered list ul will have extra left margin.
Summary
## I also imitated Microsoft China’s projects a long time ago. At that time If you use your spare time to complete it, you don't have an overall view of the structure and layout, so you will spend a lot of energy to complete it. But doing this in the past two days has not been so strenuous. I thought that I would be very rusty since I haven’t practiced coding for a long time, but in fact I still know the knowledge points that I know, and I still lack the knowledge points that I don’t know. Searching for information and finding methods to apply to examples can really improve the understanding and memory of knowledge points. Although the level is still not very high, I am very happy that I have been making progress and keep working hard. That will be good.
Next, I will continue to practice the implementation of static pages. Once I am very proficient, I will start practicing dynamic pages in JavaScript. This has always been my procrastination. It’s a taboo to dare to try! Keep up the good work and catch up with everyone!
The complete project, including the design drawing psd, HTML code, and CSS code, is on github. I hope that someone who is willing and capable can point out my shortcomings, and I hope I can work with everyone. Communicate and make progress together!
