Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

网页的布局与规划

本次网页制作的效果图如上图所示,分析一下该图,我们不难发现,图片大致分为以下几个部分:

1、顶部部分,其中又包括了LOGO、MENU和一幅Banner图片;

2、内容部分又可分为侧边栏、主体内容;

3、底部,包括一些版权信息。

有了以上的分析,我们就可以很容易的布局了,我们设计层如下图:

Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

根据上图,我再画了一个实际的页面布局图,说明一下层的嵌套关系,这样理解起来就会更简单了。

Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)

DIV结构如下:

│body {} /*这是一个HTML元素,具体我就不说明了*/

└#Container {} /*页面层容器*/

├#Header {} /*页面头部*/

├#PageBody {} /*页面主体*/

│ ├#Sidebar {} /*侧边栏*/

│ └#MainBody {} /*主体内容*/

└#Footer {} /*页面底部*/

至此,页面布局与规划已经完成,接下来我们要做的就是开始书写HTML代码和CSS。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2371.html

(4)
江山如画的头像江山如画管理团队
上一篇 2018年7月30日 下午9:59
下一篇 2018年7月31日 下午1:48

99%的人还看了以下文章

  • 网页设计常用色彩搭配表《配色表》

    该配色表将网页设计中常见的色彩搭配按照色相的顺序归类。每类都以该色相为主,配以其他色相或者同色相的,应用对比和调和的方法,并按照从轻快到浓烈的顺序排序。 按色相的搭配分类 红色、橙色、 黄色、 黄绿色、 绿色、 青绿色、 蓝色、 蓝紫色、 紫色、 紫红色 按印象的搭配分类 柔和、明亮、温柔柔和、洁净、爽朗可爱、快乐、有趣活泼、快乐、有趣运动型、轻快轻快、华丽…

    2018年2月5日
    12.7K0
  • 平面设计中最常用的一项设计技法-K先生案例精讲

    对比是在平面设计中最常用的一项设计技法,几乎每一个作品中都会出现“对比”的痕迹,今天中国网页设计给大家分享的是K先生平面设计中对比的8种运用技巧,包括大小、色彩、肌理、前后、疏密、虚实…等等,每个技巧运行都配有设计案例,一步步教你如何分析设计,讲解到位,通俗易懂,实用性强,一定会对你的设计有所帮助。

    2020年4月26日
    17.2K0
  • 9种常用的排版小技巧

    分享优秀网页设计发布的9种常用的排版小技巧,不同氛围的文字排版组合,演绎不同的版面风格。 ​​​​

    2020年4月4日 网页设计
    11.0K0
  • 网页制作实战项目四:使用DIV+CSS制作网页

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 使用DIV+CSS制作网页——个人站点制作 【上机目的】 1、 掌握CSS盒模型 2、掌握网页元素的定位 3、掌握DIV+CSS布局的方法和技巧 【上机重点】 1 、网页元素的定位 2、DIV+CSS布局的方法和技巧 【上机难点】从表格布局向DIV+CSS布局的转变 【上机教学方法】 1…

    2018年5月3日
    13.4K0
  • web前端开发学习路线

    如果你是新手,准备学习web前端开发的话,一定要想想为什么要学习它?性趣、爱好、获得一份相关工作…… 定位好自己,持之以恒,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后克服。在状态不好的情况下,要及时调整,多向大牛请教,那样往往能让自己成长的快,切勿急躁。 初学web前端开发可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会分析自…

    2018年1月18日
    7.7K0

发表回复

登录后才能评论