前端整理

Posted 2021-02-18 boygc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端整理相关的知识，希望对你有一定的参考价值。

默认提示（placeholder）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <input type="text" placeholder="用户名">
    <p id="d1" class="c1"></p>
</body>
</html>

技术图片

分组与嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div,p,span {  /*逗号表示并列关系*/
            color: yellow;
        }
        #d1,.c1,span  {
            color: orange;
        }
        #d1 .c2 span{
            color: red;
        }
    </style>
</head>
<body>
    <div id="d1">div
        <p class="c2">div>p
            <span id="d3">div>p>span1</span>
            <span id="d4">div>p>span2</span>
        </p>
        <p class="c3">
            sadjasdjkasldj
        </p>
    </div>
    <p class="c1">p</p>
    <span>span</span>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*访问之前的状态*/
            color: red;
        }
        a:hover {  /*需要记住*/
            color: aqua;  /*鼠标悬浮态*/
        }
        a:active {
            color: black;  /*鼠标点击不松开的状态  激活态*/
        }
        a:visited {
            color: darkgray;  /*访问之后的状态*/
        }
        p {
            color: darkgray;
            font-size: 48px;
        }
        p:hover {
            color: white;
        }
        
        input:focus {  /*input框获取焦点(鼠标点了input框)*/
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="https://www.jd.com/">小轩在不在?</a>
    <p>点我有你好看哦</p>
    <input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p:first-letter { /*文本第一个字设置*/
            font-size: 48px;
            color: orange;
        }
        p:before {  /*在文本开头 同css添加内容*/
            content: ‘你说的对‘;
            color: blue;
        }
        p:after {
            content: ‘雨露均沾‘;
            color: orange;
        }
    </style>
</head>
<body>
    <p>装备差进任何本都是血赚,装备差进任何本都是血赚</p>
</body>
</html>

选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        /*
            1.选择器相同 书写顺序不同
                就近原则:谁离标签更近就听谁的
            2.选择器不同 ...
                行内 > id选择器  > 类选择器 > 标签选择器
                精确度越高越有效
        */
        #d1 {
            color: aqua;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        
        /*p {*/
        /*    color: red;*/
        /*}*/
    </style>
<!--    <link rel="stylesheet" href="mycss1.css">-->
</head>
<body>
    <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~</p>
</body>
</html>

长宽设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            background-color: red;
            height: 200px;
            width: 400px;
        }
        span {
            background-color: green;
            height: 200px;
            width: 400px;
            /*行内标签无法设置长宽 就算你写了 也不会生效*/
        }
    </style>
</head>
<body>
    <p>ppp</p>
    <span>span</span>
</body>
</html>

字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            /*font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

            /*font-size: 24px;  !*字体大小*!*/

            /*font-weight: inherit;  !*bolder lighter 100~900 inherit继承父元素的粗细值*!*/

            /*color: red;  !*直接写颜色英文*!*/
            /*color: #ee762e;  !*颜色编号*!*/
            /*color: rgb(128,23,45);  !*三基色 数字  范围0-255*!*/
            /*color: rgba(23, 128, 91, 0.9);  !*第四个参数是颜色的透明度 范围是0-1*!*/

            /*当你想要一些颜色的时候 可以利用现成的工具
                1 pycharm提供的取色器
                2 qq或者微信截图功能

                微信公众号:软件管家...
            */
        }
    </style>
</head>
<body>
    <p>曹老板 抬人！！！fuck off!</p>
</body>
</html>

文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        p {
            /*text-align: center;  !*居中*!*/
            /*text-align: right;*/
            /*text-align: left;*/
            /*text-align: justify;  !*两端对齐*!*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
            /*text-decoration: none;*/
            /*在html中 有很多标签渲染出来的样式效果是一样的*/
            font-size: 16px;
            text-indent: 32px;    /*缩进32px*!*/
            /*text-indent: 2em;   !*缩进2个字符*!*/
        }
        a {
            text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
        }
    </style>
</head>
<body>
     <p>我要感谢我的导师，要不是他，我论文早写完了（狗头）</p>
     <a href="https://www.jd.com/">点我</a>
    
</body>
</html>

背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        div {
            height: 800px;
            width: 800px;
            /*background-color: red;*/
            /*背景图片*/
            /*background-image: url("222.png");  !*默认要全部铺满*!*/
            /*background-repeat: no-repeat;  !*不铺*!*/
            /*background-repeat: no-repeat;  !*不铺*!*/
            /*background-repeat:repeat-x;  */
            /*background-repeat:repeat-y;  */
            /*其实浏览器不是一个平面  是一个三维立体结构
            z轴指向用户 越大离用户越近
            */
            /*background-position:center center;  !*第一个左  第二个上*!*/

            /*如果出现了多个属性名前缀是一样的情况 一般情况下都可以简写 只写前缀*/
            background: red url("222.png") no-repeat center center;  /*只需要填上你想要加的参数即可 位置没有关系 参数个数也不做限制 加就显示不加就用默认的设置*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

背景图片小例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #d1 {
            height: 500px;
            background-color: red;
        }
        #d2 {
            height: 500px;
            background-color: green;
        }
        #d3 {
            height: 500px;
            background-image: url("222.png");
            background-attachment: fixed;
        }
        #d4 {
            height: 500px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*border-left-width: 5px;*/
            /*border-left-color: red;*/
            /*border-left-style: dotted;*/

            /*border-right-width: 10px;*/
            /*border-right-color: greenyellow;*/
            /*border-right-style: solid;*/

            /*border-top-width: 15px;*/
            /*border-top-color: deeppink;*/
            /*border-top-style: dashed;*/

            /*border-bottom-width: 10px;*/
            /*border-bottom-color: tomato;*/
            /*border-bottom-style: solid;*/
            border: 3px solid red;  /*三者位置可以随意写*/

        }
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }
    </style>
</head>
<body>
    <p>穷人  被diss到了  哭泣.png</p>
    <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子</div>
    <div id="d1"></div>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /*#d1 {*/
        /*    !*display: none;  !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/
        /*    display: inline;  !*将标签设置为行内标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: inline;*/
        /*}*/

        /*#d1 {*/
        /*    display: block;  !*将标签设置成块儿级标签的特点*!*/
        /*}*/
        /*#d2 {*/
        /*    display: block;*/
        /*}*/

        /*#d1 {*/
        /*    display: inline-block;*/
        /*}*/
        /*#d2 {*/
        /*    display: inline-block;  !*标签即可以在一行显示又可以设置长宽*!*/
        /*}*/
    </style>
</head>
<body>
<div style="display: none">div1</div>
<div>div2</div>
<div style="visibility: hidden">单纯的隐藏 位置还在</div>
<div>div4</div>
<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->

<!--<span id="d1" style="height: 100px;width: 100px;background-color: red">span</span>-->
<!--<span id="d2" style="height: 100px;width: 100px;background-color: greenyellow">span</span>-->

<!--<div id="d1" style="height: 100px;width: 100px;background-color: red">01</div>-->
<!--<div id="d2" style="height: 100px;width: 100px;background-color: greenyellow">02</div>-->
</body>
</html>

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
    <p style="border: 1px solid red;" id="d1">ppp</p>
    <p style="border: 1px solid orange;" id="d2">ppp</p>
    <div style="border: 3px solid red;height: 400px;width: 400px">
        <div id=‘dd‘ style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>
    </div>

<p>ppp</p>



</body>
</html>

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            height: 200px;
            width: 200px;
            background-color: red;
            float: left;  /*浮动  浮到空中往左飘*/
        }
        #d2 {
            height: 200px;
            width: 200px;
            background-color: greenyellow;
            float: right;   /*浮动 浮到空中往右飘*/
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

浮动小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        #d1 {
            width: 20%;
            height: 1000px;
            background-color: #4e4e4e;
            float: left;
        }
        #d2 {
            width: 80%;
            height: 1000px;
            background-color: blue;
            float: right;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2">

</div>
</body>
</html>

以上是关于前端整理的主要内容，如果未能解决你的问题，请参考以下文章

常用python日期日志获取内容循环的代码片段