内联接就是在标签内加style，如<div style="color:#000"></div>
style就是加一个style标签，可以放在html的任何位置，如<style>css属性</style>
外部连入的分给import和link
import和第二种差不多只不过写的不是css属性二是<style>@import url(xx.css)</style>这种自我感觉不常用
link是最常用的一种方法。如<link type="text/javascript" href="xx.css" rel="stylesheet"/>
最后俩个都要注意引用的路径
<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gbk" />
<title>滑动门</title>
<style>
<!--
* {
margin:0
padding:0
font-size:12px
}
body {
padding:30px
}
.tabsBox {
width:400px
margin:20px auto
}
.tabs {
height:20px
}
.tabs li {
width:80pxtext-align:center
padding-top:2px
line-height:18px
float:left
background-color:#ccc
margin-right:5px
list-style:none
position:relative
cursor:pointer
color:#333
}
.tabs li span {
display:none
}
.tabs .cur {
background-color:#f0f0f0
}
.tabs .cur span {
display:block
width:1px
height:1px
border:solid 8px
border-color:#f0f0f0 #fff #fff #fff
position:absolute
top:20px
left:32px
overflow:hidden
z-index:-1
}
.cons {
height:120px
padding:8px 12px
overflow:hidden
border:1px solid #f0f0f0
position:relative
z-index:1
}
.cons ul li {
list-style:none
line-height:20px
}
.hidden {
display:none
}
.block {
display:block
}
-->
</style>
</head>
<body>
<div class="tabsBox">
<ul id="Tabs" class="tabs">
<li class="cur">最新更新<span></span></li>
<li>推荐下载<span></span></li>
<li>下载排行<span></span></li>
<li>本月排行<span></span></li>
</ul>
<div id="TabsCon" class="cons">
<ul>
<li><a href="/soft/4764.shtml" target="_blank">基于JavaScript的气泡提示网页版</a></li>
<li><a href="/soft/8021.shtml" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li>
<li><a href="/soft/9011.shtml" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li>
<li><a href="/soft/1658.shtml" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li>
<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>
</ul>
<ul>
<li><a href="/soft/1361.shtml" target="_blank">VB餐厅POS收银软件</a></li>
<li><a href="/soft/3855.shtml" target="_blank">VB 6.0 简体中文标准版</a></li>
<li><a href="/soft/8467.shtml" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li>
<li><a href="/soft/5238.shtml" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li>
<li><a href="/soft/7667.shtml" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
</ul>
<ul>
<li><a href="/jscss/code/1915.shtml" target="_blank">jQuery 模块拖动，拖动层效果，可淡入淡出</a></li>
<li><a href="/jscss/code/1914.shtml" target="_blank">jQuery单行新闻滚动</a></li>
<li><a href="/jscss/code/1913.shtml" target="_blank">经典的jQuery多行文本滚动</a></li>
<li><a href="/jscss/code/1912.shtml" target="_blank">JS图片切换学习版，没有过多修饰</a></li>
<li><a href="/jscss/code/1911.shtml" target="_blank">漂浮广告代码，Js演示</a></li>
<li><a href="/jscss/code/1910.shtml" target="_blank">边滚边停的JS图片滚动</a></li>
</ul>
<ul>
<li><a href="/soft/9217.shtml" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li>
<li><a href="/soft/9199.shtml" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li>
<li><a href="/soft/9236.shtml" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li>
<li><a href="/soft/9235.shtml" target="_blank">jQuery EasyUI 实例演示（菜单、TAB等）</a></li>
<li><a href="/soft/9227.shtml" target="_blank">VB+SQL2000考试卷（题库）生成与管理系统</a></li>
</ul>
</div>
</div>
<script>
<!--
var lis = document.getElementByIdx_x("Tabs").getElementsByTagName_r("li")
var uls = document.getElementByIdx_x("TabsCon").getElementsByTagName_r("ul")
var order = 0
for(var i=0i<lis.lengthi++){
lis[i].value = i
lis[i].onmouseover = function(){
ChangeTabs(this.value)
}
uls[i].className = "hidden"
}
lis[order].className = "cur"
uls[order].className = "block"
function ChangeTabs(nowTab){
lis[order].className = ""
uls[order].className = "hidden"
order = nowTab
lis[nowTab].className = "cur"
uls[nowTab].className = "block"
}
-->
</script>
</body>
</html>
解决这个问题的方法如下：
1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。
2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。
3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。
4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。
6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。
7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。
8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
