第一次前端作业

一、准备工作

1. 3个在前端的室友

2. 以及较强的不会就baidu的能力(^o^)

二、艰难的过程

1. 上周星期天 弄明白了：

放上一张图片

<img src="  ">

如何换行

<br>

2. 周一&&周二

如何div哈哈

<div style="">

</div>

以及style里的一点点指令

上边距，右边距，左边距，（前边三个可以任意调整位置哦）宽度，高度，背景颜色，圆滑度，厚度，颜色。

margin-top
margin-right
margin-left
width
height
background-color
border-radius
border
rgb

鼠标指到图片放大（css指令）

img {
            width: 300px;
            height: 255px;
            float: left;
            padding: 2px 2px;
            transition: all 0.3s;
            border-radius: 20px;
        }

        img:hover {
            transform: scale(1.1);
        }

以及纯copy了一个动画文字

 #svgBox {
            width: 300px;
            margin: 80px auto;
        }

        .text {
            font-size: 64px;
            font-weight: 100px;
            text-transform: uppercase;
            fill: none;
            stroke-width: 2px;
            stroke-dasharray: 90 310;
            animation: stroke 6s infinite linear;
        }

        .text-1 {
            stroke: #3498db;
            text-shadow: 0 0 5px #3498db;
            animation-delay: -1.5s;
        }

        .text-2 {
            stroke: #f39c12;
            text-shadow: 0 0 5px #f39c12;
            animation-delay: -3s;
        }

        .text-3 {
            stroke: #e74c3c;
            text-shadow: 0 0 5px #e74c3c;
            animation-delay: -4.5s;
        }

        .text-4 {
            stroke: #9b59b6;
            text-shadow: 0 0 5px #9b59b6;
            animation-delay: -6s;
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: -400;
            }
        }

<div id="svgBox">
        <svg height="100">
            <text text-anchor="middle" x="50%" y="50%" class="text text-1">***</text>
            <text text-anchor="middle" x="50%" y="50%" class="text text-2">***</text>
            <text text-anchor="middle" x="50%" y="50%" class="text text-3">***</text>
            <text text-anchor="middle" x="50%" y="50%" class="text text-4">***</text>
        </svg>
    </div>

3. 周三

翻页

<script>
        function myFunction() {
            window.location.href = '   ';
        }
    </script>
    <div style="margin-left: 1500px;margin-top: 30px;">
        <button onclick="myFunction()">下一页</button>
    </div>

以及给按钮套了一个框框

<div
        style="font-family:'Times New Roman', Times, serif; margin-right:25px;margin-left:1490px;margin-top: -33px; width: 56px;height: 23px;background-color: rgb(227, 237, 228);  border-radius: 10px;border:10px solid rgb(238, 63, 142)">
    </div>

4. 周四（整活）
   具体详见网页第四页｀(>﹏<)′

总结

挺艰难的，每天一点点哈哈哈。

有想法，但没技术哈哈哈哈，能力有限~

刘倬