上一篇：HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

一、文字

1.1 属性

1.2 字体样式：font-family

1.3 字体大小：font-size

1.4 字体粗细：font-weight

1.5 字体风格：font-style

1.6 行高：line-height

二、表单

点击文字自动关联：

三、表格

四、浮动

4.1 清除浮动

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <style type="text/css">
  6.         .d-parent{
  7.             border: 10px solid green;
  8.             width: 540px;
  9.         }
  11.         .d-float{
  12.             float: left;
  13.             border: 10px dotted orange;
  14.             margin: 10px;
  15.             padding: 10px;
  16.             width: 120px;
  17.         }
  19.         .clear{
  20.             clear: both;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <h1>清除浮动</h1>
  26.     <div class="d-parent">
  27.         <div class="d-float">d-float：现在 .d-float标签的高度是120px，但是有时候，我们不想明确指定浮动元素的高度，想让它们的内容决定它们的高度。</div>
  28.         <div class="d-float">d-float</div>
  29.         <div class="d-float">d-float</div>
  30.         <div class="clear"></div>
  31.     </div>
  32. </body>
  33. </html>
  1. overflow: hidden; 多余的文字会被隐藏

五、定位

透明度：a: 0 ~ 1

  1. background-color: rgba(138, 32, 10, 0.75);

div居中显示：

  1. margin: 0 auto

堆叠顺序：

  1. z-index 可用于将在一个元素放置于另一元素之后。

CSS z-index 属性

六、HTML框架布局

6.1 垂直布局

6.2 水平布局

6.3 内联框架：iframe标签

七、搜索引擎优化

下一篇：HTML5和CSS3系列（三）：变化元素、新增标签、多媒体、新增表单、全局属性

参考教学视频：HTML和CSS 6小时入门经典视频教程

HTML和CSS 入门系列（二）：文字、表单、表格、浮动、定位、框架布局、SEO的更多相关文章

  1. HTML和CSS 入门系列（一）：超链接、选择器、颜色、盒模式、DIV布局、图片

    一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...

  2. mybatis入门系列二之输入与输出参数

    mybatis入门系列二之详解输入与输出参数   基础知识   mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...

  3. C语言高速入门系列(二)

    C语言高速入门系列(二) -----转载请注明出处coder-pig 本节引言: 在前面一节中我们对C语言进行了初步的了解,学会了使用IDE进行代码的编写,编译执行! 在这一节中我们会对C语言的基本的 ...

  4. Maven入门系列(二)--设置中央仓库的方法

    原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...

  5. C# 互操作性入门系列(二)：使用平台调用调用Win32 函数

    好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...

  6. [转]C# 互操作性入门系列(二)：使用平台调用调用Win32 函数

    传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...

  7. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  8. struts2官方 中文教程 系列六：表单验证

    先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证  即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...

  9. 齐博x1第四季《模块插件的制作》系列21-公共表单器的参数选项（7）

    password 密码类型 和text一样,只不过type类型是password,密码类型输入时,显示星号.即Html中的密码框类型 icon 字体图标类型 和列表页一样,把css的字体图标引入到了表 ...

随机推荐

  1. html重置模板

    新浪的初始化: html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img { margin: 0; paddin ...

  2. The Digits String

    https://ac.nowcoder.com/acm/contest/338/L 题解: 当n==1时,0-9填上的话,对4取余,分别是余数为0的3个,1的3个,2的2个,3的2个: 当n==2时, ...

  3. Java 子类继承父类成员中的问题

    之前搞错了,变量没有“重写”一说,只有方法才能被“重写”.如果我们在子类中声明了一个和父类中一样的变量,那么实际的情况是,子类的内存堆中会有类型和名字都相同的两个变量. 现在考虑一种情况,如下所示,我 ...

  4. java实现spark常用算子之groupbykey

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  5. 05 Python网络爬虫的数据解析方式

    一.爬虫数据解析的流程 1.指定url 2.基于requests模块发起请求 3.获取响应中的数据 4.数据解析 5.进行持久化存储 二.解析方法 (1)正则解析 (2)bs4解析 (3)xpath解 ...

  6. ubuntu 创建定时备份pg数据库定时任务

    ubuntu创建定时备份数据库定时任务 一.命令文件 创建db_back.sh #!/bin/bash echo "start backup" /usr/lib/postgresq ...

  7. 问题:tomcat启动后，可以访问主页面，但是无法访问dubbo-admin

    原因分析: 直接查看logs中的日志文件,发现一行 [Catalina-utility-1] org.apache.catalina.startup.HostConfig.undeploy Undep ...

  8. centso 7 Keepalived 配置脚本

    #!/bin/bash #This is keepalived bashshell. #MASTER/BACKUP yum install -y openssl openssl-devel keepa ...

  9. 模块之-random(随机模块)

    模块之-random(随机模块) random #shuffle 洗牌功能 >>> i=[1,2,3,4,5,6] >>> random.shuffle(i) &g ...

  10. java基础笔试题一

    1.Vector和ArrayList的区别 答:Vector的方法都是同步的(Synchronized),是线程安全的(thread-safe),而ArrayList的方法不是,由于线程的同步必然要影 ...