前端开发

用CSS画先天八卦

内容

<style>        .yang{            display: block;            width: 40px;            height: 8px;            background-color: black;            margin-bottom: 8px;        }        .yin{            display: block;            position: relative;            width: 40px;            height: 8px;            background-color: black;            margin-bottom: 8px;        }        .yin::after{            content: "";background-color: white;height: 10px;position: absolute;top: -1px;width: 8px;left: 16px;        }        .baguatuwai{            display: block;            position: relative;            width: 300px;            border-radius: 150px;             height: 300px;            margin: 60px auto;            margin-top:-360px;                    }        .baguatu{            display: block;            position: relative;            width: 300px;            border-radius: 150px;            border:1px solid black;            height: 300px;            margin: 60px auto;            overflow: hidden;        }

       .blackbanyuan{            position: absolute;            left: 50%;            display: block;            width: 300px;            height: 300px;            background-color: black;            border:1px solid black;        }

       .xiaobanyuanblack{            position: absolute;            top:50%;            left: 50%;            margin-left: -75px;            display: block;            width: 150px;            height: 150px;            background-color: black;            border:1px solid black;            border-radius: 50%;        }        .xiaobanyuanwhite{            position: absolute;            left: 50%;                    margin-left: -75px;            display: block;            width: 150px;            height: 150px;            background-color: white;            border:1px solid white;            border-radius: 50%;        }

       .tongxinyuanblack{            position: absolute;            top: 16.6%;            left:50%;            margin-left: -25px;            width: 50px;            height: 50px;            border-radius: 25px;            background-color: black;        }        .tongxinyuanwhite{            position: absolute;            bottom: 16.6%;            left:50%;            margin-left: -25px;            width: 50px;            height: 50px;            border-radius: 25px;            background-color: white;        }

       .yao{            position: absolute;            display: flex;flex-direction: column;        }        .qian{           left: 50%;top: -48px;margin-left: -20px;        }        .kun{            left: 50%;bottom: -56px;margin-left: -20px;        }        .zhen{            bottom: 8px;            /* Rotate div */transform:rotate(226deg);-ms-transform:rotate(226deg); /* Internet Explorer */-moz-transform:rotate(226deg); /* Firefox */-webkit-transform:rotate(226deg); /* Safari 和 Chrome */-o-transform:rotate(226deg); /* Opera */        }        .li{            top: 50%;left: -48px;margin-top: -20px;        }        .dui{          left: 8px;            /* Rotate div */transform:rotate(316deg);-ms-transform:rotate(316deg); /* Internet Explorer */-moz-transform:rotate(316deg); /* Firefox */-webkit-transform:rotate(316deg); /* Safari 和 Chrome */-o-transform:rotate(316deg); /* Opera */        }        .xuan{            right: 8px;                     /* Rotate div */transform:rotate(46deg);-ms-transform:rotate(46deg); /* Internet Explorer */-moz-transform:rotate(46deg); /* Firefox */-webkit-transform:rotate(46deg); /* Safari 和 Chrome */-o-transform:rotate(46deg); /* Opera */        }        .kan{            right: -48px;top: 50%;margin-top: -20px;        }        .gen{            right: 8px;bottom: 0px;                /* Rotate div */                transform:rotate(136deg);-ms-transform:rotate(136deg); /* Internet Explorer */-moz-transform:rotate(136deg); /* Firefox */-webkit-transform:rotate(136deg); /* Safari 和 Chrome */-o-transform:rotate(136deg); /* Opera */        }    </style>



   <div class="baguatu">        <div class="blackbanyuan"></div>        <div class="xiaobanyuanblack"></div>        <div class="xiaobanyuanwhite"></div>

       <div class="tongxinyuanblack"></div>        <div class="tongxinyuanwhite"></div>    </div>

   <div class="baguatuwai">        <div class="yao qian">            <span class="yang"></span>                        <span class="yang"></span>            <span class="yang"></span>         </div>                 <div class="yao kun">            <span class="yin"></span>            <span class="yin"></span>            <span class="yin"></span>         </div>                 <div class="yao zhen">            <span class="yin"></span>            <span class="yin"></span>            <span class="yang"></span>         </div>                 <div class="yao li">            <span class="yang"></span>            <span class="yin"></span>            <span class="yang"></span>         </div>                 <div class="yao dui">                       <span class="yin"></span>            <span class="yang"></span>            <span class="yang"></span>         </div>                      <div class="yao xuan">            <span class="yang"></span>            <span class="yang"></span>            <span class="yin"></span>          </div>         <div class="yao kan">            <span class="yin"></span>             <span class="yang"></span>            <span class="yin"></span>          </div>                 <div class="yao gen">            <span class="yang"></span>            <span class="yin"></span>                      <span class="yin"></span>          </div>        

   </div>

            <h1>先天八卦</h1>

  <div style="display: flex;"> 阳爻:<span class="yang"></span> </div>

  <div style="display: flex;"> 阴爻:<span class="yin"></span></div>

   <p>曾仕强(1935年10月20日-2018年11月11日)国学大师、中国式管理大师,全球华人中国式管理第一人,被称为“中国式管理之父”,曾任台湾交通大学教授,台湾兴国管理学院校长。</p>    

   <p>        人生只做三件事,知道此生为何而来,这是目标,知道如何完成,这是方法,知道如何做得更好,这是改善。三件事听起来简单,真正做起来并不那么容易,需要付出一生的时间和精力。

   </p>

   <p>人能弘道,非道弘人。 —论语 卫灵公        孔子说,宇宙的密码已经揭开了,等带着人把他发扬光大。    </p>    <p>

三把钥匙:1、伏羲八卦  2、文王64卦  3、孔子的周易 《十翼》    </p>    <p>        学习《易经》的意义1、纠正似是而非的观念3、具有神秘性道德性2、求同存异

标签

css,先天八卦

vue3 教程笔记开发 todolist

内容

丶五月的夏天 在幕客网讲的vue3 教程笔记开发 todolist

教程网址:https://www.imooc.com/learn/1300


todolist例网址:http://test.jiandanyong.com/todolist/



标签

vue3

CSS3可以根据分辨率来识别设备类型,然后写相应的CSS代码:

内容



/* Custom, iPhone Retina */

@media only screen and (min-width : 320px) { }


/* Extra Small Devices, Phones */

@media only screen and (min-width : 480px) { }


/* Small Devices, Tablets */

@media only screen and (min-width : 768px) { }


/* Medium Devices, Desktops */

@media only screen and (min-width : 992px) { }


/* Large Devices, Wide Screens */

@media only screen and (min-width : 1200px) { }

标签

css

css文本超出div就隐藏并且显示省略号

内容

style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"


overflow:hidden; //超出的文本隐藏



text-overflow:ellipsis; //溢出用省略号显示



white-space:nowrap; //溢出不换行






标签

css

用js对HTML转义和html反转义

内容

//HTML转义

function HTMLEncode(html) {

var temp = document.createElement("div");

(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);

var output = temp.innerHTML;

temp = null;

return output;

}



var tagText = "<p><b>123&456</b></p>";

console.log(HTMLEncode(tagText));//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;



//HTML反转义

function HTMLDecode(text) {

var temp = document.createElement("div");

temp.innerHTML = text;

var output = temp.innerText || temp.textContent;

temp = null;

return output;

}

var tagText = "<p><b>123&456</b></p>";

var encodeText = HTMLEncode(tagText);

console.log(encodeText);//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;

console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>



标签

js

|{ value.name }