css初学
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
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
绝对定位，位置想在哪里就在哪里
