<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、求同存异
丶五月的夏天 在幕客网讲的vue3 教程笔记开发 todolist
教程网址：https://www.imooc.com/learn/1300
todolist例网址：http://test.jiandanyong.com/todolist/
/* 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) { }
style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
//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));//<p><b>123&456</b></p>
//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);//<p><b>123&456</b></p>
console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>
简单用