当前位置: 首页 > news >正文

CSS+DIV网页样式与布局

一、什么是CSS?

        CSS(Cascading Style Sheets),中文译为层叠样式表,它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

        CSS的引用就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础,提供了丰富的格式化功能,如字体,颜色,背景和整体排版等,并且网页设计者可以针对各种可视化浏览器设置不同的样式风格,包括显示器,打印机,打字机,投影仪和PDA等。

二、什么是DIV?

        DIV是层叠样式表中的定位技术,全称DIVision,即为划分。DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。DIV就是将HTML划分为几块,方便对HTML进行管理。

三、为什么是CSS+DIV?

what:

        DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离,使站点的访问及维护更加容易。

why:

        因为在CSS诞生之前,都是使用标签的属性来定义样式的,比如要实现加粗的效果,就要写“<b>加粗内容</b>”,要是定义一个字体是7号字,就要写“<font  size=7></font>“,但是这个html标签属性提供的功能有限,size的字号不是您想定义多大就是多大,到了10就不好使了,怎么办呢,W3C就指定了CSS,用css来代替传统的html标签的属性功能,以弥补html标签的功能缺陷。

       使用css的id和class属性可以很方便的给html标签加上一个特殊的标记,然后通过css的访问机制可以很方便的定义样式,这样,如果很多标签样式一致,我们就给它定义一个类(class),然后写样式就可以了,要是table就不行了,每一个标签都得把样式写进去,重复的标签样式造成代码臃肿,又难以维护

       div是一个标签,代表块级元素,而div嵌套div的模式就称为盒子模型。使用div主要是为了CSS样式的应用。

Benefits:

1、使用DIV+CSS布局,页面代码精简

2、提高访问速度、增加用户体验性

3、div+css结构清晰,很容易被搜索引擎搜索到

4、让网页体积变得更小。





转载于:https://www.cnblogs.com/chenxiaochan/p/7237617.html

相关文章:

  • struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input
  • 关于大型网站技术演进的思考(十五)--网站静态化处理—前后端分离—中(7)...
  • 设计模式(java) 单例模式 单例类
  • 误差
  • [转载]以xilinx为例的低功耗设计
  • 输入法
  • ucenter同步登陆机制
  • ActionBar 通用方法
  • iOS设计模式——Category和 Extension
  • Visual studio 2013 bug:visual studio no editoroptiondefinition export found for the given option nam
  • 使用 CountDownLatch 控制多个线程执行顺序
  • 记事本
  • BZOJ 2654: tree( 二分 + MST )
  • 【学习笔记】【C语言】循环结构-for
  • android-auto-scroll-view-pager
  • 【node学习】协程
  • co.js - 让异步代码同步化
  • ERLANG 网工修炼笔记 ---- UDP
  • iBatis和MyBatis在使用ResultMap对应关系时的区别
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • JavaScript DOM 10 - 滚动
  • Java新版本的开发已正式进入轨道,版本号18.3
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • Mithril.js 入门介绍
  • Odoo domain写法及运用
  • php中curl和soap方式请求服务超时问题
  • Python_OOP
  • vue2.0项目引入element-ui
  • windows下mongoDB的环境配置
  • 技术发展面试
  • 面试总结JavaScript篇
  • 前端临床手札——文件上传
  • 树莓派 - 使用须知
  • 我有几个粽子,和一个故事
  • 新手搭建网站的主要流程
  • 如何用纯 CSS 创作一个货车 loader
  • 通过调用文摘列表API获取文摘
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • #使用清华镜像源 安装/更新 指定版本tensorflow
  • (Note)C++中的继承方式
  • (附源码)apringboot计算机专业大学生就业指南 毕业设计061355
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (官网安装) 基于CentOS 7安装MangoDB和MangoDB Shell
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (十五)Flask覆写wsgi_app函数实现自定义中间件
  • (一)UDP基本编程步骤
  • (转)清华学霸演讲稿:永远不要说你已经尽力了
  • **PHP二维数组遍历时同时赋值
  • .NET CLR基本术语
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET Standard / dotnet-core / net472 —— .NET 究竟应该如何大小写?
  • .net 开发怎么实现前后端分离_前后端分离:分离式开发和一体式发布
  • .Net多线程总结
  • .Net中的集合
  • :O)修改linux硬件时间