随笔分类 -  Web - HTML\CSS

摘要:5.4 动画 5.4.1 animation CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animat 阅读全文
posted @ 2024-10-30 20:42 【唐】三三 阅读(7) 评论(0) 推荐(0) 编辑
摘要:# grid-template-column 和 grid-template-rows ![](https://img2023.cnblogs.com/blog/196558/202306/196558-20230630220041805-355624603.png) 这2个属性都支持 [],它们代 阅读全文
posted @ 2023-06-30 16:30 【唐】三三 阅读(16) 评论(0) 推荐(0) 编辑
摘要:1 opacity 透明度 opacity属性可以让元素表现为半透明,属性计算值范围是0~1,初始值是1.0,没有继承性。 1.1 opacity属性的叠加计算规则 由于opacity属性没有继承性,因此父、子元素同时设置半透明时,半透明效果是叠加的。 2 深入了解圆角属性 border-radiu 阅读全文
posted @ 2022-07-24 23:21 【唐】三三 阅读(396) 评论(0) 推荐(0) 编辑
摘要:1 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container 阅读全文
posted @ 2022-07-09 21:35 【唐】三三 阅读(121) 评论(0) 推荐(0) 编辑
摘要:2-3 HTTP的三次握手 3-2 CORS跨域请求的限制与解决 JSONP 就是实现类似于src跳过CORS验证 //因为浏览器允许 script,link 等标签加载路径 <script src="http://127.0.0.1:8887"></script> 3-3 CORS跨域限制以及预请 阅读全文
posted @ 2022-04-09 22:15 【唐】三三 阅读(39) 评论(0) 推荐(0) 编辑
摘要:# 6.2 弹性布局 1.一些约定 (1)在本书中,约定设置display:flex声明或者display:inline-flex声明的元素为“flex容器”,里面的子元素为“flex子项”。 container (flex容器) div(flex子项)> img div(flex子项)> img 阅读全文
posted @ 2022-02-13 19:53 【唐】三三 阅读(311) 评论(0) 推荐(0) 编辑
摘要:6.1 分栏布局 分栏布局也被称为多列布局、多栏布局,这种布局可以将内容布局到多个列框中,类似报纸上的排版。 分栏布局比较特殊,有别于传统布局,它将子元素在内的所有内容拆分为列,这与打印网页的时候将网页内容分成多个页面的方式类似。分栏布局主要针对图文排版布局,应用在横向排版场景中,文档流是倒N方向。 阅读全文
posted @ 2022-02-11 22:34 【唐】三三 阅读(599) 评论(0) 推荐(0) 编辑
摘要:6.3 FlexBox 调试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Navbar using flexbox, no width</title> <style> nav { display: b 阅读全文
posted @ 2021-11-27 19:26 【唐】三三 阅读(97) 评论(0) 推荐(0) 编辑
摘要:![](https://img2018.cnblogs.com/blog/196558/201911/196558-20191127232004806-377783796.png) ```html 6152 <111> <222> wew </222> </111>weqwe ``` 阅读全文
posted @ 2019-11-27 23:21 【唐】三三 阅读(784) 评论(0) 推荐(0) 编辑
摘要:![](https://img2018.cnblogs.com/blog/196558/201910/196558-20191012224454622-600361421.png) 阅读全文
posted @ 2019-10-12 22:45 【唐】三三 阅读(229) 评论(0) 推荐(0) 编辑
摘要:参考: "Flex 布局教程:实例篇" 为了实现骰子的实例,先建一个骰子的模型 一、骰子的布局 1.一点(单项目) 骰子的一面,最多可以放置9个点。 上面代码中,div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目。如果有多个项目,就要添加多个span元素,以此类推 阅读全文
posted @ 2019-07-21 21:58 【唐】三三 阅读(212) 评论(0) 推荐(0) 编辑
摘要:![](https://img2018.cnblogs.com/blog/196558/201907/196558-20190712224658659-697365756.png) 阅读全文
posted @ 2019-07-12 22:47 【唐】三三 阅读(479) 评论(0) 推荐(0) 编辑
摘要:![](https://img2018.cnblogs.com/blog/196558/201907/196558-20190703234300787-1103620680.png) 阅读全文
posted @ 2019-07-03 23:43 【唐】三三 阅读(324) 评论(0) 推荐(0) 编辑
摘要:1 HTML 1.1 HTML5 HTML5 – 1.基础 HTML5 – 2.新元素 HTML5 – 3.加强版ol HTML5 – 4.canvas 1.2 Emmet HTML快速结构生成 Emmet Cheat Sheet(Sublime编辑) 2 CSS 2.1 CSS3 CSS3–1.c 阅读全文
posted @ 2019-07-02 22:31 【唐】三三 阅读(717) 评论(0) 推荐(0) 编辑
摘要:a 3.1 盒模型 3.1.1 盒子大小 width和height指定内容盒子。 通过 box-sizing属性改变计算盒子大小的方式。设置为 border-box,那么width和height会包含内边距和边框。这种方式更加直观。 例子:如果有3栏,不管添加内边距都不会破会原有的布局。 .grou 阅读全文
posted @ 2019-07-02 22:28 【唐】三三 阅读(528) 评论(0) 推荐(0) 编辑
摘要:1.绘制矩形 2.绘制圆形 3.绘制文字 4.保存文件 什么是 Canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。 你可以通过多种方法使用Canva绘制路径,盒、圆、字符以 阅读全文
posted @ 2015-07-31 23:18 【唐】三三 阅读(366) 评论(0) 推荐(0) 编辑
摘要:<ol> 标签定义了一个有序列表. 列表排序以数字来显示。 使用<li> 标签来定义列表选项。 提示和注释 提示: 如果需要无序列表,请使用 <ul> 标签。 提示:使用 CSS 来定义列表样式。 HTML5 中不支持。HTML 4.01 中不赞成使用。 规定列表呈现的效果比正常情况更小巧。 1 A 阅读全文
posted @ 2015-07-31 22:57 【唐】三三 阅读(213) 评论(0) 推荐(0) 编辑
摘要:figcaption 定义和用法 <figcaption> 标签定义 figure 元素的标题(caption)。 "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。 details 定义和用法 <details> 标签用于描述文档或文档某个部分的细节。 阅读全文
posted @ 2015-07-16 00:33 【唐】三三 阅读(246) 评论(0) 推荐(0) 编辑
摘要:新网页结构 1.<header> 定义了文档的头部区域 2.<nav>标签定义导航链接的部分。 3.<article>定义页面独立的内容区域。 4.<section>定义文档中的节(section、区段) 5.<aside>定义页面的侧边栏内容。 6.<footer>定义 section 或 doc 阅读全文
posted @ 2015-07-12 10:56 【唐】三三 阅读(331) 评论(0) 推荐(0) 编辑
摘要:1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案。所谓的响应式布局,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。也就说一个页面可以在多个终端呈现出你想要的效果 阅读全文
posted @ 2015-02-16 21:57 【唐】三三 阅读(604) 评论(0) 推荐(0) 编辑

more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示