1.CSS样式优先级

优先级：由上到下，由外到内。优先级越来越高

2.css选择器

html标签选择器

class选择器（.)

id选择器（#）

3.优先级

style属性>id选择器>class选择器>标签名

4.css扩展选择器

关联选择器：标签嵌套的

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div p {

        background-color: green;

    }

  </style>

 </head>

 <body>

<div><p>CSS的扩展选择器</p></div>

<p>WWWWWWWWWWWWWWWWWWWWWW</p>

 </body>

</html>

组合选择器：多个不同选择器进行相同样式设置

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div,p {

        background-color: orange;

    }

  </style>

 </head>

 <body>

    <div>QQQQQQQQQQQQQQQQQ</div>

    <p>AAAAAAAAAAAAAAAAAAAAAAA</p>

 </body>

</html>

伪元素选择器：预先定义好一些选择器，或者当前元素处于的状态

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    /*原始状态*/

    a:link {

        background-color: red;

    }

    /*悬停状态*/

    a:hover {

        background-color: green;

    }

    /*点击状态*/

    a:active {

        background-color: blue;

    }

    /*点击之后的状态*/

    a:visited {

        background-color: gray;

    }

  </style>

 </head>

 <body>

<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>

 </body>

</html>

5.css盒子模型：在进行布局前把数据封装到一块一块的区域内。

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div {

        width: 200px;

        height: 100px;

        border: 2px solid blue;

    }

    #div22 {

        padding: 20px;

    }

    #div23 {

        padding-left: 30px;

    }

  </style>

 </head>

 <body>

<div id="div21">AAAAAAAAAAAAAAA</div>

<div id="div22">BBBBBBBBBBBBBBBBBBBBBBBBBBBB</div>

<div id="div23">CCCCCCCCCCCCCCC</div>

 </body>

</html>

6.css布局漂浮属性

float:none

默认值，对象不漂浮

left/right:文本流对象的左边/右边

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    div {

        width: 200px;

        height:150px;

        border: 2px solid blue;

    }

    #div41 {

        float : left;

    }

    #div42 {

        float:left;

    }

  </style>

 </head>

 <body>

<div id="div41">AAAAAAAAAAAAAAA</div>

<div id="div42">BBBBBBBBBBBBBBB</div>

<div id="div43">CCCCCCCCCCCCCCC</div>

 </body>

</html>

7.css布局定位属性

position：

static:默认值，无特殊定位；

absolute：绝对定位，将对象从文档流中拖出其他对象覆盖原来的位置，使用left,right,top,bottom定位；

relative：对象不可层叠；

所谓的层叠是每个div盒子可以覆盖之前的位置，如果relative不可层叠说的就是不能覆盖之前的位置，但是之前的位置可以通过css代码改变的；

8.图文混排

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

        #imgtex11 {

            width: 400px;

            height: 300px;

            border:2px dashed orange;

        }

        #img11 {

            /*float:left;*/

            float:right;

        }

        #tex11 {

            color: green;

        }

  </style>

 </head>

 <body>

<div id="imgtex11">

    <div id="img11"><img src="aa.jpg" width="250" height="200"/></div>

    <div id="tex11">奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于奉生之始矣。假若天机迅发，妙识玄通，成谋虽属乎生知，标格亦资于</div>

</div>

 </body>

</html>

9.图像签名

<html>

 <head>

  <title>HTML示例</title>

  <style type="text/css">

    #tex21 {

        position: absolute;

        top: 50px;

        left: 30px;

        color: red;

    }

  </style>

 </head>

 <body>

    <div id="img21"><img src="aa.jpg" width="450" height="350"/></div>

    <div id="tex21">这是很多美女</div>

 </body>

</html>

JAVAWEB复习笔记-day02的更多相关文章

  1. Java基础复习笔记系列 九 网络编程

    Java基础复习笔记系列之 网络编程 学习资料参考: 1.http://www.icoolxue.com/ 2. 1.网络编程的基础概念. TCP/IP协议:Socket编程:IP地址. 中国和美国之 ...

  2. Java基础复习笔记系列 八 多线程编程

    Java基础复习笔记系列之 多线程编程 参考地址: http://blog.csdn.net/xuweilinjijis/article/details/8878649 今天的故事,让我们从上面这个图 ...

  3. Java基础复习笔记系列 七 IO操作

    Java基础复习笔记系列之 IO操作 我们说的出入,都是站在程序的角度来说的.FileInputStream是读入数据.?????? 1.流是什么东西? 这章的理解的关键是:形象思维.一个管道插入了一 ...

  4. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  5. Java基础复习笔记系列 四 数组

    Java基础复习笔记系列之 数组 1.数组初步介绍? Java中的数组是引用类型,不可以直接分配在栈上.不同于C(在Java中,除了基础数据类型外,所有的类型都是引用类型.) Java中的数组在申明时 ...

  6. 李兴华JavaWeb开发笔记

    李兴华JavaWeb开发笔记 1.Java语法-基础 环境变量-JAVA_HOME, PATH, ClassPath 变量名 作用 举例 JAVA_HOME 指向JDK目录 C:\Program Fi ...

  7. JavaWeb学习笔记总结 目录篇

    JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Http协议和Tomcat服务器 JavaWeb学习笔记三 Servlet JavaWeb学习笔记四 request&resp ...

  8. Java基础复习笔记基本排序算法

    Java基础复习笔记基本排序算法 1. 排序 排序是一个历来都是很多算法家热衷的领域,到现在还有很多数学家兼计算机专家还在研究.而排序是计算机程序开发中常用的一种操作.为何需要排序呢.我们在所有的系统 ...

  9. Angular复习笔记7-路由（下）

    Angular复习笔记7-路由(下) 这是angular路由的第二篇,也是最后一篇.继续上一章的内容 路由跳转 Web应用中的页面跳转,指的是应用响应某个事件,从一个页面跳转到另一个页面的行为.对于使 ...

随机推荐

  1. 【cf1046】A. AI robots（动态开点线段树）

    传送门 题意: 坐标轴上有\(n\)个机器人,每个机器人带有属性\(x,r,q\),分别表示位置.可视半径以及智商. 现在定义智商相近为两个机器人的智商差的绝对值不超过$K. 现在问有多少对机器人,他 ...

  2. Vue项目开发前的准备工作，node的安装，vue-cli的安装

    一.安装node 1-  点击这里进入node官网下载 2- 3- 下载完成是这样的 4-  双击打开进行安装,一路next,安装完成是这样 5-  打开cmd进入安装node的文件夹,输入node ...

  3. 日志分析利器Splunk的搭建、使用、破解

    博主对splunk的了解不多,博主的使用目的是为了同步,分析日志.当初的搭建也是为了公司申请牌照需要日志服务器分析日志,顺便自己也对这方面感兴趣就买了本书看了看搭建玩的,后来检查来了博主也给他们演示了 ...

  4. oracle表连接的优化

    多表连接的三种方式: HASH JOIN,MERGE JOIN,NESTED LOOP NESTED LOOP: 嵌套循环连接,适用于内表数据量较小时.外表返回的每一行都要在内表中检索找到与它匹配的行 ...

  5. [C3] 正则化(Regularization)

    正则化(Regularization - Solving the Problem of Overfitting) 欠拟合(高偏差) VS 过度拟合(高方差) Underfitting, or high ...

  6. Eclipse查看git中的历史，显示详细时间

    clipse show date details in git history我的eclipse查看git history,显示为相对时间,并不是很方便,想要查看某个具体日期的版本代码,就需要设置为具 ...

  7. postgres 计算时差

    计算时间差秒数 select extract(epoch FROM (now() - (now()-interval '1 day') ));

  8. 【转】ServletContext介绍及用法

    1.1.  介绍 ServletContext官方叫servlet上下文.服务器会为每一个工程创建一个对象,这个对象就是ServletContext对象.这个对象全局唯一,而且工程内部的所有servl ...

  9. Kavex GameDev-Resources

    https://github.com/Kavex/GameDev-Resources 各种资源

  10. Paper | Feedback Networks

    目录 读后总结 动机 故事 ConvLSTM图像分类网络 损失函数 与Episodic Curriculum Learning的结合 实验方法 发表在2017年CVPR. 读后总结 这篇论文旨在说明: ...