11.23CSS笔记

每一步的编写过程都在代码里面书写了，暂且记录下来

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8" content="This is a meta data" name="dengyexun">
  5     <title>Title</title>
  6     <link rel="stylesheet" type="text/css" href="home.html">
  7     <style>
  8         body {
  9 
 10         }
 11         a:link{
 12             color: burlywood;
 13             text-decoration: none;
 14         }
 15         a:visited{
 16             color: #FF0000;
 17             text-decoration: none;
 18         }
 19         a:hover{
 20             color: blueviolet;
 21             text-decoration: underline;
 22         }
 23         a:active{
 24             color: darkmagenta;
 25         }
 26         p.fix_pos {
 27             font-family: SansSerif, 'Times New Roman';
 28             font-size: 30px;
 29             font-style: italic;
 30             font-weight: bold;
 31             position: fixed;
 32             top: 300px;
 33             right: 10px;
 34         }
 35 {#        h1 {#}
 36 {#            color: cornflowerblue;#}
 37 {#            text-align: center;#}
 38 {#        }#}
 39         #hcolor {
 40             color: aquamarine;
 41             letter-spacing: 2px;
 42             text-align: center;
 43             text-shadow: 2px 2px #FF0000;
 44         }
 45         a {
 46             display: block;
 47             width: 80px;
 48             background-color: #98bf21;
 49         }
 50         #getIn {
 51             height: 20px;
 52             width: 100px;
 53             background-color: burlywood;
 54         }
 55         ul.animal{
 56             list-style-type: square;
 57         }
 58         ul.trans{
 59             list-style-type: circle;
 60         }
 61         #info{
 62             font-family: SansSerif;
 63             width: 40%;
 64             border-collapse: collapse;
 65         }
 66         #info td, #info th{
 67             font-size: 1em;
 68             border: 1px solid #98bf21;
 69             padding: 3px 7px 2px 7px;
 70         }
 71         #info th{
 72             font-size: 1.1em;
 73             text-align: left;
 74             padding-top: 5px;
 75             padding-bottom:4px;
 76             background-color: #a7c942;
 77             color: #ffffff;
 78         }
 79         #info tr.alt td{
 80             color: #000000;
 81             background-color: #eaf2d3;
 82         }
 83 
 84         div.ex{
 85             width: 220px;
 86             padding: 10px;
 87             border-top-style: groove;
 88             border-right-style: solid;
 89             border-bottom-style: groove;
 90             border-left-style: solid;
 91             margin: 5px;
 92             outline: dotted green;
 93         }
 94         h2.left_pos{
 95             position: absolute;
 96             top: 50px;
 97             left: 20px;
 98         }
 99         h2.right_pos{
100             position: relative;
101             right: 20px;
102         }
103         #clip_pic{
104             position: absolute;
105             clip: rect(30px,200px,200px,20px);
106         }
107         div.scroll{
108             background-color: gray;
109             width: 100px;
110             height: 180px;
111             overflow: scroll;
112         }
113         div.container{
114             width: 100%;
115             border: 1px solid gray;
116             margin:0px;
117             line-height: 150%;
118         }
119         div.header , div.footer {
120             padding: 0.5em;
121             background-color: gray;
122             clear: left;
123             color: white;
124         }
125         h1.header{
126             padding: 0px;
127             margin: 0px;
128         }
129         div.left{
130             float: left;
131             width: 180px;
132             margin: 1px;
133             padding: 1em;
134         }
135         div.content{
136             margin-left: 190px;
137             border-left: 1px solid gray;
138             padding: 1em;
139         }
140         div.auto_center{
141             margin-left: auto;
142             margin-right: auto;
143             width: 70%;
144         }
145         div.left {
146             position: absolute;
147             left: 8px;
148             width: 100px;
149         }
150         a.wei:visited {
151             color: #98bf21;
152         }
153         p:first-line{
154             color: #98bf21;
155             font-family: SansSerif;
156         }
157         p:first-letter{
158             color: black;
159             font-size: x-large;
160         }
161         h1:before{
162             content: url("/static/img/dyx.png");
163         }
164         h1:after{
165             content:url("/static/img/dyx.png");
166         }
167         ul{
168             list-style-type: none;
169             margin: 10px;
170             padding: 0px;
171         }
172     </style>
173 </head>
174 <body>
175 
176     <input id="getIn" type="text" name="one"/>
177     <p class="fix_pos">This is a fixed position</p>
178     <script>
179         document.write('hello!')
180     </script>
181     <br>
182     <br>
183     <br>
184     <br>
185     <br>
186     <br>
187     <h2 class="left_pos">This is a relative position</h2>
188     <h2 class="right_pos">This is a relative position</h2>
189     <h2>This is a relative position</h2>
190 
191 
192     <ul class="animal">
193         <li>cat</li>
194         <li>dog</li>
195         <li>pig</li>
196     </ul>
197     <ul class="trans">
198         <li>bike</li>
199         <li>car</li>
200         <li>plane</li>
201     </ul>
202     <table>
203         <tr>
204             <th>list_01</th>
205             <th>list_02</th>
206             <th>list_03</th>
207         </tr>
208         <tr>
209             <td>dog</td>
210             <td>cat</td>
211             <td>bird</td>
212         </tr>
213         <tr>
214             <td>flower</td>
215             <td>green</td>
216             <td>blue</td>
217         </tr>
218     </table>
219     <br>
220 
221     <table id="info">
222         <tr>
223             <th>name</th>
224             <th>age</th>
225             <th>sex</th>
226         </tr>
227         <tr class="alt">
228             <td>Brown</td>
229             <td>23</td>
230             <td>male</td>
231         </tr>
232         <tr>
233             <td>Alice</td>
234             <td>18</td>
235             <td>female</td>
236         </tr>
237         <tr class="alt">
238             <td>Bob</td>
239             <td>33</td>
240             <td>male</td>
241         </tr>
242         <tr>
243             <td>Tom</td>
244             <td>17</td>
245             <td>male</td>
246         </tr>
247         <tr class="alt">
248             <td>Jerry</td>
249             <td>18</td>
250             <td>female</td>
251         </tr>
252         <tr>
253             <td>King</td>
254             <td>5</td>
255             <td>male</td>
256         </tr>
257     </table>
258 
259     <div class="ex">
260         This is a temp
261         I like you
262         I would like to give you some colors see see!
263     </div>
264 
265 
266 {#    <img id="true_pic" src="/static/img/dyx.png" width="300" height="350" alt="this is a picture">#}
267 {#    <img id="clip_pic" src="/static/img/dyx.png" width="300" height="300">#}
268 
269     <div class="scroll">
270         键盘上有3个指示灯,左边两个对应于常用的Num lock和Caps Lock键，想必大家都熟悉,下面为大家介绍对应最右边指示灯的Scroll Lock键：
271         Scroll Lock键最早出现在IBM的PC/XT机型的83键盘和AT接口的84键盘上，这个键不仅仅出现在PC机的101键盘上，连苹果机的“增强”型键盘上也加上了该按键。该键在DOS时期用处很大，由于当时显示技术，限制了屏幕只能显示宽25行、长80个字符的文字，在阅读文档时，使用该键能非常方便地翻滚页面。
272     </div>
273 
274     <span style="cursor: text">
275             text
276     </span>
277     <span style="cursor: alias">
278         alias
279     </span>
280     <span style="cursor: crosshair">
281         crosshair
282     </span>
283     <span style="cursor: inherit">
284         inherit
285     </span>
286 
287     <br>
288     <br>
289     <br>
290     <div class="container">
291         <div class="header"><h1 class="header">I am very sad yesterday and today!Because I lost my IDcard</h1> </div>
292         <div class="left">Don't be afraid! I can got it! you must love the life</div>
293         <div class="content">国家科技部国际合作科技项目评审专家；国家科技部人才留学评审专家；
294 301             国际国内学术期刊Neurocomputing, IEEE 会刊，中国科学E辑、自然科学进展、电子学报、软件学报、自动化学报等评审专家</div>
302         <div class="footer">Copyright 2017 by deng</div>
303 
304     </div>
305 
306     <br>
307     <div class="auto_center">
308         国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目评审专家
309     </div>
310     <br>
311     <br>
312     <a class="wei" href="show.html">点击</a>
313     <p>国家科技部国际合作科技项目评审专家国家科技部国际合作科技项目<br>
314         评审专家国家科技部国际合作科技项目评审专家评审专家国家科技部国际合作科技项目评审专家</p>
315     <ul>
316         <li><a href="home.html">Home</a></li>
317         <li><a href="home.html">News</a></li>
318         <li><a href="home.html">Contact</a></li>
319         <li><a href="home.html">About</a></li>
320     </ul>
321 
322 </body>
323 </html>

 

posted @ 2017-11-23 16:35  今夜无风  阅读(202)  评论(0)  编辑  收藏  举报