为什么学习前端：
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：标题不能居中显示，专题也不能居中，和页脚都不能居中显示。
原文地址：https://www.cnblogs.com/zxdkj/p/9827602.html
时间： 2024-10-08 01:27:03