一、情怀墙（自己起的俗名，哈哈哈）

主要知识点：浮动&定位&布局

HTML结构

    <!-- 情怀墙模块 -->
    <div class="w mosion">

        <div class="hd">
            <div class="left">情怀墙</div>
            <div class="right"><a>我要投稿</a></div>
        </div>
        <div class="bd">
            <img class="img2" src="./img/举手.png"></img>
            <p>&nbsp;&nbsp;&nbsp;有一部动漫，让我热血沸腾；有一部动漫，让我悄然泪下；有一部动漫，让我义愤填膺……是的，那是海贼王的旗帜在飞扬；看吧，那是大海的怒狂；听吧，大海的战歌在回荡；咆哮吧！无畏的海贼王！</p>
            <img src="./img/海贼王.png" >
        </div>
    </div>

CSS代码

/* 情怀墙模块 */

.mosion {
    height: 530px;
}

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

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

.mosion .hd .right {
    float: right;
    font-size: 24px;
}

.mosion .bd {
    position: relative;
}

.mosion .bd .img2 {
    position: absolute;
    top: -70px;
    left: 124px;
}

.mosion .bd img {
    position: absolute;
    top: 120px;
    left: 348.5px;
}

.mosion .bd p {
    position: absolute;
    top: 30px;
    width: 1200px;
    font-family: ‘楷体‘;
    font-weight: 700;
    font-size: 30px;
    line-height: 45px;
    color: #000;
}

思路复盘：

.hd模块标题部分就是一个大盒子里两个子盒子，一个左浮动，一个右浮动就好了

.bd主体部分就是两张经过PS处理过的png格式的图片和一段文字，通过定位让他们位于合适的位置

效果

二、侧边栏

主要知识点：固定定位

固定定位详解：

1.代码：position:fixed;+边偏移

2.特点：* 他的父元素就是浏览器，以浏览器的可视窗口为参照点移动，不随滚动条滚动

* 脱标，不再占有原来的位置

3.缺点：当浏览器缩放后，加了固定定位的元素还是就在那个位置

HTML和CSS代码

    <!-- 侧边栏 -->
    <div class="aside">
        <img src="./img/探头.png" >
    </div>

/* 侧边栏 */
.aside {
    position: fixed;
    top: 180px;
    left: 30px;
}

效果（注意紫色框框）

滑动滚动条后

这样就有一种图片随着网页动而动的效果了

仿京东静态网站制作最终效果

仿京东静态网站制作之最终章（情怀墙和侧边栏）

原文：https://www.cnblogs.com/ben-studying/p/14745697.html