HTML/CSS學習1
阿新 • • 發佈：2018-10-22
事情 沒有 生活 還要 eight sheet display 不同的 amp
為什麽學習前端：
1.我想做一個個人的網站，所以除了懂得服務器的知識之外，還要懂得前端代碼。這樣才可以做出自己喜歡的網頁。
2.其實也不是完全為了做網頁而做。余生很長也很短，很長是一輩子，很短只有幾十年。在這短短的幾十年裏如果不能夠實現一個或者兩個自己夢想的事情，那麽這個人生是多麽的沒有意義啊。
3.余生與夢想和生活相伴。
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------一 .HTML和CSS的關系
HTML主要是內容，而CSS是控制這些內容的表現形式。CSS可以用多種樣式，對於不同的網頁，利用不同的樣式來呈現不同的頁面主題。
HTML代碼如下：
<head> <title>Grid Layout</title> <link rel=‘stylesheet‘ type=‘text/css‘ href=‘CSS/流體布局css.css‘ /> <style> See the right hand page </style> </head> <body> <div id=‘header‘> <h1>Logo</h1> <div id=‘nav‘> <ul> <li><a href=‘‘>Home</a></li> <li><a href=‘‘>Products</a></li> <li><a href=‘‘>Services</a></li> <li><a href=‘‘>About</a></li> <li><a href=‘‘>Contact</a></li> </ul> </div> </div> <div id=‘content‘> <div id=‘feature‘ class=‘grid_12‘> <p>Feature</p> </div> <div class=‘article column1‘> <p>Column One</p> </div> <div class=‘article column2‘> <p>Column two</p> </div> <div class=‘article column3‘> <p>Column three</p> </div> <div id=‘footer‘ class=‘grid_12‘> <p>©:Copyright 2011</p> </div> </body>
CSS代碼如下：
流體布局代碼： body { width: 90%; margin: 0 auto;} #content { overflow: auto; height:100%;} #nav, #feature, #footer { margin:1%;} .column1,.column2,.column3{ width:31.3%; float:left; margin:1%;} .column3 {margin-right: 0%}; li { display:inline; padding:0.5em;} #nav,#footer { background-color:#efefef; padding:0.5em 0; } #feature,.article { height:10em; margin-bottom:1em; background-color:#efefef;} 固定布局代碼： body { width: 960px; margin: 0 auto;} #content { overflow: auto; height:100%;} #nav,#feature,#footer { background-color: #efefef; padding:10px; overflow:auto; margin:10px;} .column1,.column2,.column3{ background-color:#efefef; width:300px; float:left;margin:10px;} li { display:inline; padding:5px;}
上述的代碼存在問題，暫時無法解決，待後續~~~
ps：標題不能居中顯示，專題也不能居中，和頁腳都不能居中顯示。
HTML/CSS學習1