仿京东静态网站制作之海贼王人物介绍

前情提示

因为学校的一个课程的课终作业是设计一个网站（包括ps和html），所以我就想着把前段时间写的品优购静态网站项目改成一个我喜欢的海贼王的一个网站，前面品优购已经完成的部分我就只是做了一点点改动，大体框架是没变的，后面几篇博客就介绍新的这个网站了（自我感觉做的还行）

先来一张最终的效果图吧（原图有点大上传不了，这是截图，大家见谅）

进入正题

海贼王人物介绍模块制作

主要知识点：网页布局&浮动&定位&CSS3过渡

HTML结构

    <div class="w actor">
            <div class="hd">
                <div class="left">角色简介</div>
                <div class="right">换一批 &nbsp; <img src="./img/换一批.png" alt=""></div>
            </div>
            <div class="bd">
                <div class="sec1">
                    <li class="background"><img src="./img/介绍背景2.png" alt=""></li>
                    <img src="./img/路飞和服.png" alt="">
                    <div class="text">
                        <h1>蒙奇·D·路飞</h1>
                        <p>船长，喜欢吃肉、聚会、睡觉觉，是橡胶果实能力者，虽然路飞有时候憨憨的，但是他一直都是伙伴们信赖的船长。越战越强，现在路飞的战斗力已经达到了五档。他的梦想是成为海贼王。</p>
                        <p>悬赏金：30亿贝利</p>
                    </div>
                    <div class="down">
                        <li></li>
                    </div>

我一共是介绍了9个人物的，但是只要sec1做好了，后面几个就只是改内容，最后再给sec1-sec9加上浮动就好了，所以这里只给了sec1和大框架的代码

CSS代码

.actor {
    height: 1100px;
}

.actor .hd {
    height: 40px;
    border-bottom: 1px solid #ededed;
}

.actor .hd .left {
    float: left;
    font-size: 18px;
    line-height: 40px;
}

.actor .hd .right {
    float: right;
    line-height: 40px;
    margin-right: 20px;
}

.actor .hd .right img {
    widows: 12px;
    height: 12px;
}

.actor .bd>div {
    position: relative;
    float: left;
    width: 366px;
    height: 328px;
    margin-top: 1px;
    margin-left: 25.5px;
    margin-bottom: 30px;
    border: 5px solid #000;
}


.actor .bd .sec1 .background {
    position: absolute;
    left: 50px;
    bottom: 2px;
    z-index: -1;
}
.actor .bd img {
    margin-top: 30px;
}

.actor .bd>div .text {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
    font-family: '宋体';
    color: #000;
    font-size: 14px;
}
.actor .bd>div .text p:nth-of-type(2) {
    font-size: 24px;
}

.actor .bd>div .down {
    position: absolute;
    bottom: 10px;
    left: 13px;
    overflow: hidden;
    border: 1px solid #000;
    width: 330px;
    height: 32px;
    border-radius: 15px;
}

.actor .bd>div .down li {
    height: 28px;
    width: 0%;
}

.actor .bd>div .down:hover li {
    width: 90%;
    margin: 1px 2px;
    background-color: #c81623;
    transition: all .6s;
}

这里复盘一下我的人物介绍框的制作思路：

一个sec1盒子里装有一张图片，一个文本框和一个圆角矩形

文本框和圆角矩形采用了定位，这样每个sec盒子里的内容就都在同样的位置，比较整齐，同时也可以对每个sec盒子里的内容进行微调

圆角矩形是用来展示悬赏金的，应用了过渡，当鼠标放在圆角矩形上的时候，会出现进度条，这样就会有一个交互的效果

整个人物介绍页的背景是用四个漫画对话框采用定位做的

最终效果

鼠标放上后（第二个）