web前端

今天做了蓝桥杯web应用开发模拟题——制作网站首页
网页有内容，但是没有格式，需要自己写css，总结一下

1.我犯了两个错误，一是自己写了通用代码 common.css没有加到网页上 即 这个浪费了很久时间
二是没有注意到考试需求上要求页面宽度为1024px,没有设置body宽度导致提交的时候与要求的页面大相径庭

2.这个题目是中等水平，整体给我感觉最难的是就是对浮动和定位的把控，每个部分的最大的盒子必须记得clearfix
首先是头部部分

我设置了右边部分为右浮动 再设置margin-right

其次是横幅部分

一个div把图片和文字都包起来 文字部分的盒子设置

.banner .container .right {
    position: absolute;
    left: 556px;
    top: 70px;
    width: 418px;

用的是绝对定位 因为它的位置并不是完全靠右靠上的 定位更好控制位置
宽高是我自己设置的 为了符合题目给的图片上的文字位置的要求

图片部分


图片要求图片之间宽度是30px 刚开始我直接设置的是margin：20px 30px
这非常愚蠢，我忽略了左右以及由于题目给出的图片宽度和要求的盒子宽度的差距所导致的padding 横方向上左右有20px的padding 我只需要设置10px的margin-right即可

广告部分
最后一个部分同理 还是使用定位 感觉定位比浮动好用

3.但是我让遇到一些问题

这个a元素中的文字一直没法居中，

.more a {
    color: #59ABDF;
    font-size: 20px;
    text-decoration: none;
    line-height: 62px;
    height: 62px;
    text-align: center;
  

以上代码只能实现a元素的垂直居中 ，后来我发现文字居中需要先做到包着文字的a元素居中 也就是a元素在它的父元素中居中，于是我设置父元素

.more {
    background: #E8EEF2;
    height: 62px;
    line-height: 62px;
    text-align: center;

a元素就居中了