![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 68
前端的基础学习
拾光漫漫 可否达
初学阶段,请多多指教,谢谢!
展开
-
2021-06-01太极图实现(定位+动画)
效果原理解说:利用一个大的盒子,利用border-radius:50%;设置为一个圆,在大的盒子里面放一个1号盒子(宽是大盒子一半,高度等同大盒子)在左边,利用border-radius左上和左下设值右上右下为0;右边在放一个2号盒子(宽是大盒子一半,高度等同大盒子)在右边,利用border-radius右上和右下设值左上左下为0。利用子绝父相原理,大盒子相对定位,3号盒子和4号盒子都利用绝对定位(宽高都为父盒子的一半),在3号盒子里面再放一个5号盒子,实现垂直水平居中。在4号盒子里面放5号盒子原创 2021-06-01 17:19:56 · 259 阅读 · 0 评论 -
切图+动画实现图形转换
实现效果代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-06-01 12:45:02 · 179 阅读 · 0 评论 -
旋转木马案例
旋转木马案例设计原理:采用子绝父相、动画、3D旋转的知识因为要做到旋转木马的效果:那么们可以利用到6张图片,这样每张图片平均60度,注意事项做到3D的立体效果,记得在父元素上加上透视子孩子作了旋转之后,记得在父盒子里保留立体空间要达到旋转木马的效果,必定要加上动画代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equi原创 2021-05-12 12:35:44 · 799 阅读 · 0 评论 -
3D 导航栏实现
3D导航栏的实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-05-11 23:00:08 · 829 阅读 · 0 评论 -
HTML标签的基础知识2
一、表格(1)表格属性(2)表格结构<table border="n" width=" " height=" " cellspacing=" " cellpadding=""><caption align="left | right |top |bottom" valign="top |bottom |middle |baseline">标题</caption><tr> <th>表头1</th> ......原创 2021-04-09 18:33:26 · 98 阅读 · 0 评论 -
HTML标签的基础知识1
标题标签1. 示例< h1 align=“对齐方式”>文本内容< /h1>… …< h# align=“对齐方式”>文本内容< /h#>2. 对齐方式left文字左对齐right文字右对齐center文字居中对齐文字斜体:< em>斜体内容< /em>下划线:< u>带下划线的文字< /u>删除线:< strike>带删除线的文字< /st原创 2021-04-08 15:43:15 · 198 阅读 · 0 评论 -
嵌套选择器基础重点
一、嵌套选择器它可能适用于选择器内部的选择器的样式。在下面的例子设置了三个样式:p{ }: 为所有 p 元素指定一个样式。.marked{ }: 为所有 class=“marked” 的元素指定一个样式。.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。二、css复合选择器的使用规则1. 注意:不要有空格 。有空格表示分别适用翻译 2021-04-07 23:23:21 · 1125 阅读 · 0 评论 -
CSS中外边距,内边距、尺寸、定位属性
一、margin(外边距)描述外边距属性值各自的含义属性二、内边距描述内边距属性值各自的含义属性三、Dimension(尺寸)描述:属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。属性四、Positioning(定位)1类型描述详细解说(1)clear示例指定段落的左侧或右侧不允许浮动的元素:p{ clear:both;}属性值(2)cursor描述:定义了鼠标指针放在一个元素边界范围内时所用的光标形状属性值翻译 2021-04-07 21:30:12 · 366 阅读 · 0 评论 -
CSS中的链接、列表、表格、盒子模型、边距属性
一、超链接链接的样式链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是:a:link - 正常,未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻注意a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面二、列表列表分类ul (无序列表 ) : 列表项标翻译 2021-04-07 20:27:28 · 196 阅读 · 0 评论 -
CSS背景、文本、字体的属性
一、背景属性一、背景属性详细解说(1) background描述:设置对象的背景例如:background: red url('smiley.gif') no-repeat fixed center;(2)background-attachment描述:设置背景图像是否固定或者随着页面的其余部分滚动例如:/*这个图片不会随着滚动而滚动*/ background-image:url('smiley.gif'); background-attachment:fixed;属翻译 2021-04-06 23:08:27 · 151 阅读 · 0 评论 -
CSS选择器(伪类)3
一、伪类(段落)选择器示例示例说明:first-of-typep:first-of-type选择的每个 p 元素是其父元素的第一个 p 素:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 元素:last-childp:las翻译 2021-04-06 19:05:43 · 246 阅读 · 0 评论 -
CSS选择器(伪类)2
一伪类(关于超链接)选择器示例示例说明:linka:link选择所有未访问链接:visiteda:visited选择所有访问过的链接:activea:active选择活动链接:hovera:hover选择鼠标在链接上面时:focusinput:focus选择具有焦点的输入元素注意::link 选择器设置了未访问过的页面链接样式,:visited 选择器设置访问过的页面链接的样式,:hover 选择器当有鼠标悬停在其上的链接样式。翻译 2021-04-06 17:18:11 · 96 阅读 · 0 评论 -
CSS选择器1
CSS选择器一选择器示例示例说明.class.intro选择所有class="intro"的元素#id#firstname选择所有id="firstname"的元素**选择所有元素elementp选择所有元素element,elementdiv,p选择所有元素和元素element elementdiv p选择元素内的所有元素(1)选择器示例示例说明.class.intro选择所有class=翻译 2021-04-05 23:39:54 · 125 阅读 · 0 评论