web零基础入门开发-阴阳师泛娱乐模块

0x00简介

代码简单,适合入门
有写注释

0x01图片演示

image

0x02代码预览

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴阳师泛娱乐模块</title>
    <style>
        /*css 层叠样式表*/
        body{
            margin: 0;/*清除默认外边距*/
        }
        .bigh{
            width: 1150px;/*宽度 像素*/
            height: 516px;/*高度*/
            margin: 40px auto 28px; 
            /*
                40px上 auto左右 28px下
                上右下左
                margin-top: 50px;
                margin-right: auto;
                margin-bottom: 100px;
                margin-left: auto;
                auto是自适应居中
                px是像素(一个单位)
            */
        }
        .bigh ul{
            list-style: none;/*清除无序列表黑点*/
            padding: 0;/*清除无序列表默认内边距*/
        }
        .bigh ul li{
            width: 220px;
            height: 516px;
            float: left;
            margin-right: 10px;
        }
        /*鼠标悬停事件*/
        .bigh ul li img:hover{
            transform: translateY(-30px);
            /*变换 位移*/
        }

        .bigh ul li img{
            transition: 0.3s;
        }
    </style>
</head>
<body>
    <!--用户可视化区域-->
    <div class="bigh">
        <ul>
            <!--无序列表-->
            <li class="bigh">
                <img src="1.gif" alt="">
            </li>
            <li class="bigh">
                <img src="2.png" alt="">
            </li>
            <li class="bigh">
                <img src="3.png" alt="">
            </li>
            <li class="bigh">
                <img src="4.png" alt="">
            </li>
            <li class="bigh">
                <img src="5.png" alt="">
            </li>
        </ul>
    </div>
</body>
</html>
<!--class 类选择器 -->
<!--外边距 margin-->
<!--内边距 padding-->
<!--css默认的小问题用f12找-->

0x03下载地址

https://wzz.lanzous.com/ic3ovwh

发表评论 / Comment

用心评论~

金玉良言 / Appraise
赚钱网LV 1
2020-05-06 11:15
顶一下