- 最後登錄
- 2023-3-4
- 在線時間
- 1 小時
- 註冊時間
- 2008-9-27
- 閱讀權限
- 20
- 精華
- 0
- UID
- 5031647
- 帖子
- 575
- 積分
- 196 點
- 潛水值
- 14681 米
| 如果瀏覽伊莉時速度太慢或無法連接,可以使用其他分流瀏覽伊莉,www01.eyny.com(02,03)。 可以考慮設計成下面這樣
再利用 display:none 隱藏不顯示的部分
完整的 html 跟 css- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>RWD</title>
- </head>
- <body>
- <table>
- <tr class="img-rwd-1">
- <td class="ex-1" colspan="3"><img src="https://svgshare.com/i/72t.svg"></td>
- </tr>
- <tr>
- <td rowspan="4" class="img-rwd-2"><img src="https://svgshare.com/i/72t.svg"></td>
- <td class="ex-2">1</td>
- <td class="ex-2">a</td>
- </tr>
- <tr>
- <td class="ex-2">2</td>
- <td class="ex-2">b</td>
- </tr>
- <tr>
- <td class="ex-2">3</td>
- <td class="ex-2">c</td>
- </tr>
- <tr>
- <td class="ex-2">4</td>
- <td class="ex-2">d</td>
- </tr>
- </table>
- <style type="text/css">
- table,tr,td{
- border:1px solid;
- }
- table{
- border-collapse: separate;
- border-spacing:10px;
- width:100%;
- }
- td{
- text-align:center;
- }
- .ex-1{
- width:100%;
- }
- .ex-2{
- width:50%;
- }
- img{
- width:320px;
- }
- .img-td-1{
- width:100%;
- }
- @media only screen and ( min-width : 900px){
- .img-rwd-1{
- display:none;
- }
- }
- @media not screen and ( min-width : 900px){
- .img-rwd-2{
- display:none;
- }
- }
- </style>
- </body>
- </html>
複製代碼 ... |
|