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

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

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. cs231n spring 2017 lecture2 Image Classification 听课笔记

    1. 相比于传统的人工提取特征(边.角等),深度学习是一种Data-Driven Approach.深度学习有统一的框架,喂不同的数据集,可以训练识别不同的物体.而人工提取特征的方式很脆弱,换一个物体 ...

  2. CTF---Web入门第十三题 拐弯抹角

    拐弯抹角分值:10 来源: cwk32 难度:易 参与人数:5765人 Get Flag:2089人 答题人数:2143人 解题通过率:97% 如何欺骗服务器,才能拿到Flag? 格式:CTF{} 解 ...

  3. BZOJ1008: [HNOI2008]越狱-快速幂+取模

    1008: [HNOI2008]越狱 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 8689  Solved: 3748 Description 监狱有 ...

  4. c++(非递归排序)

    在上面一篇博客当中,我们发现普通查找和排序查找的性能差别很大.作为一个100万的数据,如果使用普通的查找方法,那么每一个数据查找平均下来就要几十万次,那么二分法的查找呢,20多次就可以搞定.这中间的差 ...

  5. linux下各文件夹的结构说明及用途介绍

    linux下各文件夹的结构说明及用途介绍: /bin:二进制可执行命令.   /dev:设备特殊文件.   /etc:系统管理和配置文件.   /etc/rc.d:启动的配 置文件和脚本.   /ho ...

  6. input[type=file]中使用ajaxSubmit来图片上传

    今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...

  7. UE4 custom depth 自定义深度

    用途1: 半透明材质中实现遮挡Mesh自己其他部分的效果. 不遮挡效果如下: 遮挡后效果如下: 实现方法: 深度信息是越远值越大,使用两个Mesh,一个正常渲染,另一个渲染到custom depth ...

  8. SDP（1）：ScalikeJDBC-基本操作介绍

    简单来说:JDBC是一种开放标准的跨编程语言.跨数据库类型编程API.各类型数据库产品厂商都会按它的标准要求来提供针对自身产品的JDBC驱动程序.最主要的这是一套成熟的工具,在编程人员中使用很普及.既 ...

  9. Android按下home键后重新打开app进入主activity的问题

    问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...

  10. 什么是MVC ?

    记得第一次面试phper(php是对我来说可以快速上手的另一web开发语言),人家问我MVC,我只知道m就是model,v就是view,c就是Controller,具体把其它的认识我是一无所知,结果我 ...