做网页先布局----切切豆腐块。

原创 阁主  2018-02-17 15:52:51  阅读 1231 次 评论 2 条
摘要:

DIV+CSS布局:只要书写的样式符合标准,网页的架构清晰,布局灵活,能节省页面加载带宽;浏览器之间的兼容问是一个很大的问题,你如果你再排版页面的时,书写的样式符合标准,基本没什么大的问题。

切法秘诀:

大处着眼,从上往下,再从左到右,从大到小布局,再细节点缀

比如:分析一个常见网站结构。

大概布局一下样子大概是上中下.那么我参照前面发过的一篇文章CSS+DIV布局的话代码应该如下

用div来占块,布局。<div></div>

<html>
<head>
    <title>用div来占块,布局</title>
</head>
<body>
	<div>上</div>
	<div>中</div>
	<div>下</div>
</body>
</html>

通过浏览器解析后,大概样子就是如下图:

QQ截图20180218110510.jpg

而后,由大到小切块,上部分通常为logo以及重要提示信息。下部通常为底部版权等信息。中部一般为内容区域,但是这里

我们通常看到一个网站是有左边栏右边栏,所以我们还得细分中间部分:

依然使用div布局,代码嵌套入中部的div内:

<html>
<head>
    <title>用div来占块,布局</title>
</head>
<body>
	<div>上</div>
	<div>
	<div>中部左边内容</div>
	<div>中部右边内容</div>
	</div>
	<div>下</div>
</body>
</html>

通过浏览器解析后,大概样子就是如下图:

QQ截图20180218111018.jpg

写在最后:

本文由于没有给div块做相应的css样式,初学者建议去学习一下HTML基础和CSS基础,把基础扎实了才能有好的突破。网络相应的好多教学资源。大家可以去搜索一下,也可以通过网站联系我某云索取!

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

本文地址:https://www.mainblog.cn/59.html
版权声明:本文为原创文章,版权归 阁主 所有,欢迎分享本文,转载请保留出处!
免责申明:有些内容源于网络,没能联系到作者。如侵犯到你的权益请告知,我们会尽快删除相关内容。

发表评论


表情

评论列表

  1. 明月清风
    明月清风  浏览器图标  系统图标 【评论达人 LV.3】  @回复

    这个标题很形象生动的啦!