一、首先根据网页设计图拆分网页的整体结构

二、在html页面用DIV划分出结构块

三、再根据设计图在各个大<DIV>块中加入对应的小<DIV>块或者段落<P>,表单<form>,表格<table>,菜单（用css制作的菜单（项目列表）），标题<h3>,<h4>等。

四、模块拆分、页面的整体框架有了大体设计之后，对各个模块进行分别的处理，最后再统一整合。这也是设计制作网站的通常步骤，养成良好的设计习惯便可孰能生巧。

五、用css调整HTML中模块的位置效果，事页面达到设计图上的整体效果

读CSS DIV网页样式与布局心得体会的更多相关文章

  1. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  2. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  3. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  4. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  5. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  6. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  7. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  8. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  9. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

随机推荐

  1. php中3DES加密技术

    因为工作中要用到加密,接口中要求也是用密文传输数据,用到3des加密,就研究了一下. 在网上也找了好多,但是都不可以用,没法正式运行,终于找到一个可以运行的,自己又修改了一下,记录下来,以后还可能会用 ...

  2. P3375 【模板】KMP字符串匹配（全程注释，简单易懂）

    题目描述 如题,给出两个字符串s1和s2,其中s2为s1的子串,求出s2在s1中所有出现的位置. 为了减少骗分的情况,接下来还要输出子串的前缀数组next.如果你不知道这是什么意思也不要问,去百度搜[ ...

  3. github入门之配置github本地仓库--2

    *前期准备工作 创建github账户 github地址 1.设置SSH_Key ssh-keygen -t rsa -C "你的邮箱" 2.查看秘钥 cat ~/.ssh/id_r ...

  4. windows 操作系统种类

    @hcy 敬请访问:http://blog.sina.com.cn/iihcy Microsoft公司从1983年开始研制Windows系统,最初的研制目标是在MS-DOS的基础上提供一个多任务的图形 ...

  5. eclipse报错MA

    今天有个总监晒了张tomcat7.0崩溃忘记怎么搞了,大家都在吐槽"一个[总监](经常水群)竟然不会这个".敲上来. Problem Occurred系列: 'Starting T ...

  6. 说说三四月的app审核中的几个坑

    苹果的审核在3月异常严格,听说和换了部门领导有关(道听途说),恰逢三月公司新出了一个产品,我们的产品被苹果打回四五次,今天就在简书上把这些坑填下,也让遇到的朋友以后留意,也许是近期的最后一篇文章. 坑 ...

  7. windows中安装模拟器后修改模拟器中的hosts方法

    1.背景 有的时候我们测试安卓的app需要绑定hosts,这个时候我们如果只是修改PC机器上的hosts,然而在模拟器中并不生效.这个时候我们就需要修改模拟器中的hosts. 模拟器中的hosts为只 ...

  8. 基于Python的Web应用开发实战——3 模板

    要想开发出易于维护的程序,关键在于编写形式简洁且结构良好的代码. 当目前为止,你看到的示例都太简单,无法说明这一点,但Flask视图函数的两个完全独立的作用却被融合在了一起,这就产生了一个问题. 视图 ...

  9. myna代码

    https://github.com/TalkingData/Myna/tree/master/Dataset https://github.com/TalkingData/Myna

  10. 【C语言项目】贪吃蛇游戏(下)

    目录 00. 目录 07. 游戏逻辑 7.5 按下ESC键结束游戏 7.6 判断是否撞到墙 7.7 判断是否咬到自己 08. 游戏失败界面设计 8.1 游戏失败界面边框设计 8.2 撞墙失败界面 8. ...