1 <!--
2
3
4 我就是我，不一样的烟花
5 piu piu piu 干啥子
6 如来神掌 -- ---
7 -----
8 .======. ***********啊啊啊啊啊啊
9 | INRI |
10 | |
11 | |
12 .========‘ ‘========.
13 | _ xxxx _ |
14 | /_;-.__ / _\ _.-;_\ |
15 | `-._`‘`_/‘`.-‘ |
16 ‘========.`\ /`========‘
17 | | / |
18 |/-.( |
19 |\_._\ |
20 | \ \`;|
21 | > |/|
22 | / // |
23 | |// |
24 | \(\ |
25 | `` |
26 | |
27 | |
28 | |
29 | | 是不是啊 不是~~~
30
31 ……………………………………………………………………………………
32
33 ！！！！！
34 \\ - - //
35 (-● ●-)
36 \ (_) /
37 \ u /
38 ┏oOOo-━━━━━━━━┓
39 ┃ ┃
40 ┃ 耶稣保佑！ ┃
41 ┃ 永无BUG！！！┃
42 ┃ ┃
43 ┗━━━━━━━━-oOOo┛
44
45 ……………………………………………………………………………………
46 -->
47
48 <!--
49 _oo0oo_
50 088888880
51 88" . "88
52 (| -_- |)
53 0\ = /0
54 ___/‘---‘\___
55 .‘ \\\\| |// ‘.
56 / \\\\||| : |||// \ 57 /_ ||||| -:- |||||- \ 58 | | \\\\\\ - /// | |
59 | \_| ‘‘\---/‘‘ |_/ |
60 \ .-\__ ‘-‘ __/-. /
61 ___‘. .‘ /--.--\ ‘. .‘___
62 ."" ‘< ‘.___\_<|>_/___.‘ >‘ "".
63 | | : ‘- \‘.;‘\ _ /‘;.‘/ - ‘ : | |
64 \ \ ‘_. \_ __\ /__ _/ .-‘ / /
65 =====‘-.____‘.___ \_____/___.-‘____.-‘=====
66 ‘=---=‘
67
68
69 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
70 佛祖保佑 iii 永无BUG
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 代码无BUG!
97 -->
98 <!DOCTYPE html>
99 <html>
100 <head>
101 <meta charset="utf-8">
102 <title>TTyb-css</title>
103 <style>
104 .background
105 {
106 background-image:url(‘面向对象编程.jpg‘);
107 background-repeat:no-repeat;
108 background-position:right top;
109 margin-right:1000px
110 width:2000px;
111 padding:10px;
112 margin:10px;
113 z-index:-1;/*-1表示图片位置在文字的后面，即真的变成了背景，但是这里是多此一举，因为上面写了background-image*/
114 }
115
116 #font
117 {
118 font-size:30px;
119 }
120
121 .table
122 {
123 width:20%;
124 border:1px solid black;
125 }
126
127 #tabel_tr
128 {
129 vertical-align:middle;
130 }
131
132
133 #table_td_th
134 {
135 border:1px solid black;
136 background-color:green;
137 color:white;
138 vertical-align:middle;
139 padding:10px
140 }
141
142 #boeder
143 {
144 width:250px;
145 padding:10px;
146 border:5px solid gray;
147 margin:10px;
148 }
149
150 #absolute
151 {
152 position:absolute;
153 left:400px;
154 top:500px;
155 }
156
157 #auto
158 {
159 margin:auto;
160 width:50%;
161 }
162
163 #inline
164 {
165 display:inline;
166 background-color:#dddddd;
167 }
168
169
170
171
172 </style>
173 </head>
174
175 <body class = "background">
176 <div>
177 <ul>
178 <li id = "inline"><a href="file:///D:/htmlcode/test_css.html">返回主页</a></li>
179 <li id = "inline"><a href="file:///D:/htmlcode/test_css.html">还是返回主页</a></li>
180 <li id = "inline"><a href="file:///D:/htmlcode/test_css.html">就是返回主页</a></li>
181 <li id = "inline"><a href="file:///D:/htmlcode/404%20not%20found.html" target="_blank">404notfound</a></li>
182 </ul>
183 </div>
184
185 <div>
186 <h1>Hello World!</h1>
187 <p>background-repeat:no-repeat背景图片不重复</p>
188 <p id = "font">background-position:right top 右上显示</p>
189 <p>margin-right:1000px 右边距,1000刚好合适</p>
190 </div>
191
192 <div>
193 <table class = "table">
194 <tr id = "tabel_tr">
195 <th id = "table_td_th">属性</th>
196 <th id = "table_td_th">描述</th>
197 </tr>
198 <tr>
199 <td id = "table_td_th">margin-bottom</td>
200 <td id = "table_td_th">设置元素的下外边距。</td>
201 </tr>
202 <tr>
203 <td id = "table_td_th">margin-left</td>
204 <td id = "table_td_th">设置元素的左外边距。</td>
205 </tr>
206 <tr>
207 <td id = "table_td_th">margin-right</td>
208 <td id = "table_td_th">设置元素的右外边距。</td>
209 </tr>
210 <tr>
211 <td id = "table_td_th">margin-top</td>
212 <td id = "table_td_th">设置元素的上外边距。</td>
213 </tr>
214 </table>
215 </div>
216
217 <div id = "boeder">
218 <p>整个页面可以同这个框架，应该可以做到文本在中间显示，已经加入整个页面，padding:10px为填充扩宽10px</p>
219 </div>
220
221 <div id = "absolute">
222 <p>绝对定位，位置想在哪里就在哪里</p>
223 </div>
224
225 <div id = "auto">
226 <img border="0" src = "背景动图.gif" alt="Pulpit rock">
227 <h2><i>位置随机调整，为屏幕宽度的50%</i></h2>
228 </div>
229
230
231 </body>
232
233 </html>
所有字段的解释都在代码里面说明了的
这里就不再解释
贴上页面效果：
|/|
| / // |
| |// |
| \(\ |
| `` |
| |
| |
| |
| | 是不是啊 不是~~~
……………………………………………………………………………………
！！！！！
\\ - - //
(-● ●-)
\ (_) /
\ u /
┏oOOo-━━━━━━━━┓
┃ ┃
┃ 耶稣保佑！ ┃
┃ 永无BUG！！！┃
┃ ┃
┗━━━━━━━━-oOOo┛
……………………………………………………………………………………
-->
_/___.‘ >‘ "".
| | : ‘- \‘.;‘\ _ /‘;.‘/ - ‘ : | |
\ \ ‘_. \_ __\ /__ _/ .-‘ / /
=====‘-.____‘.___ \_____/___.-‘____.-‘=====
‘=---=‘
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
佛祖保佑 iii 永无BUG
-->
TTyb-css
- 返回主页
- 还是返回主页
- 就是返回主页
- 404notfound
Hello World!
background-repeat:no-repeat背景图片不重复
background-position:right top 右上显示
margin-right:1000px 右边距,1000刚好合适
| 属性 | 描述 |
|---|---|
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
整个页面可以同这个框架，应该可以做到文本在中间显示，已经加入整个页面，padding:10px为填充扩宽10px
绝对定位，位置想在哪里就在哪里
