div元素是用来为html文档内大声(block-level)的内容提供结构和背景的元素.

cssCascading Style Sheets(层叠样式表单)的缩写,是一种用来表现htmlxml等文件样式的计算机语言.

dic+css是网站标准(或称"web标准"),通常为了说明与html网页设计语言中的表格(table)定位方式的区别.

简单来说:
div是区块,是用来存放内容(文字,图片,表格等)的容器.
css的作用是用来规定div和div中的内容的位置和样式(大小,颜色,背景,列表的样式等)
div+css结合就可以做到把内容和样式分离.

用法:

head标签中间新建一个style的标签,里面写各种属性及属性值.

这里先使用类选择器来完成.

类选择器的语法是在head标签中间加下面的代码:

<style type="text/css">
.类选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
</style>

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>

style里面的样式要与div里的类名一样,才能起作用.

用浏览器执行这段代码,效果如下:

将文字居中,加属性:text-align:center;
将文字上下居中,加属性:line-height:300px;
再把字体调大一点,加属性:font-size:30px;

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
text-align:center;
line-height:300px;
font-size:30px;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>

刷新浏览器,效果如下:

再为这段代码添加"margin-left"和"margin-top"这两个属性.

修改后的代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>DIV+CSS</title>
<style type="text/css">
.div1{
width:300px;
height:300px;
background-color:silver;
text-align:center;
line-height:300px;
font-size:30px;
margin-left:300px;
margin-top:100px;
}
</style>
</head>
<body>
<div class="div1">
hello world!
</div>
</body>
</html>

刷新浏览器后,效果如下:

可以看到,中间的字体处在浏览器的中间位置,而且字体距离页面的顶部还有一定的距离,

.

div+css的优势:
1.符合w3c的标准
2.搜索引擎更加友好
3.样式的调整更加方便.内容和样式的分离,使页面和样式的调整变得更加方便.
4.css的极大优势表现在简洁的代码.对于一个大型网站来说,可以节省大量带宽;而且,搜索引擎喜欢清洁的代码.
5.表现和结构分离,在团队开发中更容易分工合作而减少相互关联性

初识DIV+CSS的更多相关文章

  1. (一)初识div+css

    关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division ...

  2. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  3. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  4. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  5. DIV+CSS规范命名大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...

  6. DIV+CSS 清除浮动方法总结

    DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...

  7. 十天学会<div+css>横向导航菜单和纵向导航菜单

    纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...

  8. DIV+CSS布局网站基本框架

    html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  9. DIV+CSS常用的网页布局代码

    单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...

随机推荐

  1. bzoj:1941: [Sdoi2010]Hide and Seek

    1941: [Sdoi2010]Hide and Seek Time Limit: 16 Sec  Memory Limit: 162 MBSubmit: 531  Solved: 295[Submi ...

  2. '<<' '|' '>>' 等位运算符 课本祥解

    a<<1   相当于a*2     a>>1    相当于a/2   a<<|1   相当于a*2+1 一些算法用得到.

  3. hdu_2604Queuing(快速幂矩阵)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2604 Queuing Time Limit: 10000/5000 MS (Java/Others)  ...

  4. You can Solve a Geometry Problem too(线段求交)

    http://acm.hdu.edu.cn/showproblem.php?pid=1086 You can Solve a Geometry Problem too Time Limit: 2000 ...

  5. spring boot容器启动详解

    目录 一.前言 二.容器启动 三.总结 =======正文分割线====== 一.前言 spring cloud大行其道的当下,如果不了解基本原理那么是很纠结的(看见的都是约定大于配置,但是原理呢?为 ...

  6. Spark算子--coalesce和repartition

    coalesce和repartition--Transformation类算子 代码示例

  7. 从零开始学习前端开发 — 11、CSS3选择器

    一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...

  8. vue项目中使用ueditor

      以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript& ...

  9. 独立服务器 云主机、VPS以及虚拟主机三者之间的区别是什么?哪个更好?

    https://www.zhihu.com/question/21442353#answer-2442764 云主机(如 EC2,[1] )和 VPS (如 Linode,[2])都是完整的操作系统( ...

  10. linux下卸载apache方法小结

    方法一 代码如下: 1. root@server ~]# rpm -qa|grep httpd  httpd-2.2.3-11.el5_2.centos.4  httpd-manual-2.2.3-1 ...