小白之WEB前端--第一篇
阿新 • • 發佈：2018-12-16
小白之WEB前端響應式頁面
第一次接觸到響應式頁面是去年第一次接觸框架的時候，接觸到了響應式的框架“Bootshrap”這是很簡單的css+html的框架，應該很多人用它進行響應式頁面的創造。 那之後實驗室的指導老師給我一個網站問我能不能把這個網頁改成響應式網頁，那個網頁的構造很簡單，但是我那時候很懶就不想再用bootshrap就直接改了樣式。
首先這個頁面的百分比要明白，然後頁面的佈局全部變成百分比，然後將頁面的字型大小變成em樣式，這個樣式就可以讓字型隨著頁面的大小來改變自己的百分比。 廢話不多說，先上程式碼。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>胖砸的日常bug</title> <link rel="stylesheet" href="css/body.css" /> <!--引用主文章超連結--> <link rel="stylesheet" href="css/feet.css" /> <!--引用尾導航欄 --> <link rel="stylesheet" href="css/titile.css" /><!-- 引用導航欄 --> <style> a{text-decoration: none;}/*超連結樣式*/ </style> <script type="text/javascript" src="http://cdn.webfont.youziku.com/wwwroot/js/wf/youziku.api.min.js"></script> <script type="text/javascript"> $youziku.load("body", "6c81f08bc56245d1b023699a5f33c269", "NaiYou"); /*$youziku.load("#id1,.class1,h1", "6c81f08bc56245d1b023699a5f33c269", "NaiYou");*/ /*．．．*/ $youziku.draw(); </script><!--字型問題--> </head> <body> <div class='tit' > <div class="tit_1">於胖胖的個人部落格</div> <div class="tit_2"> <div class="daily"> <tr> <td valign="middle"> <a href="life.html">生活胖砸</a></div></td> <td valign="middle"> <div class="stu"><a href="study.html">學習胖砸</a></div></td> <td valign="middle"><div class="bug"><a href="bug.html">埋坑胖砸</a></div></td> </tr> </div> </div> <div class="text"> <div class="text_call"> </div> <div class="text_fist"> <div class="call_1">標題</div> <div class="call_2">文章</div> </div> <div class="text_right">胖砸</div> </div> <div class="feet"></div> </body> </html>
接下來是css樣式塊
.text{ height:90em; width:100%; color:darkslategrey; background-color: coral; font-size: 1.5vw; }/*整個網頁主體部分*/ .text_fist{ height: 100%; width:60% ; }/*網頁日誌部分*/ .text_call{ height:100% ; width: 20%; float: left; } /*網頁聯絡交談框*/ .text_right{ height: 100%; width: 20%; float:right; } /*右邊導航欄*/ .text_head{ color: aquamarine; float: left; } .call_1{ margin: 0 auto; text-align: center; color: dimgray; } /*文章主標題*/ .call_2{ margin:0 auto; text-align:center ; color: #000000; } /*文章的主體*/