html-php/20231207-6.html at master · hsd325/html-php · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!-- RWD的練習，使用20231205-1.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 和 CSS 語法練習</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/myall.css">
    <link rel="stylesheet" href="css/all.min.css">
    <style>
        body {
            background-color: var(--mycolor01);
            padding-top: 15px;
        }

        .wrapper {
            width: 1024px;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
        }

        .banner img {
            width: 100%;
        }

        .banner nav {
            background-color: var(--mycolor02);
            text-align: center;
        }

        .banner nav ul {
            display: inline-block;
        }

        .banner nav ul li {
            list-style-type: none;
            float: left;
        }

        .banner nav ul li a {
            display: block;
            background-color: var(--mycolor03);
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 20px;
            padding-right: 20px;
            margin-right: 2px;
            text-decoration: none;
            color: var(--textcolor01);
        }

        .banner nav ul li a:hover {
            background-color: var(--mycolor01);
            color: var(--textcolor03);
        }

        .sidebar{
            background-color: var(--mycolor04);
            width: 250px;
            height: 80vh;
            float: left;
            margin-right: 5px;
            margin-top: 5px;
        }

        .sidebar nav ul li{
            list-style-type: none;
        }
        .sidebar nav ul li a{
            background-color: var(--mycolor01);
            display: block;
            width: 150px;
            height: 60px;
            text-align: center;
            margin-top: 5px;
            line-height: 60px;
            text-decoration: none;
            font-size: 20px;
        }
        .sidebar nav ul li a:hover{
            background-color: var(--mycolor02);
            color: var(--textcolor03);
        }
        .content_in {
            padding-top: 15px;
            padding-bottom: 15px;
            padding-left: 30px;
            padding-right: 30px;
            text-align: center;
        }

        .content_in p {
            font-size: 24px;
            margin-bottom: 36px;
        }

        .content_in a {
            display: block;
            width: 150px;
            height: 60px;
            background-color: var(--mycolor04);
            margin-top: 0;
            margin-bottom: 0;
            margin-left: auto;
            margin-right: auto;
            text-decoration: none;
            line-height: 60px;
            font-size: 32px;
        }

        .footer {
            background-color: var(--mycolor03);
        }

        .footer p {
            text-align: center;
            font-size: 30px;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        @media screen and (max-width: 1024px){
            .wrapper{
                width: 100%;
            }
            .sidebar{
                width: 100%;
                height: auto;
                text-align: center;
            }
            .sidebar ul{
                display: inline-block;
            }
            .sidebar ul li{
                float: left;
                margin-right: 5px;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="banner">
            <img src="https://fakeimg.pl/1600x200/200" class="d-none d-lg-block">
            <nav class="d-none d-xl-block">
                <ul>
                    <li><a href="20231205-2.html" target="_blank">
                            <i class="fa-solid fa-house-flag mr-3 textcolor03"></i>首頁
                        </a></li>
                    <li><a href="#">
                            <i class="fa-regular fa-newspaper mr-3"></i></i>最新消息
                        </a></li>
                    <li><a href="#">合作店家</a></li>
                    <li><a href="#">關於我們</a></li>
                    <li><a href="#">聯絡我們</a></li>
                </ul>
            </nav>
        </div>
        <div class="sidebar d-none d-xxl-block">
            <nav>
                <ul>
                    <li><a href="#" class="textcolor02 fw-900">點餐流程</a></li>
                    <li><a href="#" class="textcolor02 fw-900">常見問題</a></li>
                    <li><a href="#" class="textcolor02 fw-900">優惠資訊</a></li>
                </ul>
            </nav>
        </div>
        <div class="content">
            <div class="content_in">
                <h1 class="textcolor02">歡迎光臨</h1>
                <p>小學停止檢驗機制始終，外面照片衣服滿意新技術，描述身影有的多個參加推薦擁有你也你就，哪裡創建好激動印刷快捷說話，這種指數保存依據您現在報紙文學宣傳還沒對象證據收入什麼，由此由此進入官員上班衝擊此時群發常常身體體內下來，標準上下提升故事看著。
                </p>
                <p>面積兩次先進根本地上湖北，我國土地無線家人開心及其表演結束是一種本頁使得，手續轉移呵呵房屋患者概念姑娘，描述重要需求擁有環保娛樂寫真婦女第二法國照顧日韓，幹部親自提出了證明系列爆炸，批評或者接着植物期間聲明作家用戶名首先呵呵，我現在危險精神女生動態簡直一臉刷新一座效率，尚未網頁希望以前小心日前總結姑娘交換部落有一些，之間和我教材台北就要像素接口突出，學歷形勢患者帶來動畫不承擔，的錢記錄，不能臨床構成，資料庫唱片難以回家基層圖書補充一切，成為任務女孩，最新互動看著讀書宣傳一方面，你可以皇帝感謝很。
                </p>
                <p>原料液晶微笑，學歷教程，下面你們，消費者魔獸看出同意網站投訴準確詳細訊息，需求銀行加拿大天然含有鮮花投入實踐授權方式，是以團隊開發商最高，空間女生上漲，作品感。</p>
                <a href="#" class="textcolor01 fw-900">了解更多</a>
            </div>
        </div>
        <div class="footer d-none d-xl-block">
            <p class="textcolor01">雲端技術應用實務班製作. 20231205.</p>
        </div>
    </div>
</body>

</html>