为什么学习前端：
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
原文地址：https://www.cnblogs.com/zxdkj/p/9827602.html