yuchinghsiang
/
Design - Yu Chinghsiang.html

<!--
By YCH 2/20/2020
 -->
 <!DOCTYPE html>
 <!-- saved from url=http://yuchinghsiang.gitee.io/ -->
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
        <meta name="description" content="设计体系">
        <meta name="author" content="Yu Chinghsiang">

        <style>
            p{
                background-color: pink;
            }

            .kitten-image{
                border-width: 0.5em;
                border-style: dashed;
                border-color: #fa8072;

                cursor: pointer;

                -webkit-box-shadow: 7px 10px 5px 1px rgba(0,0,0,0.75);
                -moz-box-shadow: 7px 10px 5px 1px rgba(0,0,0,0.75);
                box-shadow: 7px 10px 5px 1px rgba(0,0,0,0.75);
            }

            .udacity-text {
                /* add CSS here */
                font-family: Helvetica, Arial, sans-serif;
                color:#8001ff;
                text-decoration: underline;
                font-size: 3em;
                text-align: center;
                text-transform: uppercase;
            }

            #menu {
                text-align: center;
            }
            .item {
                color: red;
            }
            .picture {
                border-radius: 100px;

            }
            .description {
                font-style: italic;
            }
            #to-do-list {
                width: 400px;
                background: #2e3d49;
                padding: 10px 20px;
                text-align: left;
                border: solid #ce1a38
            }
            #to-do-list h1{
                color:#fff;
            }
            #to-do-list h2{
                color:#fff;
                text-decoration: underline;

            }

            .title {
                color: #fff;
            }
            .underline {
                text-decoration: underline;
            }
            .list {
                list-style-type: circle;
                text-align: left;
                font-size: 16px;
                color: #1fba58;
                line-height: 24px;
            }
            .finished {
                color: #f4442f;
                text-decoration: line-through;
            }

            .box-test{
                width: 200px;
                height: 300px;
                border: solid #2e3d49;
                Padding: 30px 10px;
                margin: 3px;
            }

        </style>

        <title>Design System</title>
    </head>

    <body data-gr-c-s-loaded="true">
        <hr style="margin-top:-10px;margin-bottom:10px">
        <b><ul style="text-align:center;">
        |<li style="display:inline;margin-left:4px;margin-right:4px;"><a href="./index.html" style="text-decoration: underline;">返回主页</a></li> |
        <hr style="margin-top:1px">
        </ul></b>

    <h1 style="color:blue">标题 (Heading 1)</h1>
    <h2>标题 (Heading 2)</h2>
    <h3>标题 (Heading 3)</h3>
    <h4>标题 (Heading 4)</h4>
    <h5>标题 (Heading 5)</h5>
    <h6>标题 (Heading 6)</h6>
    <small>small</small>

    <p>This is paragraph!</p>
    <span>I am span1 </span>
    <span>and span2.</span>
    <p><b>This text should be bold.</b></p>
    <p><em>And this text should have emphasis (italics).</em></p>

    <button>A BUTTON</button>
    <ul>
        <li style="display:inline" >HTML</li> |
        <li style="display:inline" >CSS</li> |
        <li style="display:inline" >JavaScript</li> |
        <li>c++</li>
        <li>python</li>
        <li>Matlab</li>
    </ul>

    <h1>树形结构</h1>
    <div>
      <p>你可以使用树形结构整理 HTML 文件，使它们更具有条理。</p>
      <p> 这不仅有利于可读性，还与 CSS、JavaScript 的风格和编程形式保持了一致。</p>
    </div>

    <a href="https://www.baidu.com">百度</a><br>
    <img src="http://udacity.github.io/fend/images/udacity.png" alt="Udacity Logo">

    <figure>
        <img src="redwoods_state_park.jpg" alt="Redwoods state park" width="100%">

        <figcaption>斯托特纪念森林，杰迪戴亚·史密斯红木州立公园，2011 年，由 Chmee2 拍摄
            。GFDL 或 CC BY-SA 3.0，来自 Wikimedia Commons -
            <a href="https://commons.wikimedia.org/wiki/File%3AStout_Memorial_Grove_in_Jedediah_Smith_Redwoods_State_Park_in_2011_(22).JPG">源出处</a>
        </figcaption>
    </figure>

    <!-- Image credit: Nicolas Suzor, https://www.flickr.com/photos/nicsuzor/ - via Flickr, Creative Commons. -->
    <img src="http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/kitten.jpg" alt="kitten" class="kitten-image">

    <h1 class="udacity-text">udacity</h1>

    <div id="menu">
            <h1 class="item">砂锅鸡肉煲仔饭</h1>
            <img src="./Blog - Yu Chinghsiang_files/clay-pot.jpg" alt="clay pot" class="picture">
            <p class="description">砂锅底部粒粒分明的米饭搭配滑嫩的鸡肉和爽口的蔬菜，令人回味无穷</p>
    </div>

    <div id="to-do-list">
        <h1>我的待办事项列表</h1>
        <h2>家务</h2>
        <ul class="list">
            <li>把碗碟放进洗碗机</li>
            <li>用吸尘器打扫起居室</li>
            <li>倒垃圾</li>
            <li class="finished">清扫车库</li>
        </ul>
        <h2>家庭作业</h2>
        <ul class="list">
            <li class="finished">针对科学项目开动脑筋</li>
            <li class="finished">解决 2 个微积分的问题</li>
            <li>学习以准备编程期中考试 :P</li>
            <li>完成优达学城前端开发（入门）的项目 0</li>
            <li class="finished">查找生物学研究报告的来源</li>
            <li>阅读《战争的艺术》的前两章</li>
        </ul>
        <h2>开派对</h2>
        <ul class="list">
            <li class="finished">发出邀请</li>
            <li>在酒店预订派对房间</li>
            <li>订购蛋糕！</li>
        </ul>
    </div>

    <div class="box-test">
        <p>
            nihao
        </p>

    </div>


    </body>
</html>