html+css实现常用网页的布局

目录

1.置顶布局

2.侧边栏效果实现

 3.分块展示栏

---

1.置顶布局

可以做这种效果（文字需自己添加）

 布局代码如下

//html
<div class="logintop">logintop</div>
//css
.logintop {
        /* 顶部协议栏的布局 */
        width: 100%;
        height: 30px;
        background: #6097cf;
        border-bottom: solid 1px #ddd;
        line-height: 30px;
    }

2.侧边栏效果实现

html+css代码如下：

<div class="box">
        <div class="leftbox">
            <li>手机</li>
            <li>平板</li>
            <li>电脑</li>
            <li>钢化膜</li>
            <li>显示器</li>
        </div>
        <div class="rightbox">

            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>

        </div>
</div>


//css

.box {
        /* 分块盒子的布局 */
        display: block;
        width: 1226px;
        height: 460px;
        background-color: #da8888;
        margin: 20px auto;
    }
    
    .leftbox {
        /* 左边盒子的布局 */
        height: 460px;
        width: 234px;
        float: left;
        display: block;
        /* background-color: rgb(209, 208, 213); */
    }
    
    .leftbox>li {
        width: 100%;
        height: 92px;
        background-color: rgba(0, 0, 0, 0.3);
        list-style: none;
        text-align: center;
        line-height: 92px;
    }
    
    .leftbox>li:hover {
        background-color: orange;
    }
    
    .rightbox {
        /* 右边盒子的布局 */
        float: right;
        /* background-color: f5f5f5; */
        height: 100%;
        width: 992px;
    }
    
    .rightbox>li {
        /* 小盒子的布局 */
        float: left;
        width: 240px;
        margin-left: 5px;
        height: 210px;
        background-color: aquamarine;
        list-style: none;
        margin-top: 10px;
    }
    
    .rightbox>li:hover {
        /* 鼠标经过小盒子时候的动画 */
        animation: jump 0.5s linear infinite;
        box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.3);
    }
    
    @keyframes jump {
        0% {
            transform: translateY(0);
        }
        /* 50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    } */
    }
    

实现效果图：

 3.分块展示栏

<div class="fenglei">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </div>

 .fenglei {
        /* 分块盒子的布局 */
        display: block;
        width: 1226px;
        height: 460px;
        /* background-color: #eb7bcb; */
        margin: 20px auto;
    }
    
    .fenglei>li {
        list-style: none;
        width: 294px;
        height: 95%;
        background-color: khaki;
        float: left;
        margin-left: 10px;
        margin-top: 10px;
    }
    

效果展示：