表格标题浮动html,HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO...

一、文字

1.1 属性

6eee2ca89b41666901c28250f86477b1.png

1.2 字体样式:font-family

d0bd159932fc6520b9e7b694eac81e82.png

52b9dc543ded6bccf142851b48476c77.png

1.3 字体大小:font-size

f32639bc630e2f199300790081170d5e.png

f4d6389c7f5e0046b07e6c10ab6f3fda.png

2cd24c4f306132845b5649e98fa4f265.png

1.4 字体粗细:font-weight

38b526746fdbbd58a18f33a0b2e74916.png

1.5 字体风格:font-style

6d8de78c6d48c0aa230b3232bafd9d41.png

1.6 行高:line-height

0bc57f5e0b099c6c6e6fd6a59cd3f601.png

二、表单

920359712a945bb85c27109254198062.png

8e32def939231812371d010f9c1227c2.png

5d018420db273b3de790ca85d0abe4f1.png

点击文字自动关联:

d6af3519b97a5280c5478bf71b734964.png

三、表格

a3bcc709652846c0f819c5a8571cb3ca.png

7d896e429655c8d5ea582afffed0493f.png

92069e4f5ce078a546d0f02fd238919f.png

4902c2454df4475f4cc46b996eef36ce.png

f9eed6a1b807ed522af5d96712bebc26.png

033b07d85318cd3910dba56824d78ddb.png

54e75b92055d10b8c44b2a840ea4583c.png

四、浮动

4.1 清除浮动

.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;

}

清除浮动

d-float:现在 .d-float标签的高度是120px,但是有时候,我们不想明确指定浮动元素的高度,想让它们的内容决定它们的高度。
d-float
d-float

overflow: hidden; 多余的文字会被隐藏

五、定位

c1a61d45c068fc60d7d2eb06fc6cae4e.png

透明度:a: 0 ~ 1

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

div居中显示:

margin: 0 auto

堆叠顺序:

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

六、HTML框架布局

a0c9b8003b6cd617cfc365ba62e655ba.png

6.1 垂直布局

3c7dcd5575f2d399ab62ca7798296d1e.png

2f6abf7633a7ffe731c5289ff20b0667.png

6.2 水平布局

e6cf3feeaa155c1740a0d008a8e589cc.png

44270ce8285b6169dc6fcab3853a3e70.png

2115e4c0586cfbd509913f68e843c7c5.png

453153c707872e42e7c07abecd2a3f77.png

6.3 内联框架:iframe标签

f2e56af95b30c4da6cb1f472a89dcd37.png

454105e290b685397f5d678323196309.png

七、搜索引擎优化

c865b3de0a8dc91f4f4ec83d896fc780.png

df390738a8478239110dc450ca9664d1.png

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值