任务一&任务二总结

发表于   |   分类于   |  

任务描述及目标

具体实现

  • 按照要求搭出HTML框架，标签尽可能的语义化，从实例图中可以确定这个页面主要分为三块，即页头、主体、页脚，所以大框架是这样的

    1
    2
    3
    4
    5
    <body>
        <div class="header"></div>
        <div class="main"></div>
        <div class="footer"></div>
    </body>

  • header部分比较简单，logo用a标签，导航用ul>li>a。先把logo写到a标签内，方便seo和阅读器识别，再用背景图片替换掉，具体实现如下：

    1
    <a href="#">小虎扑体育</a>
    1
    2
    3
    4
    5
    6
    .header > a {
        background: url("xhp_logo.png") no-repeat;
        width: 100px;
        height: 50px;
        text-indent: -999em; /*隐藏先前写入标签里的logo*/
    }

接着是导航栏部分，ul标签向右浮动，使整体出现在header的右部；li标签左浮动，实现水平排列；间隔用margin微调；设置ul的height和line-height同时等于header的高度可以实现垂直居中;最后设置hover效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.header ul {
    float: right;
    margin-right: 20px;
    height: 60px;
    line-height: 60px;
}
.header li {
    float: left;
    margin: 0 10px;
    font-size: 0.9rem;
}
.header li a:hover {
    color: #999;
}

  • main部分主要分为五个小块，其中最后一块以后会演变为侧栏，那么main内部的结果应该是这样的

    1
    2
    3
    4
    5
    6
    7
    <div class="main">
        <div>第一篇文章</div>
        <div>第二篇文章</div>
        <div>图片集</div>
        <div>最后一篇文章</div>
        <div>侧栏</div>
    </div>

每个小块内部基本结构大致为h1 + h2 + p，另外再添加些img、ol、ul、table等元素；这里边p段落开头的缩进可以用text-indent：2em来实现；对每个小块设置margin和padding来实现内外留白，通过css3的box-shadow属性可以实现阴影效果

1
2
3
4
.article {
    box-shadow: 2px 2px 1px #999;
/* 4个属性分别表示x轴阴影长度、y轴阴影长度、阴影模糊程度、阴影的颜色*/
}

  • 表单
    表单里的所有内容都要包裹在form标签内，针对单选按钮radio和多选按钮checkbox建议绑定label标签的for属性，方便点选

    1
    2
    3
    4
    5
    6
    7
    8
    <input type="radio" name="gender" id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman" checked="checked">
    <label for="woman">女</label>
    <!--
    每个单项按钮，必须有一个相同的name属性（name="gender"），否则按钮无效
    绑定了label for="id"（对应input元素的id）后，点击label标签里的内容效果等同于点击单选或者多项按钮
    -->

实现表单内各行对齐排列，我的思路是给每行外面加一个div，使各行在form里成块状排列；然后针对单个div，内部的结构大致是一个span+ n个input，因为都是行内元素，所以会排成一列，为了实现对齐效果，可以将span的display设为inline-block，然后显性设置宽度，设置text-align右对齐

1
2
3
4
<div class="form-group">
    <span>请输入邮箱地址</span>
    <input type="text" placeholder="邮箱地址请按要求格式输入">
<div>



1
2
3
4
5
6
.form-group span {
    display: inline-block;
    width: 30%;
    margin-right: 20px;
    text-align: right; 
}
  • footer部分非常简单，所以略过

求质不求速，认真看完任务里提供的资料，共勉！！

在线demo

我的blog