1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes,width=device-width">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Index-模板</title>
9 <link rel="stylesheet" href="http://res.85732222.cn/wenz/wztong.css">
10 </head>
11 <style type="text/css">
12 * {
13 box-sizing: border-box;
14 margin: 0px;
15 }
16
17 html,
18 body {
19 height: 100%;
20 min-width: 350px;
21 width: 100%;
22 }
23
24 .div_main {
25 min-height: 100%;
26 padding-bottom: 150px;
27 width: 100%;
28 background-color: bisque;
29 }
30
31 .div_footer {
32 position: relative;
33 top: -150px;
34 height: 150px;
35 width: 100%;
36 background-color: burlywood;
37 }
38
39 @media only screen and (max-width:375px) and (max-height:667px) {
40 .div_footer {
41 background-color: lightblue;
42 }
43 }
44
45 .div_nav {
46 background-color: darkorange;
47 /* overflow: scroll; */
48 padding-left: 10%;
49 float: left;
50 width: 100%;
51 }
52
53 .div_nav_top {
54 padding: 5px 0px;
55 width: 300px;
56 background-color: darkorange;
57 }
58
59 .div_nav_top a {
60 padding: 5px;
61 background-color: darkorange;
62 border: 1px solid red;
63 /* float: left; */
64 }
65
66 .div_zuo {
67 float: left;
68 width: 30%;
69 height: 300px;
70 background-color: lavender;
71 }
72
73 .div_zuo_ul {
74 list-style-type: none;
75 width: 100%;
76 float: left;
77 background-color: plum;
78 padding: 0;
79 margin: 0;
80 }
81
82 .div_zuo_ul li {
83 padding: 5px;
84 }
85
86 .div_you {
87 float: left;
88 width: 70%;
89 height: 300px;
90 background-color: lightcyan;
91 }
92
93 .div_hezi {
94 display: flex;
95 flex-direction: row-reverse;
96 /* flex-flow: row-reverse wrap; */
97 flex-wrap: wrap-reverse;
98 }
99
100 .div_00 {
101 width: 50px;
102 height: 50px;
103 background-color: lightgoldenrodyellow;
104 border: 1px solid orange;
105 }
106 </style>
107
108 <body>
109 <div class="div_main">
110 <div class="div_nav">
111 <nav class="div_nav_top">
112 <a href="/html/">HTML</a>
113 <a href="/css/">CSS</a>
114 <a href="/script/">Script</a>
115 <a href="/jquery/">jQuery</a>
116 <a href="/html/">HTML</a>
117 </nav>
118 </div>
119 <div class="div_zuo">
120 <ul class="div_zuo_ul">
121 <li>
122 <a href="/html/">HTML</a>
123 </li>
124 <li>
125 <a href="/css/">CSS</a>
126 </li>
127 <li>
128 <a href="/script/">Script</a>
129 </li>
130 <li>
131 <a href="/jquery/">jQuery</a>
132 </li>
133 <li>
134 <a href="/html/">HTML</a>
135 </li>
136 </ul>
137 </div>
138 <div class="div_you">
139 <div class="div_hezi">
140 <div class="div_00">1</div>
141 <div class="div_00">2</div>
142 <div class="div_00">3</div>
143 <div class="div_00">4</div>
144 <div class="div_00">5</div>
145 <div class="div_00">6</div>
146 <div class="div_00">7</div>
147 <div class="div_00">8</div>
148 <div class="div_00">9</div>
149 </div>
150 </div>
151 </div>
152 <div class="div_footer">
153
154 </div>
155 </body>
156
157 </html>
浙公网安备 33010602011771号