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

二、在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. android开发学习 ------- 【转】 android中的单例模式 （详解）

    https://blog.csdn.net/u011418943/article/details/60139644     这篇文章 前因后果 都说出来了 ,值得学习. https://blog.cs ...

  2. 《高性能JavaScript》 实用指南

    By XFE-堪玉 阅读<高性能javascript>后,对其内容的一个整理和精简 加载与执行 将script标签放在body结尾标签上面 控制script标签数量(每一次script解析 ...

  3. 倒计时器 CountDownTimer

    使用介绍 开发中经常会遇到一些和倒计时有关的场景,比如发送验证码的按钮,会在点击发送后,显示倒计时间,倒计时结束后才能够刷新按钮,再次允许点击.为了不阻塞软件的运行,又要实时刷新界面,我们通常会用到 ...

  4. 这么大一座Azure“图书馆”，你竟没有发现…

    为避免被叫做「伸手党」,很多技术人员早已养成遇到问题上网搜的好习惯. 然而…… 同一个概念,搜到两个相互矛盾的解释,以谁的为准? 想查找某个 API 的用法,搜索结果数十万条,怎样筛选出最有价值的? ...

  5. LVM逻辑分区的优缺点与步骤

    一.LVM简介 1. 什么是LVM? LVM是 Logical Volume Manager(逻辑卷管理)的简写 2. 为什么使用LVM? LVM通常用于装备大量磁盘的系统,但它同样适于仅有一.两块硬 ...

  6. CentOS7——防火墙设置

    1.查看firewall服务状态 systemctl status firewalld 2.查看firewall的状态firewall-cmd --state 3.开启.重启.关闭.firewalld ...

  7. roi_pooling层

    roi_pooling层先把rpn生成的roi映射到特征提取层最后一层,然后再分成7*7个bin进行池化 下面是roi_pooling层的映射到特征提取层的代码,可以看到用的是round函数,也就是说 ...

  8. 思维 || Make It Equal

    http://codeforces.com/contest/1065/problem/C 题意:给你n个高度分别为a[i]的塔,每次可以横着切一刀,切掉不多于k个塔,问最少切多少刀才能把塔切的都一样高 ...

  9. Bootstrap历练实例：基本输入框组

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  10. React项目搭建及依赖安装

    一.前提 首先保证node.js已安装完成... 安装完成后,打开cmd命令行,输入 node -v 和 npm -v 来查看版本号,如果显示则安装完成. 二.安装react脚手架 在cmd命令行中输 ...