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%的人还看了以下文章

  • web前端开发学习路线

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

    2018年1月18日
    9.8K0
  • 做什么样的网站好,什么样的网站才能吸引用户?

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

    2019年1月25日
    2.6K0
  • 制作漂亮网页的窍门

    制作漂亮网页的窍门制作漂亮网页的窍门制作漂亮网页的窍门制作漂亮网页的窍门

    我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业、漂亮、好看?这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等。

    2019年11月16日 网页设计
    11.4K0
  • 个人如何制作网站、建立站点

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

    2019年11月16日
    14.9K0
  • 一个优秀的网站设计应具备的6个特征

    1、明确和突出的品牌设计 优秀的网站设计师会将品牌的色彩、设计元素贯穿到整个网站的设计中。 2、抢眼独到的头条 网站要有强大的内容支撑。 首页是网站的脸,头条是这个网站的眼! 头条要抢眼,干脆,直击用户,在网页上要一目了然,是视觉焦点。清晰的排版和易于浏览的头条文章,是必须要有的。 3、有阶梯层级的导航 导航设计要简化,给人以“专业”的感觉。尽量让体验顺滑流…

    2018年9月23日
    4.6K0

发表回复

登录后才能评论