博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3笔记4
阅读量:5149 次
发布时间:2019-06-13

本文共 2529 字,大约阅读时间需要 8 分钟。

1.CSS3盒子模型

1  2  3  4     
5 Document 6 27 28 29
content-box
30
border-box
31 32
CSS3盒子模型

 

2.盒子阴影

1  2  3  4     
5 Document 6 23 24 25

文字阴影演示

26
盒子阴影演示
27 28
盒子阴影

 

    
Document
水晶图片
水晶图片案例

 

3.文字环绕效果

1  2  3  4     
5 Document 6 17 18 19
20 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。21
22 在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [1] 23 24 为了取得技术优势,微软推出了JScript,CEnvi推出ScriptEase,与JavaScript同样可在浏览器上运行。为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript。25 26 27
28 29
文字环绕效果

 

4.浮动

1  2  3  4     
5 Document 6 22 23 24
25
26
27 28
左浮动

 

    
Document
浮动特性

 

    
Document
熊大
熊二
浮动特性2

 

    
Document
我是div1
div2
我是span1 span2
浮动改变元素模式

浮动特性总结

 

5.网页布局

布局流程

 

    
Document
top
main
一列固定宽度且居中

    
Document
一列固定宽度且居中,有间隙

 

    
Document
top
left
right
两列左窄右宽型

 

    
Document
top
  • 1
  • 2
  • 3
  • 4
通栏平均分布型

 

6.清除浮动的4种姿势

    
Document
浮动盒子后面加标签(low,不推荐)

后面效果与这个效果一样。

 

    
Document
父标签添加overflow
    
Document
after伪元素清除浮动
    
Document
双伪元素清除浮动
 

7.思维导图总结

 

转载于:https://www.cnblogs.com/replaceroot/p/10458252.html

你可能感兴趣的文章
深浅拷贝(十四)
查看>>
HDU 6370(并查集)
查看>>
BZOJ 1207(dp)
查看>>
PE知识复习之PE的导入表
查看>>
HDU 2076 夹角有多大(题目已修改,注意读题)
查看>>
洛谷P3676 小清新数据结构题(动态点分治)
查看>>
九校联考-DL24凉心模拟Day2T1 锻造(forging)
查看>>
Attributes.Add用途与用法
查看>>
L2-001 紧急救援 (dijkstra+dfs回溯路径)
查看>>
javascript 无限分类
查看>>
spring IOC装配Bean(注解方式)
查看>>
[面试算法题]有序列表删除节点-leetcode学习之旅(4)
查看>>
SpringBoot系列五:SpringBoot错误处理(数据验证、处理错误页、全局异常)
查看>>
kubernetes_book
查看>>
OpenFire 的安装和配置
查看>>
侧边栏广告和回到顶部
查看>>
https://blog.csdn.net/u012106306/article/details/80760744
查看>>
海上孤独的帆
查看>>
error: more than one device and emulator 问题解决
查看>>
Django 学习
查看>>