css初学 位置随机调整，为屏幕宽度的50%
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>所有字段的解释都在代码里面说明了的
这里就不再解释
贴上页面效果：
TTyb-css
<!-- .background { background-image:url('面向对象编程.jpg'); background-repeat:no-repeat; background-position:right top; margin-right:1000px width:2000px; padding:10px; margin:10px; z-index:-1;/*-1表示图片位置在文字的后面，即真的变成了背景，但是这里是多此一举，因为上面写了background-image*/ } #font { font-size:30px; } .table { width:20%; border:1px solid black; } #tabel_tr { vertical-align:middle; } #table_td_th { border:1px solid black; background-color:green; color:white; vertical-align:middle; padding:10px } #boeder { width:250px; padding:10px; border:5px solid gray; margin:10px; } #absolute { position:absolute; left:400px; top:500px; } #auto { margin:auto; width:50%; } #inline { display:inline; background-color:#dddddd; } -->
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
绝对定位，位置想在哪里就在哪里
位置随机调整，为屏幕宽度的50%
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-08-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录