1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <html> <head> <title>Using CSS media types</title> @CSS </head> <body> <div class="top"> @ITEMS </div> <div class="bottom"> @SUMMARY </div> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | div.bottom { background-color: lightblue; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; } |
1 2 3 4 5 6 7 8 9 | div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } /* ...Rest of CSS styling */ |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | li.odd { background-color: #EAEAFF; } li.even { background-color: #FCFCFC; } @media screen { div.bottom { background-color: lightblue; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 20px; } div.top { background-color: white; } } @media print { div.bottom { position: absolute; top: 0px; } div.top { position: relative; top: 20pt; } } |
欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) | Powered by Discuz! 7.0.0 |