前端
想做大佬的菜鸟李
你得加油
展开
-
常用模块命名
原创 2021-08-20 11:38:02 · 296 阅读 · 0 评论 -
CSS3的新特性
文章目录一、CSS3新增选择器1、属性选择器2、结构伪类选择器3、伪元素选择器(敲重点!!!)1、 伪元素清除浮动二、CSS3盒子模型border-box一、CSS3新增选择器1、属性选择器注意:类选择器、属性选择器、伪类选择器,权重为102、结构伪类选择器<style> ul li:first-child { background-color: green; } ul li:last-child{原创 2021-08-16 18:40:43 · 255 阅读 · 0 评论 -
HTML5的新特性
文章目录一、新增语义化标签二、新增多媒体视频1、视频标签2、音频标签三、新增input表单四、新增表单属性一、新增语义化标签二、新增多媒体视频1、视频标签语法:<video src="文件地址" controls="controls"></video>属性:2、音频标签语法: <audio src="文件地址"> controls="controls"</audio>属性:三、新增input表单验证的时候必须添加fo原创 2021-08-14 16:15:34 · 58 阅读 · 0 评论 -
CSS高级技巧-常见布局技巧
文章目录一、margin负值的应用二、文字围绕浮动元素三、行内块的巧妙运用四、css三角强化一、margin负值的应用1.让每个盒子margin往左侧移动-1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果煤油定位,则加相对定位(保留位置),如果有定位,则加z-index)二、文字围绕浮动元素 <style> *{ margin: 0; padding: 0; }原创 2021-08-13 18:10:27 · 304 阅读 · 0 评论 -
CSS高级技巧--溢出的文字省略号显示
文章目录一、单行文本溢出显示省略号二、多行文字溢出省略号显示一、单行文本溢出显示省略号满足三个条件:1.强制一行内显示文本white-space:nowrap;(默认normal自动换行)2.超出的部分隐藏overflow:hidden;3.文字用省略号替代超出的部分text-overflow:ellipsis;二、多行文字溢出省略号显示多行文本溢出显示省略号,有较大兼容性问题,适用于webKit浏览器或移动端overflow:hidden;text-overflo原创 2021-08-10 17:22:26 · 192 阅读 · 0 评论 -
CSS高级技巧---vertical-align属性应用
vertical-align的应用!!!一、实现图片、表单和文字对齐二、解决图片底部默认空白缝隙问题一、实现图片、表单和文字对齐图片、表单都属于行内块元素,默认的vertical是基线对齐vertical-align: baseline | top | middle | bottombaseline:默认,元素放置在父元素的基线上top:把元素的顶端与行中最高元素的顶端对齐middle:把此元素放置在父元素的中部bottom:把元素的顶端与行中最低的元素的顶端对齐二、解决图片底部默认原创 2021-08-10 16:21:49 · 166 阅读 · 0 评论 -
CSS高级技巧-CSS用户界面样式
一、更改用户的鼠标样式cursor:属性值属性值:二、表单轮廓1、默认去掉默认的蓝色边框outline:none;2、防止拖拽文本域resize:none;原创 2021-08-10 11:44:13 · 94 阅读 · 0 评论 -
CSS高级技巧-CSS三角
如图:div{ width: 0; height: 0; /* 为了兼容性 */ line-height: 0; font-size: 0; border: 10px solid transparent; border-left-color: wheat /* 自己想要的颜色*/;原创 2021-08-10 11:35:06 · 46 阅读 · 0 评论 -
CSS高级技巧-字体图标
字体图标一、使用场景二、优点三、字体图标的下载一、使用场景主要用于显示网页中通用、常用的一些小图标二、优点轻量级:一个图标字体要比一系列的图像要小,一旦字体被加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影、透明效果、旋转等兼容性:几乎支持所有浏览器注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升与优化三、字体图标的下载1、https://icomoon.io/2、https://www.iconfont.cn/原创 2021-08-10 10:49:16 · 133 阅读 · 0 评论 -
CSS高级技巧-精灵图
精灵图get!一、为什么需要精灵图二、精灵图(sprites)的使用1、核心一、为什么需要精灵图核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了二、精灵图(sprites)的使用1、核心主要针对背景图片使用,就是把多个小背景图片整合到一张大图片上,这个大图片也称为sprites精灵图或者雪碧图移动背景图片位置,此时也可以使用backg-position一般精灵图都是负值,x轴右边走是正值,左边走是负值,y轴同理...原创 2021-08-10 09:52:53 · 99 阅读 · 0 评论 -
元素的显示与隐藏
1、display显示隐藏display隐藏元素后,不再占有原来的位置display:none; 隐藏对象display:block;除了转换为块级元素之外,同时还有显示元素的意思2、visibility 显示隐藏visibility隐藏元素后,继续占有原来的位置visibilty:visible;元素可视visibility:hidden;元素隐藏3、overflow溢出显示隐藏overflow:visible不剪切内容也不添加滚动条overflow:hidden不显示超原创 2021-08-09 16:53:40 · 80 阅读 · 0 评论 -
前端学习-网页布局总结
一个完整的网页,是标准流、浮动、定位一起完成布局1、标准流可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局2、浮动可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局3、定位定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示,如果元素自由在某个盒子内移动就用定位布局...原创 2021-08-09 10:05:39 · 106 阅读 · 0 评论 -
前端学习-CSS定位
好好学定位!!!一、为什么需要定位二、定位组成1、定位模式1)静态定位static(了解)2)相对定位relative(重要哦!)3)绝对定位absolute(重要哦!)记得-----子绝父相~超级重要4)固定定位fixed(重要)2、边偏移一、为什么需要定位可以让盒子自由的在某个盒子内移动位置固定屏幕中某个位置,并且可以压住其他盒子二、定位组成1、定位模式决定元素的定位方式,通过CSS的position属性来设置。属性值:1)静态定位static(了解)默认定位方式,就是无定原创 2021-08-06 17:56:49 · 215 阅读 · 0 评论 -
前端学习-CSS属性书写顺序
要按顺序哦~原创 2021-08-02 16:45:30 · 50 阅读 · 0 评论 -
前端学习-PS切图
学习PS切图,前端必备!!!!1、常见图片格式-jpg-gif-png-PSDPS切图1-切图方式(1)图层切成(2)切片切图(3)PS插件切图1、常见图片格式-jpg-gif-png-PSDPS切图1-切图方式(1)图层切成(2)切片切图(3)PS插件切图需要下载Cutterman...原创 2021-08-02 15:49:13 · 299 阅读 · 0 评论 -
前端学习-清楚浮动总结
清除浮动目录1、为什么需要清除浮动2、清除浮动本质3、清除浮动(1)语法(2)属性值(3)策略(4)清除浮动方法1、额外标签法2、父级添加overflow3、:after伪元素4、双伪元素清除浮动目录1、为什么需要清除浮动由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响2、清除浮动本质本质就是清除浮动元素造成的影响如果父盒子本身有高度,则不需要清除浮动原创 2021-08-02 10:58:59 · 278 阅读 · 0 评论 -
前端学习-浮动布局注意
1、浮动和标准流的父盒子搭配先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置2、一个元素浮动了,理论上其余的兄弟元素也要浮动浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流...原创 2021-07-31 21:03:03 · 95 阅读 · 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"> <title&原创 2021-07-31 20:44:34 · 99 阅读 · 0 评论 -
前端学习-浮动
1、为什么需要浮动1.有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式2.浮动最典型的应用:可以让多个块级元素一行内排列显示。3.网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。2、什么是浮动1.float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘及包含块或另一个浮动框的边缘2.语法:选择器{ float:属性值;}3.属性值3、浮动特性1.浮动元素会脱离标准流(1)脱离标准普通原创 2021-07-31 19:20:45 · 209 阅读 · 0 评论 -
前端学习之圆角边框、盒子阴影、文字阴影
1、 圆角边框2、盒子阴影文字阴影原创 2021-07-30 16:59:09 · 95 阅读 · 0 评论 -
前端学习-CSS三大特性
原创 2021-07-27 18:44:29 · 58 阅读 · 0 评论 -
前端学习-CSS2
CSS背景CSS复合选择器CSS元素显示模式Emmet语法原创 2021-07-27 17:18:44 · 56 阅读 · 0 评论 -
前端学习-单行文字垂直居中
让文字的行高等于盒子的高度height = line-height效果如图:原创 2021-07-24 20:35:18 · 56 阅读 · 0 评论 -
前端学习之-CSS1
1、CSS简介2、CSS基础选择器3、CSS字体属性4、CSS文本属性5、CSS引入方式原创 2021-07-24 15:42:04 · 66 阅读 · 0 评论 -
初学前端_HTML标签(下)
表格标签列表标签表单表签表单组成1- 表单域2-表单控件1. input输入表单元素2. select下拉表单元素3. 文本域表单元素原创 2021-07-18 15:10:40 · 67 阅读 · 0 评论 -
初学前端_HTML标签
HTML语法规范HTML基本结构标签开发工具HTML常用标签HTML中的注释和特殊字符原创 2021-07-16 19:44:41 · 170 阅读 · 1 评论 -
初学前端_HTML简介
1-HTML简介1. 网页网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合。网页是网站中的一“页”,通常是HTML格式的文件,它要通过浏览器来阅读。网页是构成网站的基本元素,它通常由图片、链接、文字、声着、视频等元素组成。通常我们看到的网页,常见以.htm 或.html后缀结尾的文件,因此将其俗称为HTML文件。总结:2. 浏览器常用浏览器国际通用:浏览器内核3.web标准Web标准是由W3C组织和其他标准化组织制定的一系列标准的集原创 2021-07-16 10:10:50 · 141 阅读 · 0 评论