初识DIV+CSS
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的更多相关文章
- (一)初识div+css
关于div+css,一直以来都是听其名,而不知其为何.今天看了半天的视频,终于对此略有了解,感觉挺好的,相比之前的table布局页面,div+css就是一把页面布局利器!! div全称division ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- DIV+CSS布局中主要CSS属性介绍
Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...
- div+css页面右侧底部悬浮层
效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...
- DIV+CSS规范命名大全
网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇. 常用DIV+CSS命名大全集合,即CSS命名规则 D ...
- DIV+CSS 清除浮动方法总结
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所 ...
- 十天学会<div+css>横向导航菜单和纵向导航菜单
纵向导航菜单及二级弹出菜单 纵向导航菜单:一级菜单 <head><style type="text/css">body { font-family: Ver ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- DIV+CSS常用的网页布局代码
单行一列以下是引用片段:body { margin: 0px; padding: 0px; text-align: center; }#content { margin-left:auto; marg ...
随机推荐
- 学习SpirngMVC之如何获取请求参数
学习SpringMVC——如何获取请求参数 @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@Cooki ...
- ZOj 3466 The Hive II
There is a hive in the village. Like this. There are 8 columns(from A to H) in this hive. Different ...
- Frame Stacking（拓扑排序）
题目链接:http://acm.tju.edu.cn/toj/showp1076.html1076. Frame Stacking Time Limit: 1.0 Seconds Memory ...
- c语言字符相关函数
1.fgetc(getc)fputc(putc)区别: getc和putc都是针对标准输入输出的,而fgetc和fputc可以对任意的文件操作,也可以用fgetc和fputc对标准输入输出操作fget ...
- JqGrid 多行表头设置
1.我想要统计的效果是这样的 2.只要在初始化表格中加上如下代码就可以了: jQuery("#tbAbroadStatisticByUnit").jqGrid('setGroupH ...
- 启动redis
方法一:默认是前端启动 默认端口:6379 cd /usr/local/redis/bin/redis-server 方法二:后端启动 方法二:后端启动 然后进入 指定配置文件 [roo ...
- JAVA经典算法面试40题及答案
现在是3月份,也是每年开年企业公司招聘的高峰期,同时有许多的朋友也出来找工作.现在的招聘他们有时会给你出一套面试题或者智力测试题,也有的直接让你上机操作,写一段程序.算法的计算不乏出现,基于这个原因我 ...
- Android按下home键后重新打开app进入主activity的问题
问题阐述: 当我们写一款App的时候,势必会有这种情况:用户已经进行了多级的操作,现返回栈中已存在多个activity,那么这个时候我们想回到最初的activity难道要一层层的返回吗,对用户来说 无 ...
- php表单提交并发送邮件给某个邮箱（示例源码）
今天老板要求做一个需求,在官网上做一个页面提交的表单,并且当表单点击后,把表单的内容直接提交并通过发送邮件的方式到老板指定的邮箱,下面就分享 一下我的做法 首先建立一个html文档,把页面制作好,并且 ...
- TP传输的两种模式
主动模式(active): 我们知道,FTP是由TCP封包的模式连接,TCP 这种封包由于需要经过 Server 端与 Client 端两边的『三次握手』之后,才能确定联机,也就是需要执行AC ...