HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO
上一篇: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 可用于将在一个元素放置于另一元素之后。
六、HTML框架布局
6.1 垂直布局
6.2 水平布局
6.3 内联框架:iframe标签
七、搜索引擎优化
下一篇:HTML5和CSS3系列(三):变化元素、新增标签、多媒体、新增表单、全局属性
HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO的更多相关文章
- HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片
一.超链接 二.CSS选择器 CSS的全称叫做: Cascading Style Sheets 级联样式表的缩写. 2.1 类型选择器 2.2 派生选择器 2.3 伪类选择器 <style &g ...
- mybatis入门系列二之输入与输出参数
mybatis入门系列二之详解输入与输出参数 基础知识 mybatis规定mapp.xml中每一个SQL语句形式上只能有一个@parameterType和一个@resultType 1. 返回 ...
- C语言高速入门系列(二)
C语言高速入门系列(二) -----转载请注明出处coder-pig 本节引言: 在前面一节中我们对C语言进行了初步的了解,学会了使用IDE进行代码的编写,编译执行! 在这一节中我们会对C语言的基本的 ...
- Maven入门系列(二)--设置中央仓库的方法
原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...
- C# 互操作性入门系列(二):使用平台调用调用Win32 函数
好文章搬用工模式启动ing ..... { 文章中已经包含了原文链接 就不再次粘贴了 言明 改文章是一个系列,但只收录了2篇,原因是 够用了 } --------------------------- ...
- [转]C# 互操作性入门系列(二):使用平台调用调用Win32 函数
传送门 C#互操作系列文章: C# 互操作性入门系列(一):C#中互操作性介绍 C# 互操作性入门系列(二):使用平台调用调用Win32 函数 C# 互操作性入门系列(三):平台调用中的数据封送处理 ...
- Bootstrap入门(五)表单
Bootstrap入门(五)表单 先引入本地的CSS文件 <link href="css/bootstrap.min.css" rel="stylesheet ...
- struts2官方 中文教程 系列六:表单验证
先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证 即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...
- 齐博x1第四季《模块插件的制作》系列21-公共表单器的参数选项(7)
password 密码类型 和text一样,只不过type类型是password,密码类型输入时,显示星号.即Html中的密码框类型 icon 字体图标类型 和列表页一样,把css的字体图标引入到了表 ...
随机推荐
- 使用git保存管理代码
1.git是个代码版本管理软件,类似SVN github是个网站,提供git服务,我们只需要注册个账号,就可以使用它的git服务,不需要自己部署git系统 git需要先在电脑端安装,安装完成后,讲产生 ...
- 在Powershell中使用Group-Object和-GroupBy
使用Group-Object(group)按组统计 PS C:\> Get-Command -Module Microsoft.PowerShell.LocalAccounts | group ...
- 关于tomcat部署项目的问题
问题是这样的 之前用tomcat8.5部署的项目,结果启动项目一直三个端口被占用,浏览器也打不开目标网页 卸了8,装了9.先配置的一大堆,结果可以打开Tomcat的主页locahost:8080,到此 ...
- springboot(十八)-session共享
前言 在传统的单服务架构中,一般来说,只有一个服务器,那么不存在 Session 共享问题,但是在分布式/集群项目中,Session 共享则是一个必须面对的问题,先看一个简单的架构图: 在这样的架构中 ...
- Stream 分布式数据流的轻量级异步快照
1. 概述 分布式有状态流处理支持在云中部署和执行大规模连续计算,主要针对低延迟和高吞吐量.这种模式的一个最根本的挑战就是在可能的失败情况下提供处理保证.现有方法依赖于可用于故障恢复的周期性全局状态快 ...
- performance面板使用,以及解决动画卡顿
https://googlechrome.github.io/devtools-samples/jank// 官方案例 https://juejin.im/post/5b65105f518825 ...
- 借用jquery实现:使浏览器的“前进”按钮功能失效
我借用jquery实现了这种效果,但并没有禁用掉浏览器本身的“前进”按钮,以下是代码,希望有用的朋友借鉴以下: $(function () { jQuery(window).bind("un ...
- 人脸识别之Python DLib库进行人脸关键点识别
一.首先安装DLib模块 这里只介绍linux安装的过程,windows安装过程请自行百度 1.首先,安装dlib.skimage前:先安装libboost sudo apt-get install ...
- python、mysql四-2:多表查询
一 介绍 本节主题 多表连接查询 复合条件连接查询 子查询 准备表 #建表 create table department( id int, name varchar() ); create tabl ...
- DockerScan:Docker安全分析&测试工具
DockerScan:Docker安全分析&测试工具 今天给大家介绍的是一款名叫DockerScan的工具,我们可以用它来对Docker进行安全分析或者安全测试. 项目主页 http://gi ...