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
SEO实战密码第3版:60天网站流量提高20倍
下一篇 2018年7月31日 下午1:48

99%的人还看了以下文章

  • 网站首页的设计

    网站首页从根本上说就是全站内容的目录,是一个索引。但只是罗列目录显然是不够的。 网站首页设计步骤 首先要确定首页的功能模块,即确定需要在首页上实现的主要内容和功能; 其次设计首页的版面; 最后处理技术上的细节。 设计网站主页必须遵循的5点基本原则 1、要简单   能吸引浏览者注意的时间是短暂的。 你的网站应该下载速度很快。如果你的网站为了给人留下深刻印象而包…

    2018年3月15日
    6.0K0
  • 做什么样的网站好,什么样的网站才能吸引用户?

    什么样的网站是好网站,做什么样的网站好?网站要以什么样的形式来吸引你的用户?

    2019年1月25日
    2.6K0
  • 为什么做个网站,价格差别那么大?

    做个网站,从几百,到上万,为什么价格差别那么大? 现在市面上的建站公司有很多,实力不同,使网站质量也参差不齐。地方不同,团队不同,规模不同,网站报价又各不相同。网站是由域名、服务器、程序组成,一样的东西放在不同的建站公司里,价格也变化很大。今天,125网页设计给大家解析:为什么做个网站,价格差别那么大? 一、网站程序 制作网站分为使用模板与定制开发两种。相关…

    2019年1月5日
    3.2K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    6.2K0
  • 个人如何制作网站、建立站点

    个人如何制作网站应该从以下几个方面展开: 1、确定网站的题材 网站题材就是网站的主题,你的网站是干什么的。如电影网站、小说网站等。 首先要明确,选择自己擅长和喜爱的题材,其次切忌题材太滥或者目标太高。 2、确定题材后,就要将收集到的资料内容作一个合理的编排 比如,将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引,…

    2019年11月16日
    14.8K0

发表回复

登录后才能评论