第十周总结

最新推荐文章于 2022-12-04 22:19:25 发布

Flying____fish

最新推荐文章于 2022-12-04 22:19:25 发布

阅读量102

点赞数

分类专栏：个人总结文章标签： html

本文链接：https://blog.csdn.net/Flying____fish/article/details/115305672

版权

个人总结专栏收录该内容

35 篇文章 0 订阅

订阅专栏

本周学习稍微有迷，再把 git 的基础t学的差不了之后竟感觉把任务完成了，殊不知接口的核心所在，被学长问的一问三不知，幸好，不然考核用的时候就真的一脸懵了，是否好奇那几天在干嘛？

一、做个人网站

下了一个phpstudy软件（功能实可以建一个本地服务器）生成一个类似于github或码云上的一个远程库，然后就是打算先在本地完善个人网站，差不多后推送到个人网站上，实现简单的页面刷新，同时看了几个视觉效果比较不错的博客，还想着先仿照一个，比如这个：http://www.lmlblog.com/blog/12/# 遗憾的是实力有点不太允许，姑且先放他一阵，待我先把技能学好之后在做尝试！

二、回顾html、css

回顾了一点html和css的知识 “温故而知新”、又被孔子的智慧折服了一波，的确收获满满比如：
1、标签
center标签：把文字居中；
u标签：给文字加下划线；
sup标签：把文字变成上标；
i标签：将文字变为斜体字；
分割线：<hr >
del标签:给文字添加删除线。
2、超链接
默认：在当前页面下跳转；
加入 target="_blank" 属性可以在新窗口打开页面。
3、无序列表：（ul li）
实心圆：在ul中加入吧属性 type=“disc”；
空心圆：ul中加入 type=“circle”；
方块：type=“square”。
4、有序列表：（ol li）
阿拉伯数字：type=“1”;
英文单词：type=“a/A”;
罗马数字：type=“i/I”.
5、image属性
alt=“图片加载失败后的文字”(这个知道,和下面哥们儿做个伴儿吧)；
title：“鼠标划上去显示的文字”。
6、表格(之前没看…现在发现知识点也不少直接放个图了在这里插入图片描述
)
7、上面这个图也是属于收获之一，软件名为Xmind,个人感觉一些知识点借助思维导图看着还是比较舒服的，比较有层次感。
8、伪类 after before 的使用，这个是在一节公开课上看的，说是可以使代码更加的简洁具体就那一个心形图案的案例来说明，
首先是常规的心形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
            width: 200px;
            height: 150px;
            margin: 0 auto;
            position: relative;
        }
        .left{
            width: 100px;
            height: 150px;
            background-color: rgb(255, 94, 0);
            border-radius: 50px 50px 0 0;
            transform:rotate(-45deg);
            position: absolute;
            top: 0;
            left: 30px;
        }
        .right{
            width: 100px;
            height: 150px;
            background-color: rgb(255, 94, 0);
            border-radius: 50px 50px 0 0;
            transform:rotate(45deg);
            position: absolute;
            top: 0;
            left: 66px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

然后是使用伪类后的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flyingHeart{
            width: 200px;
            height: 150px;
            position: relative;
            margin: 50px auto;
            /* animation: flyingHeart 5s;  */
        }
        .flyingHeart::after{
            content: '';
            width: 100px;
            height: 150px;
            background-color: rgb(233, 16, 16);
            position: absolute;
            transform:rotate(-45deg);
            border-radius: 50px 50px 0 0;
            top: 0;
            left: 0px;
        }
        .flyingHeart::before{
            content: '';
            width: 100px;
            height: 150px;
            background-color:  rgb(233, 16, 16);
            position: absolute;
            transform:rotate(45deg);
            border-radius: 50px 50px 0 0;
            top: 0;
            left: 36px;
        }
    </style>
</head>
<body>
    <div class="flyingHeart"></div>
</body>
</html>

然后会发现效果是一样的，但少创建两个div,呃这个优点一时间想不起了只记得那个老师说后期开发优化代码会用的多。
突然发现之前学漏了好多，看来之后还是要多复习复习了。

最后

值得一提的是度过了一个愉快的周末———小组八里沟一日游，玩的很开心，虽然累了点（也就三万步），但是和大家一起出去放松，游山玩水，这三万步值了，不是吗？

Flying____fish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第十周总结

本周学习稍微有迷，再把 git 的基础t学的差不了之后竟感觉把任务完成了，殊不知接口的核心所在，被学长问的一问三不知，幸好，不然考核用的时候就真的一脸懵了，是否好奇那几天在干嘛？一、做个人网站下了一个phpstudy软件（功能实可以建一个本地服务器）生成一个类似于github或码云上的一个远程库，然后就是打算先在本地完善个人网站，差不多后推送到个人网站上，实现简单的页面刷新，同时看了几个视觉效果比较不错的博客，还想着先仿照一个，比如这个：http://www.lmlblog.com/blog/12/#
复制链接

扫一扫

专栏目录