台中網頁設計 CSS3響應式表格和響應式圖片 – html css語言欄目:html.css – 紅黑聯盟

首頁 > 程序開發 > web前端 > HTML/CSS > 正文 CSS3響應式表格和響應式圖片 2016-01-26   ,
台中網頁設計; ,
桃園網頁設計; ,
台南網頁設計;  個評論    來源:蛻變之路  ,
台中網頁設計; 收藏    我要投稿

最近跟著某大牛學CSS3,台北網頁製作公司,下面是跟著大牛做的兩個實例項目,不得不說CSS3真的很強大.另外最近用SAE搭建了一個網站,把最近的實例都放到了裏面,等搭建好放出,這樣大家就能直觀的看到演示效果了

html文件">建立HTML文件 CSDN相關課程 課程序號 課程名稱 課程操作 15004 Android開發實戰 修改刪除 15005 IOS開發實戰 修改刪除 15006 java開發實戰 修改刪除 15007 Ruby開發實戰 修改刪除 15008 HTML開發實戰 修改刪除

效果如下

配置CSS3樣式

body{ margin: 0; padding:0; } /* 綠色 #35B558 橙色 #ff5c00 深灰 #666666 淺灰 #F8F8F8 * */ h1{ text-align: center; font-size: 30px; color: #666; } .responsive a{ text-decoration: none; padding: 5px; color: #ff5c00; } .responsive{ width: 98%; margin: 0 auto; color: #000; border-collapse: collapse; border:1px solid #666666; box-shadow: 0 0 0 1px rgba(0,0,seo,0,台中網頁設計,0.4); } .responsive th{ background-color: #35B558; } .responsive th,.responsive td{ border: 1px solid #666666; padding: 10px; } .responsive .number,.responsive .actions{ text-align: center; }

效果:

響應式配置

/*響應式配置*/ @media (max-width: 480px) { /*去掉邊框和陰影*/ .responsive{ border: none; box-shadow: none; } /*去掉表頭*/ .responsive thead{ ; } /*把各項設置為塊元素分佈*/ .responsive tr,SEO優化,.responsive td{ display: block; } /*設置number和name距離,使用子選擇器*/ .responsive td:nth-child(1), .responsive td:nth-child(2){ padding-left: 25%; } /*使用偽元素添加表頭*/ .responsive td:nth-child(1)::before{ content: "課程序號"; position: absolute; left: .5em; font-weight: bold; } .responsive td:nth-child(2)::before{ content: "課程名稱"; position: absolute; left: .5em; font-weight: bold; } /*給表頭添加框和陰影*/ .responsive tr{ position: relative; border: 1px solid #666666; box-shadow: 0 0 0 3px rgba(0,網頁設計,0,0,.4); } /*給表頭部分添加揹景色*/ .responsive .number{ text-align: left; background-color: #35B558; } .responsive td.actions{ position: absolute; right: 0; top:0; border: none; } }

響應式圖片佈局

這個很簡單,就是不同分辨率下顯示不同的圖片,台中網頁設計,就直接把圖片分享上來了,不寫了

點擊復制鏈接 與好友分享!回本站首頁 上一篇:CSS3包含塊及其定位判定 下一篇:如何判斷DIV中的內容為空 相關文章 表格佈局實例一 表格的創建於刪除 Bootstrap 基礎CSS – 表格(Tables) 4行CSS實現表格內容超過一行的部分,用 Html表格常用技巧 表格列表CSS樣式 玩轉Web之html+CSS(一)—論壇首頁表格 #2 HTML的框架,表格 html表格排序之完全詳解 HTML學習7:常用標簽之表格標簽 圖文推薦 HTML5 Plus移動App( htm初學筆記 CSS3美化表單控件 Flex 佈局教程:語法