上一篇: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 清除浮动

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style type="text/css">
.d-parent{
border: 10px solid green;
width: 540px;
} .d-float{
float: left;
border: 10px dotted orange;
margin: 10px;
padding: 10px;
width: 120px;
} .clear{
clear: both;
}
</style>
</head>
<body>
<h1>清除浮动</h1>
<div class="d-parent">
<div class="d-float">d-float:现在 .d-float标签的高度是120px,但是有时候,我们不想明确指定浮动元素的高度,想让它们的内容决定它们的高度。</div>
<div class="d-float">d-float</div>
<div class="d-float">d-float</div>
<div class="clear"></div>
</div>
</body>
</html>
overflow: hidden; 多余的文字会被隐藏

五、定位

透明度:a: 0 ~ 1

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

div居中显示:

margin: 0 auto

堆叠顺序:

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. redis 学习(11)-- redis pipeline

    redis pipeline 什么是流水线(pipeline) 首先来看 redis 执行一次操作所需要的时间: 1 次时间 = 1 次网络时间 + 1次命令时间 执行 n 次就需要: n 次时间 = ...

  2. 前端页面多级联动传输数据类型问题(数组or字符串)后端处理

    在最近的工作中,遇到一个问题,个人所做的简历模块中有两个字段,分别是个人信息中的户口所在地和现居住城市. 前端界面中这两个选项框是用到了二级和三级联动,在向后端传输时希望可以通过数组类型进行传输,例如 ...

  3. 重学JavaScript之匿名函数

    1. 什么是匿名函数? 匿名函数就是没有名字的函数,有时候也称为< 拉姆达函数>.匿名函数是一种强大的令人难以置信的工具.如下: function a(a1, a2, a3) { // 函 ...

  4. 第二十一篇 jQuery 学习3 特效效果

    jQuery 学习3   这节课主要是学习jQuery的动态效果. show()和hide()显示与隐藏方法,toggle()方法,fadeIn()谈入,fadeOut()谈出,slideDown() ...

  5. springBoot 打包上线跳过连接数据库

    在pom文件下添加 <skipTests>true</skipTests> 这一行 如下: <properties> <project.build.sourc ...

  6. 使用 java 创建你的第一个区块链(第二部分)

    本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...

  7. 正确的安装和使用nvm(mac)<转>

    前言 目前主流的node版本管理工具有两种,nvm和n.两者差异挺大的,具体分析可以参考一下淘宝FED团队的一篇文章: 管理 node 版本,选择 nvm 还是 n? 总的来说,nvm有点类似于 Py ...

  8. 如何使用sqlalchemy根据数据库里面的表反推出模型,然后进行查询

    关于sqlalchemy映射数据库里面的表,一般情况下我们是需要定义一个模型来映射数据库里面的表的.但是很多时候数据库里面的表都是定义好的,而且字段很多,那么有没有不定义模型,还能使用orm语法查找数 ...

  9. 4.pca与梯度上升法

    (一)什么是pca pca,也就是主成分分析法(principal component analysis),主要是用来对数据集进行降维处理.举个最简单的例子,我要根据姓名.年龄.头发的长度.身高.体重 ...

  10. zencart安全辅助小脚本

    在includes/application_top.php最后一行加入require('fish.php'); 将下面代码保存为fish.php <?php function customErr ...