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%

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券