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

 <!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. uploadify scriptData参数无法传参的问题

    最近需要使用到uploadify,需要向后台传递参数,使用script最多只能够传递一个参数,当然也可以通过合并参数然后再在服务器段拆分参数的方法来传递多个参数,而uploadify插件提供的scri ...

  2. 获取Request请求的路径信息

    从Request对象中可以获取各种路径信息,以下例子: 假设请求的页面是index.jsp,项目是WebDemo,则在index.jsp中获取有关request对象的各种路径信息如下 String p ...

  3. 上传Test Result和attachment到ALM

    之前在HP的时候用ALM,还是很好用的功能很强大的一个测试管理工具,当时用C#依照ALM的API实现了一个上传测试结果的程序,现在贴出来: 这个程序的使用方式很自由,使得ALM几乎可以和所有测试工具做 ...

  4. Ubuntu 16.04 TensorFlow CPU 版本安装

    1.下载Anaconda,官方网站.我下载的时Python 2.7 64bit版本: 2.安装执行命令     bash Anaconda2-4.2.0-Linux-x86_64.sh 设置好目录后等 ...

  5. CMake 入门

    编写 CMakeLists.txt 首先编写 CMakeLists.txt 文件,并保存在与 main.cc 源文件同个目录下: # 单个源文件 # CMake 最低版本号要求 cmake_minim ...

  6. Java 断点调试总结

    为了准备调试,你需要在代码中设置一个断点先,以便让调试器暂停执行允许你调试,否则,程序会从头执行到尾,你就没有机会调试了. 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头 ...

  7. Eclipse中Maven工程缺少Maven Dependencies

    Eclipse在引入Maven工程后,找不到Maven Dependencies.使得代码报错,具体如下图所示: 而正常Maven的工程如下所示: 产生这种现象的原因可能是工程对应的开发环境改变,本地 ...

  8. 应用引擎BAE3.0（转）

    add by zhj: 其实我主要是想看看基于docker的PaaS的特性. 原文:http://developer.baidu.com/wiki/index.php?title=docs/cplat ...

  9. HDU2680 Choose the best route 最短路 分类： ACM 2015-03-18 23:30 37人阅读 评论(0) 收藏

    Choose the best route Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. spring 解析配置文件问题

    问题描述 2014-02-25 16:39:36.068 [com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread-#2] WARN ...