div+css基础
Div+css技术
Div是用于存放文字，图片，元素的容器
Css 是用于指定存放在div中的内容如何显示，包括内容的位置和外观(层叠样式表)
Html 文件
<!--必须引入的文件-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--引入my.css文件-->
<link href='my.css' type ='text/css' rel='stylesheet'/>
</head>
<body>
<!--指向style1-->
<div class='style1'>
<table>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>
Css文件
/*选择器*/
/*margin：上右下左*/
.style1{
width:100px;
height:200px;
border:1px solid red ;
color:blue;
margin:100px 200px 300px 400px;
}
/* 父子选择器table*/
.style1 table{
width:99px;
height:180px;
border:1px solid black;
}
/*父子选择器td*/
.style1 table td{
border:1px solid black;
text-align:center;
}
CSS的必要性
使用<span>以及强大的工具
使用IDE(集成开发环境)myeclicpse
因为myeclipse 带有提示功能
一般的网站头部文件解释
Eclipse的快捷键设置（content Assitant）,把它配置成~
在windows –prefrecnse-输入key-输入content-content Assitant –快捷键改成·
对于新建的html文件的解释
使用span 格式 ，看到使用Css的一般格式
<元素名 style =”属性名：属性值；属性名：属性值；”>
元素可以是html之中的任意一种
属性名和属性值要参考W3CSCHOOL的文档
运行：
然后使用CSS来统一风格
CSS 分类：内部CSS，外部CSS
使用内部CSS
汶川大地震时使所有的图片和文字全都变黑白-----------------滤镜技术
CSS选择器
id>类选择器>html选择器
1 类选择器
编写一个css文件，在HTML中引入CSS，使用CSS定义的类控制器
可以直接拖入CSS
2 id选择器
注意：是#
3 html选择器
这个是控制全局样式的选择器，优先比较低，优先级是：id>类选择器>html选择器
练习：
对于超链接的处理：
通配符选择器
作用：用来解决不同浏览器之间的左边距和上边距不统一的问题，有时候特别有用
/*使用通配符选择器，对外边距和内边距进行清零*/
*{
/*margin: 0px;*/
/* margin:10px 0px 0px 10px; */ /*代表着上 右 下 左 逆时针方向旋转*/
margin:10px 0px 0px ; /*代表着上 左右 下 */
padding: 0px;
}
CSS 综合使用
一行字内的格式风格有所不同 利用id选择器
#style2{
font-size: 50px;
color: green;
font-style: italic;
}
/*父子选择器*/
#style2 span {
color: red;
font-size: 60px;
}
2 父子选择器在id 选择器和 class 选择器都可以
但是id 选择器要大于 class 选择器
3 父子选择器还可以多层出现 style2—span-span
#style2 span span {
color: red;
font-size: 60px;
}
4 一个元素只可以有一个id选择器，但是可以有多个class选择器
有两个class 选择器的时候，看谁写在css文件的后面以谁为主
四类选择器的优先权：id class html 通配符
然后，优化代码部分，提取共性的css
例如
练习题
Css文件代码
块元素和行内元素
行内元素：Span 元素：里面的东西有多大就多大，只占内容的宽度，默认不会换行，一般放文本或者其他的行内元素
块元素：Div，p 元素：不管内容多少，要换行，同时占满整个一行(太霸道)，可以放文本，行业元素，块元素
块元素和行内元素互换
Display:block 行内元素转块元素
Display:inline 块元素转行内元素
div+css基础的更多相关文章
- div+css基础教程
本文存下来作为备忘. 第一节 了解div+css 一.什么是div+css div元素是html(超文本语言)中的一个元素,是标签,用来为html文档内大块(block-level)的内容提供结构和 ...
- DIV+CSS 基础
盒子模型:margin(边界),可被占位:border(边框):padding(填充):content(内容) 块元素: 默认占据一行,前后换行. 作为容器,装载块元素和行内元素,被装载元素的位置,会 ...
- 2天驾驭DIV+CSS （基础篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 【笔记-前端】div+css排版基础，以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- DIV+CSS专题：第一天 XHTML CSS基础知识
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- DIV+CSS+JS基础+正则表达式
...............HTML系列.................... DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
随机推荐
- 【皇甫】☀那些事儿......STEP
写项目之前呢,先来缕缕思路,既然要写学生管理系统,那肯定上不了从数据库中读取信息,然而想要从数据库中拿到你想要的东西,就要先登录,得到他的权限才行,所以我们第一步就要先搞出一个登录页面并且能连接到数据 ...
- spark history-server的使用
为什么需要historyServer? 在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WEBUI随着Application的完成(成功/失 ...
- 夺命雷公狗---DEDECMS----17dedecms头条信息的取出
我们在有些开发时候可能会用到些头条的文章,,添加过程如下所示: 我们在前台遍历数据的时候可以这样, 然后在后台更新首页模版后在去看下首页,效果如下所示:
- 关于windows操作系统的内核
操作系统内核.从本质上来讲,它本身也是一个程序.比如windows的内核 ntoskrnl.exe 就是一个我们平常看到的 PE 文件,它的位置位于 \WINDOWS\system32\ntoskrn ...
- 锋利的JQuery（一）
释义: Ajax:Asynchronous Javascript And XML,异步的Javascript和XML 其它库: Prototype:最早 Dojo:学习曲线陡 YUI:比较丰富 Ext ...
- Eratosthenes筛选法求解质数
问题说明: 除了自身之外,无法被其它整数整除的数称之为质数,要求质数很简单,但如何快速的求出质数则一直是程式设计人员与数学家努力的课题, 在这边介绍一个着名的 Eratosthenes求质数方法. 解 ...
- SQL 基础语法（创建表空间、用户、并授予权限、数据的增删改查） --（学习笔记）[转]
--创建表空间 名:lyayzh_test create tablespace lyayzh_test --创建表数据文件 名:lyayzh_test_data.dbf 必须以dbf为后缀 dataf ...
- 系统上线后WCF服务最近经常死掉的原因分析总结
前言 最近系统上线完修改完各种bug之后,功能上还算是比较稳定,由于最近用户数的增加,不知为何经常出现无法登录.页面出现错误等异常,后来发现是由于WCF服务时不时的就死掉了.后来就开始分析问题.得到的 ...
- android 开发（百度地图）
百度地图开放平台:http://lbsyun.baidu.com/ 百度地图API:http://developer.baidu.com/map/reference/ Android地图SDK 百度地 ...
- django form使用学习记录
Django forms使用容易, 又方便扩展, 因此Django admin和CBVs基本都基于forms使用. 事实上, 由于django forms的强大验证功能, 大多数Django API ...