Hello World1

Hello World2

TEXTssss

段落

<ul>
    <li class="list-item first-item">Bei Jing</li>
    <li class="list-item">Shang Hai</li>
    <li>Cheng Du</li>
</ul>

<ul>
    <li class="list-item">China</li>
    <li class="list-item">USA</li>
    <li class="list-item">Canada</li>
</ul>

<span>短文字，inline元素，不会换行；div,block元素，会换行</span>

<ol class="list-container">
    <li class="list-item"><span>School1</span></li>
    <li class="list-item">School2</li>
    <li class="list-item">School3</li>
</ol>

<li class="text-green brown-background yellow-border"></li>

<div class="yellowgreen">yellowgreen</div>
<div class="greenyellow">greenyellow</div>

<button class="btn">Click me</button>

<ul class="container">
    <li class="container-item">-1</li>
    <li class="container-item">0</li>
    <li class="container-item first-container-item">1</li>
    <li class="container-item">2</li>
    <li class="container-item">3</li>
    <li class="container-item">4</li>
    <li class="container-item">5</li>

</ul>

<div class="pseudo-element">
    ::before
    pseudo element
    ::after
</div>
<div class="unit-container"></div>

<div class="box"></div>
<br>
<div id="unit-parent">
    <div class="unit-container">
        .unit-container
    </div>
</div>

CSS篇 html { font-size: 10px; }

h1 { color: red; background-color: blue; width: fit-content; /* / display: inline; / */ }

h2 { background-color: purple; margin: 16px 8px 32px 48px; margin-right: 100px; padding: 16px 32px; border: 10px dashed red; }

/* select by id, which is supposed to be unique / / #id */ #myContainer { width: 100px; height: 100px; border: 3px solid blue; background-color: red; }

/* select by class name*/ /* .class */ .list-item { margin-top: 16px; color: blueviolet; }

.first-item { font-size: 32px; margin-top: 16px; color: greenyellow; }

.list-container .list-item span { color: yellowgreen; }

li.text-green.brown-background.yellow-border { color: greenyellow; background-color: brown; border: 1px solid yellow; }

.greenyellow, .yellowgreen { color: yellowgreen; }

.btn { padding: 16px; color: pink; background-color: white; border: 2px solid pink; }

/* pseudo class .class:hover... */ .btn:hover { color: white; background-color: pink; padding: 32px; }

.container-item.first-container-item { color: purple; }

.container-item:first-child { color: plum; }

.container-item:last-child { color: yellowgreen; }

.container-item:nth-child(4) { color: blueviolet; }

/* alternative color table蓝白相间的表格视觉的第一行就是代码所指的第一行，even就是偶数行，odd是奇数行 */ .container-item:nth-child(odd) { background-color: lightblue; }

/* pseudo element */ .pseudo-element::after { content: 'after text'; font-size: 4px; color: red; }

.pseudo-element::before { content: 'before text'; font-size: 4px; color: red; }

.box { width: 50px; height: 50px; background-color: blue; }

#unit-parent { font-size: 32px; width: 300px; }

.unit-container { /* em-relative to parent font size / / width: 3em; */

/* rem -relative to root element font size 
width: 3rem; */

/* percentage - relative to parent width */
/*  width: 5rem; */

/*  width: 100%;  */
/*  width: 100vw; */
/* view height - relative to viewport height */
width: 100vh;
height: 75px;
background-color: blueviolet;

}

.box:hover { width: 100px; /* transform: rotate(45deg);*/ transform: scale(1.5); transition: all 1s; }

日志2

Hello World1

Hello World2

TEXTssss