网站开发_从基础做起1

推荐一个网站：标准之路，讲解网站开发确实很详细，带有实例边讲边实践，很是惊喜

就本人的经验来说，网站开发基础可以去w3School中学习html以及css的基本语法，然后参考上面提到网站的DIV+CSS教程一步一步搭建起来自己的第一个网页，进步还是会很快的。

以下为学习中记录下来的笔记，常常记录，打好基础。

1.文档类型 doctype

它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。删除后可能引起某些样式表失效或其它意想不到的问题。

XHTML 定义了三种文件类型声明，其中使用最普遍的是 XHTML Transitional。其他还有STRICT（严格类型）、FRAMESET（框架类型）。

形如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
STRICT适用于：需要干净的标记，避免表现上的混乱。请与层叠样式表配合使用。
TRANSITIONAL适用于：当需要利用 HTML 在表现上的特性时，并且当需要为那些不支持层叠样式表的浏览器编写 XHTML 时。
FRAMESET适用于：需要使用HTML框架将浏览器窗口分割为两部分或更多框架时。

2.css样式表和其它文件记得和本文档的编码保持一样，要不就会出现乱码。

3.xhtml中标签必须有结束标记例如<p></p> <hr />，而且标签必须小写。

4.CSS样式引入

1.引入外部样式(推荐使用)：<link href="layout.css" rel="stylesheet" type="text/css" />

2.内部样式：<style> h2 { color:#f00;} </style>

3.行内样式(没实现样式与内容的分离，不推荐使用)：<p style="font-size:18px;">内部样式</p>

4.导入样式(在css文件中导入其他css文件)：@import url("/css/global.css");

5.样式作用范围

css选择器可分为标签(重新定义Html元素)，类(可应用与任何Html元素)，id(仅应用于一个Html元素);

其中作为范围越小，优先级越高，比如id优先级要高于类。

标签定义形如body{}; 类定义形如.layout{}; id定义形如#layout{}

6.盒子模型

内容（content）填充（padding）边框(border) 外边距(margin)对于理解块状布局很重要，具体可参见盒子模型

7.列布局

固定宽度高度：#layout { height: 300px; 400px; background: #99FFcc; }

固定宽高居中：#layout { height: 300px; 400px; background: #99FFcc; margin:auto; }

自适应宽度：body { margin: 0px; } #layout { height: 300px; background: #99FFcc;}

多块布局： body { margin:0; padding:0;}
#header { margin:5px auto; 500px; height:80px; background:#9F9;}
#main { margin:5px auto; 500px; height:400px; background:#9FF;}
#footer { margin:5px auto; 500px; height:80px; background:#9f9;}

(小技巧：可设置首选参数->代码格式->css，设置css显示在一行上；首选参数->css样式->使用速记，生成简写的样式)

两列自适应宽度：

#side { background: #99FF99; height: 300px; 120px; float: left; }
#main { background: #99FFFF; height: 300px; 70%; margin-left: 120px; }

两列固定宽度居中：

#content { 470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; 120px; float: left; }
#main { background: #99FFFF; height: 300px; 350px; margin-left: 120px; }

三列自适应宽度：

body { margin:0;}
#side { background: #99FF99; height: 300px; 120px; float: left; }
#side1 { background: #99FF99; height: 300px; 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }

注意：

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。所以如果非浮动元素在前，那么浮动元素会被挤到下一行。

所以只能写成如下样子，千万不能把main写到第一位或者第二位。

8.块级元素(div)与内联元素(span)

块级元素：就是一个方块，像段落一样，默认占据一行出现；

内联元素：又叫行内元素，顾名思义，只能放在行内，就像一个单词，不会造成前后换行，起辅助作用。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次

都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用 display:block将内联元素改变为块元素。同时display为none时表示将这个元素

隐藏，为block时表示将它的隐藏状态改为显示状态。

9.float属性

在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

body { font-size:18px; line-height:200%; }
#side { float:left; 202px;}

10 IE6的3pxBUG

设置_margin-right 即可

body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }

11 列表

body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { 100px; border: 1px solid #CCC; }
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
#menu ul li 派生选择器； h1,h2,h3{} css选择器分组

11.设置标签的默认样式

body, ul, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd { margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; }
ul { list-style: none; }
img { border-style: none; }

12.相对定位和绝对定位

■定位标签：position■包含属性：relative（相对） absolute（绝对）
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父容器左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

文章出处：标准之路(http://www.aa25.cn/div_css/905.shtml)

做出来的菜单联动，时间冲冲，颜色搭配不太好看，不过效果是都有了：

1.纵向菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#top{height:120px; margin-top:5px; background:#039}
#main{height:400px; margin-top:5px;}
#menu{width:120px; border:1px solid #333; background:#eee}
#menu ul{ list-style: none; padding:0px; margin:0px;}
#menu ul li{height:26px; padding:0px 8px; border-bottom:1px solid #999; position:relative;}
#menu ul li:hover ul{display:block}
#menu ul li ul{width:100px; position:absolute; border:1px solid #666; top:0px; left:120px; display:none;}
#foot{height:120px; margin-top:5px; background:#039}
a{ text-decoration:none; color:#0033CC}
a:hover{color:#00FF66}
</style>
</head>

<body>
<div id="top">此处显示  id "top" 的内容</div>
<div id="main">
  <div id="menu">
  <ul>
      <li><a href="#">已完成</a>
        <ul><li>甲</li><li>已</li></ul>    
    </li>
    <li><a href="#">进行中</a>
        <ul><li>甲</li><li>已</li></ul>    
    </li>
    
  </ul>
  </div>
</div>
<div id="foot">此处显示  id "top" 的内容</div>
</body>
</html>

2 横向菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"), 
"");
}
}
}
window.onload=menuFix;
//--><!]]></script>
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { 500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left; margin-left:2px;}
#menu ul li a { display:block; 87px; height:28px; line-height:28px; text-align:center; background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg2.gif) 0 0 no-repeat; font-size:14px;}
#menu ul li a:hover { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current { background:url(http://www.aa25.cn/upload/2010-06/27/nav_bg1.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}
#menu ul li ul { border:1px solid #ccc; display:none; position:absolute;}
#menu ul li ul li { float:none; 87px; background:#eee; margin:0;}
#menu ul li ul li a { background:none;}
#menu ul li ul li a:hover { background:#333; color:#fff;}
#menu ul li:hover ul { display:block;}
#menu ul li.sfhover ul { display:block;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a id="current" href="#">首页</a></li>
<li><a href="#">网页版式</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">web教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">web实例</a></li>
<li><a href="#">常用代码</a></li>
</ul>
</div>
</body>
</html>