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

二、在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. StarUML安装与Win7不兼容解决

    最近在学习建模工具(StarUML)发现 其他功能一切正常 但是无法显示代码导出功能, 正常界面如下: 我的安装确没有导出功能缺少C++,C# ,Java等导出功能 解决办法:     到StarUM ...

  2. run_test() 验证平台的入口

    Run,just run!    ——阿甘正传   一个简单的例子: module tb_top; dut u_dut (); initial begin run_test(); end config ...

  3. codevs 1145 Hanoi双塔问题 2007年NOIP全国联赛普及组

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的 ...

  4. Caused by: java.lang.NoClassDefFoundError: com/sun/tools/javac/util/List at

    折腾了一下的时间,都没有找到解决的方案,在网上搜了一下答案都是让清理编译环境和重新打包之类的.就这样折腾一下,还没有解决问题.之所以会抛出找不到类的问题,需要排查你使用这个包的类是否存在,存在之后 查 ...

  5. php 小坑记录

    1 empty  PHP<=5.5不能用于判断一个表达式的执行结果并且netbeans 和eclipse编辑器识别不出来此错误 含有此用法的 类 和页面将会报错 empty($this-> ...

  6. 插入函数概念 接收一个callback，然后外面函数，接一个对象，和一个next，外面都执行完了，继续执行下一个函数，相当于一个链状体，插入了一个函数的概念 | log4js 输出 等于 console.info

    插入函数概念 接收一个callback,然后外面函数,接一个对象,和一个next,外面都执行完了,继续执行下一个函数,相当于一个链状体,插入了一个函数的概念 app.use(function (ctx ...

  7. webStorm Ctrl+s 自动格式化 然后 保存 用宏命令

    使用WebStorm的Macros宏指令,实现保存的同时格式化代码,并跳至行尾 https://blog.csdn.net/gyz718/article/details/70556188

  8. 【转】Spring, MyBatis 多数据源的配置和管理

    同一个项目有时会涉及到多个数据库,也就是多数据源.多数据源又可以分为两种情况: 1)两个或多个数据库没有相关性,各自独立,其实这种可以作为两个项目来开发.比如在游戏开发中一个数据库是平台数据库,其它还 ...

  9. mysqldump 备份导出数据排除某张表或多张表

    可以使用--ignore-table=dbname.tablename 忽略一张表 /usr/bin/mysqldump --set-gtid-purged=OFF -h127.0.0.1 -uroo ...

  10. mysql中常用函数简介(不定时更新)

    常用函数version() 显示当前数据库版本database() 返回当前数据库名称user() 返回当前登录用户名inet_aton(IP) 返回IP地址的数值形式,为IP地址的数学计算做准备in ...