第一个知识点是关于伪类的，代码如下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

     <title>CSS伪类</title>

     <meta name="keywords" content="关键字列表" />

     <meta name="description" content="网页描述" />

     <link rel="stylesheet" type="text/css" href="" />

     <style type="text/css">

         a:link{color:red;}            /*未被访问*/

         a:visited{color:#ccffff;}    /*已访问*/

         a:hover{color:#ff33ff;}        /*鼠标滑过*/

         a:active{color:#ffff00;}    /*已选中*/

         p:first-child{color:#33ffff;}            /*第一子元素将会修改颜色*/

         p > i:first-child{font-weight:bold;}    /*所有p元素中的第一个i元素将加粗*/

         p:first-child u{color:#00ff33;}            /*第一个p元素中的所有的u元素将修改颜色*/

         q:lang(no)

         {

             quotes: "~" "~"                        /*在引用的开头和结尾添加字符*/

         }

     </style>

     <script type="text/javascript"></script>

 </head>

 <body>

     <a href = "#">这是一个链接</a></br>

     <div>

         <p>P的<u>第一个</u>元<u>素</u></p>

         <p>P的<u>第二个</u>元素</p>

         <p>p的<i>第三个</i><i>元素</i></p>

         <p>p的<i>第四个</i><i>元素</i></p>

         <p>文字<q lang="no">段落中的引用的文字</q>文字</p>

     </div>

 </body>

 </html>

效果如图：

　　以下是关于伪类的一些笔记：

　　伪类一开始单单只是用来表示一些元素的动态状态，典型的就是链接的各个状态(LVHA)。随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类

链接的四种状态
    a:link {color:#FF0000;} /* 未访问的链接 */
    a:visited {color:#00FF00;} /* 已访问的链接 */
    a:hover {color:#FF00FF;} /* 鼠标划过链接 */
    a:active {color:#0000FF;} /* 已选中的链接 */

first - child伪类
    来选择元素的第一个子元素
    :first-child选择的是某个标签内的第一个元素
    :first-child只有当元素是其父元素(即一定要被包含)的第一个子元素时才能匹配，即该元素前面没有兄弟标签。

========================================================================

第二个知识点是关于伪元素

 <html>

 <head>

     <title>伪元素</title>

     <meta http-equiv = "content-type" content = "text/html; charset = utf-8">

     <script type = "text/javascript"></script>

     <style type = "text/css">

         p:first-letter{            /*制作首字母特效*/

             color:#ff0000;

             font-size:xx-lager;

         }

         p.line:first-line{        /*制作首行样式特效*/

             color:#33ffff;

         }

         p:before{

         }

     </style>

 </head>

 <body>

     <p>You can use the :first-letter pseudo-element to add a special effect to the first letter of a text</p>

     <p class = "line">This is a whole line<br/>This is a whole line</p>

 </body>

 </html>

效果如图：

关于伪元素的一些笔记：

CSS 伪元素用于将特殊的效果添加到某些选择器。

first-letter 伪元素用于向某个选择器中的文本的首字母添加特殊的样式：

first-line 伪元素用于向某个选择器中的文字的首行添加特殊样式：

before 伪元素可用于在某个元素之前插入某些内容。

after 伪类可用于在某个元素之后插入某些内容。

====================================================

第三个知识点是关于浮动属性：

 <html>

     <head>

         <title>CSS float属性</title>

         <meta http-equiv = "content-type" content = "text/html; charset = utf-8">

         <style type = "text/css">

             img{

                 float:right;                /*图片居右*/

                 border:1px dotted red;        /*设置边框*/

                 margin:0px 0px 15px 20px;    /*外填充设置*/

             }

         </style>

     </head>

     <body>

         <p>

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

         </p>

         <p>

             <img src="Images/jd1.png" />

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

             This is some text. This is some text. This is some text.

         </p>

     </body>

 </html>

效果如图：

关于该属性的一些属性：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

HTML第八天笔记的更多相关文章

  1. iOS 阶段学习第八天笔记（指针）

    iOS学习(C语言)知识点整理 一.指针 1)概念:存储变量的地址的一个变量. 2) 数据存储类型分析 1.text (代码段) :存储二进制的可执行代码 2.data(初始化的数据段) 存储初始化的 ...

  2. xmind的第八天笔记

  3. angularjs学习第八天笔记（指令作用域研究）

    您好,在前两天对指令的简单了解和系统指令学习后 今天主要研究其指针作用域的相关事情 每一个指令在创建时,其实就构成了自己的一个小的模块单元. 其对于的模块单元都有着其对于的作用域,其中作用域一般有两种 ...

  4. 30天自制操作系统第八天学习笔记（u盘软盘双启动版本）

    暑假学习小日本的那本书:30天自制操作系统 qq交流群:122358078    ,更多学习中的问题.资料,群里分享 environment:开发环境:ubuntu 第八天的学习思考: 关于鼠标是怎么 ...

  5. 《JavaScript权威指南》学习笔记 第八天 Node Tree

    前几天介绍了DOM的知识,以及节点的操作.今天我们来重点理解下Node的属性以及方法. 在Document文档里属于Node的东西很多: 其中Document对象是Node对象最大的对象,平时我们使用 ...

  6. mysql学习笔记 第八天

    where,group by,having重新详解 where的用法: where与in的配合使用,in(值1,值2,...)表示结果在值1,值2,...其中任何一个. 聚合函数和group by的用 ...

  7. UI学习笔记---第八天

    UINavigationController的用法   界面间传值 UInavigationController继承于UIViewController,以栈的方式管理所控制的师徒控制器,至少要有一个被 ...

  8. iOS学习笔记---oc语言第八天

    属性 能在一定程度上简化代码,并且增强实例变量的访问安全性 属性的声明:使用@property声明属性  eg:@property NSSstring *name;相当于@interface中声明了两 ...

  9. iOS学习笔记---c语言第八天

    指针 首先将变量a的地址存放在另一个变量中,比如存放在变量b中,然后通过变量b来间接引用变量a,间接读写变量a的值.用来存放变量地址的变量,就称为"指针变量" int *p=nul ...

随机推荐

  1. Oracle 数据库中日期时间的插入操作

    Oracle 中如何插入日期时间类型的数据,首先为了演示, 新建数据表如下 create table t( mydate date); 插入日期时间 SQL> insert into t val ...

  2. 把php.exe加入系统环境变量-使用命令行可快速执行PHP命令

    有时候在执行长时间运行的脚本程序的时候,浏览器是架不住的.我们就可以使用CMD命令行或者LINUX命令行执行PHP程序 1.把PHP.EXE加入到环境变量,不用每次都进入到PHP的目录 ①  右击我的 ...

  3. slowhttps安装及使用心得

    运行及安装环境,kali. 到googlecode上下载安装包,cd到安装目录./configure 运行完毕后输入make 结束后make install 简单点就直接apt-get install ...

  4. Epic - Tic Tac Toe

    N*N matrix is given with input red or black.You can move horizontally, vertically or diagonally. If ...

  5. MFC中GetPrivateProfileString相关函数

    项目中用到了这个函数,所以了解了一下,参考了一些博客: http://blog.sina.com.cn/s/blog_a599b5960101tsbk.html http://blog.csdn.ne ...

  6. GitHub--git push出错解决

    当使用GitHub进行代码push是,出现了下面的错误,该如何是好? 错误描述: ! [rejected]        master -> master (non-fast-forward)e ...

  7. Azure杂七杂八系列(二) - 如何在Azure上重新配置VM

    我们经常遇到这样的问题,  对于已经建立的VM进行性能提升, 比如需要更好的虚拟机或者需要迁移到其他的虚拟网络 那么我们可以使用以下的方法进行修改. 1. 如图所示, TESTVMXX位于North ...

  8. Mapreduce执行过程分析(基于Hadoop2.4)——(二)

    4.3 Map类 创建Map类和map函数,map函数是org.apache.hadoop.mapreduce.Mapper类中的定义的,当处理每一个键值对的时候,都要调用一次map方法,用户需要覆写 ...

  9. 一起学习 微服务(MicroServices)-笔记

    笔记 微服务特性: 1. 小 专注与做一件事(适合团队就是最好的) 2. 松耦合 独立部署 3. 进程独立 4. 轻量级通信机制 实践: 1. 微服务周边的一系列基础建设 Load Balancing ...

  10. 解决ehcache的UpdateChecker问题

    问题描述 项目中用了ssh框架,每次启动tomcat的时候都特别慢,会在这样一句话下面停留很久 [2016-01-08 23:55:51,517 INFO UpdateChecker.java:doC ...