div+css如何实现表格布局的框架网站?
table布局里用框架就能很容易实现,如果用div+css要如何实现这种效果?还是说用div布局做这种,就连接到另一个包含了上导航网页就行?
就是遇到这种改怎么弄吧? 因为是自学,没头绪,求方法、方式或教程地址,谢~!
我是问怎么点左边右边变化,不是问导航怎么搭。 展开
<div class="head>
<div class="logo"></div>---------------------------------------------------(标志)
<ul class="nav">-------------------------------------------------------------(导航)
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<div></div>-------------------------------------------------------------------(当前位置和搜索条)
</div>————————————————————————————上面头部结束
<div class="main">
<div class="left"> ——————————————————————主体内容左边
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</div>
<div class="right"></div>———————————————————主体内容右边
</div>
<div class="footer"></div>———————————————————底部结束
一般是这样布局的,思路也很清晰,上中(左、右)下,不懂再问吧!
div+css其实是盒子原理,你要了解到每一对html标签就是一个盒子,然后你想要在这个盒子里放一些什么样的内容,这就根据页面来定了,
如图,盒子包括有外边距(margin),这个可以这样理解就是两个盒子之间的距离这就叫外边距。
然后到边框(border),这个就是一个盒子里面的内容和外面隔绝的一条边,比如说:电视机盒纸皮就是边框、房子墙就是边框、鱼缸玻璃就是边框。
再然后就是内边距(padding),内边距可以理解为边框与内容之间的距离叫内边距,比如说:电视机装在电视盒里面不可能是全部装满因为电视机的外形不是一个正规的长方形或是正规的正方形,所以电视机(内容)与纸皮(边框)之间空出来的距离就是内边距,或者在一个房子里桌子与墙的距离就是内边距,都可以这样理解。
最后就是内容了,内容包括什么呢?包括(文本、图片)就这么多!
左边这块可以用列表<ul><li></li></ul>
右面主体 可以用
<div>
<span></span>转换为区块
<div>
<dl>
<dt></dt>
<dd></dd>
<dl>
<dl>
<dt></dt>
<dd></dd>
<dl>
</div>
</div>
最后浮动就可以了!
网页头部和导航很简单,就不多说了!
上边就是logo及菜单,
中间分为左和右,你可以先用div把大块布出来,上中下都弄好,高不定,然后慢慢给其它里面添加内容就好了。
这种网页算是最简单的。
慢慢研究去吧…在这里就算写上1000字也未必解释的清除
<ul>
<li>导航内容</li>
</ul>
</div>
基本就跟列表形式,其他的根据所属定义