HTML+CSS
文章平均质量分 75
前端html+css
Antgeek
喜欢各种技术,前端后端大数据均有涉猎,目前从事大数据开发.
展开
-
公共课-Less
less是一门css预处理语言,它扩展了css语言,增加了变量,混合,函数等特性一、本地less的使用第一步:创建less文件第二步:编译less文件 lessc style.less style.css1、变量的使用@变量名称: 值;div{ 属性:@变量名称;}二、浏览器环境下使用第一步:引入less.css文件<link rel="stylesheet/less" href="css/style.less">第二步:引入less.js文件<scr原创 2021-04-26 18:29:55 · 65 阅读 · 0 评论 -
公共课-viewport和响应式布局
文章目录一、viewport二、响应式布局1、12列布局2、媒体查询一、viewport响应式布局:根据不同的设备展示不一样的效果viewport:视口<meta name="viewport" content="width=device-width,initial-scale=1.0"width=device-width 代表了宽度等于设备宽度,初始化伸缩为1.0二、响应式布局响应式布局一般都用百分比1、12列布局将页面分成12列,每一列宽度8.33% .col-1 {原创 2021-04-19 19:22:41 · 134 阅读 · 0 评论 -
公共课-弹性盒子布局
文章目录一、容器的属性1、子元素的排列方向2、子元素换行3、子元素水平分布4、子元素垂直分布注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。一、容器的属性第一步:设置父元素为弹性容器:display:flex;当子元素的宽度和大于父元素时,回自动调整宽度,不会超出父元素1、子元素的排列方向默认水平从左到右,属性row属性:flex-direction属性值:row:水平从左到右row-reverse:水平从右到左column:从上到原创 2021-04-17 14:52:50 · 128 阅读 · 0 评论 -
公共课-css3转换和动画
文章目录一、转换1、分类2、转换的属性3、层叠属性:z-index:x;4、旋转5、平移6、缩放和拉伸7、扭曲二、动画1、动画的设置(1)动画名称(2)动画的周期(3)动画的延迟(4)动画的速度曲线(5)动画的次数(6)综合设置(7)动画暂停2、动画的创建(1)from,to(2)百分比一、转换1、分类旋转平移缩放和拉伸扭曲2、转换的属性transform3、层叠属性:z-index:x;这个一定要配合定位使用4、旋转transform:rotate(度数);度数:30deg,旋转原创 2021-04-17 13:16:33 · 90 阅读 · 0 评论 -
公共课-css3渐变、背景、过度、分页
文章目录一、css3渐变1、线性渐变2、径向渐变二、css3背景1、background-origin(背景图)2、background-clip(背景色)三、css3过渡1、需要过度的属性:2、过度时间:3、过度延时:4、过度的时间曲线5、综合设置:四、兼容浏览器五、分页一、css3渐变渐变(gradient):两个及以上颜色之间的平稳过度分类:线性渐变,径向渐变1、线性渐变属性:background-image: linear-gradient(hsl(360,100%,50%),hsl(24原创 2021-04-17 08:47:29 · 226 阅读 · 0 评论 -
公共课-css3选择器、边框、文本、按钮
文章目录一、css3新增的选择器1、属性选择器2、伪元素选择器3、伪类选择器二、css3新增的颜色表示法1、HSL(色调,饱和度,明度)2、HSLA(色调,饱和度,明度,透明度)三、css文本效果1、文本阴影2、overflow的其他属性值四、盒子效果1、盒子阴影2、怪异盒模型3、边框图片4、三角形五、按钮样式**1、按钮禁用**一、css3新增的选择器css选择器:1、基础选择器2、复合选择器3、伪类选择器css3选择器:1、属性选择器2、伪类选择器3、伪元素选择器自定义属性:开发者自原创 2021-04-15 18:21:11 · 134 阅读 · 0 评论 -
公共课-字体图标
文章目录1、Unicode使用字体图标2、类名法3、symbol引入字体法1、Unicode使用字体图标(1)引入生成的iconfont.css文件(2)挑选相应的编码并引入<span class="iconfont"></span>例子:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http原创 2021-04-10 16:31:30 · 167 阅读 · 0 评论 -
公共课-css精灵图
文章目录1、html的坐标系2、精灵图例子为什么要使用精灵图:为了减少服务器的压力,提高加载速度精灵图(雪碧图):css sprite,将多个图片拼接在一张图片上,通过背景的方向属性选择合适的位置即可1、html的坐标系2、精灵图例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co原创 2021-04-10 16:28:09 · 81 阅读 · 0 评论 -
公共课-版心与布局流程
文章目录1、版心2、布局流程(1)一列固定宽度且居中(2)两列左窄右型(3)通栏平均分布型1、版心版心:是指网页中主体内容所在的区域一般尺寸为: 960 980 1000 1200 11902、布局流程由外到内,由大到小(1)一列固定宽度且居中<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <title>一列固定宽度且居中</原创 2021-04-10 16:26:35 · 390 阅读 · 0 评论 -
公共课-高级技巧
文章目录一、元素的显示于隐藏二、鼠标样式三、轮廓四、防止多行文本框拖拽五、文本内容或者行内元素相对于同一行内块元素垂直居中六、如何清除行内块元素默认的间距七、两个相邻行内块元素,一个设置了外边距另外一个受影响的解决办法八、强制文本在同一行显示九、溢出的文本隐藏十、设置字间距一、元素的显示于隐藏1、display:none;特点:(1)没有删除结构,只是通过css样式隐藏了元素(2)不占位置元素的显示display:block;2、visibility:hidden;特点:(1)没有删除结原创 2021-04-10 16:25:55 · 73 阅读 · 0 评论 -
公共课-定位
文章目录一、静态定位二、相对定位三、绝对定位四、固定定位定位:就是把元素固定在一个位置上定位分类:静态定位,相对定位,绝对定位,固定定位定位属性:position边偏移量:left:距离左侧的距离right:距离右侧的距离top:距离上边的距离bottom:距离下边的距离定位需要考虑的问题1、相对于谁定位2、是否可以使用边偏移量3、是否脱离标准流4、是否占位置5、是否受父元素影响一、静态定位标准流布局position:static;边偏移量没有效果二、相对定位posi原创 2021-04-10 16:25:09 · 72 阅读 · 0 评论 -
公共课-浮动
文章目录一、浮动二、清除浮动一、浮动标准流:元素按照自己的特性排列布局浮动:元素脱离标准流,飘浮在其他元素之上1、浮动属性:float属性值:left,right2、浮动的分类:左浮动,右浮动3、浮动的特点:(1)浮动后的元素会漂浮在其他元素上面(2)浮动后的元素不占位置(3)同时浮动的元素在同一行上显示(4)浮动后的元素不会超出父元素的范围(5)浮动后的元素不会超出父元素内边距和边框的范围(6)浮动后的元素会自动显示为行内块元素的特点二、清除浮动1、height是不能继承的原创 2021-04-10 16:21:31 · 189 阅读 · 0 评论 -
公共课-css三大特性及盒模型
文章目录一、css三大特性一、层叠性二、继承性三、优先级(权重性)二、盒模型一、边框 border二、内边距 padding三、外边距 margin四、居中一、css三大特性一、层叠性以最后设置的样式为准,长江后浪退前浪,后浪死在沙滩上,就近原则二、继承性子元素会继承父元素的样式子(后代)承父(祖先)业height是不能继承的三、优先级(权重性)1、通配符选择器<标签选择器<类名选择器<id选择器<style<!important(在同一个元素里比较)2、元原创 2021-04-07 09:05:14 · 169 阅读 · 0 评论 -
公共课-css样式表、字体、选择器、背景
文章目录一、css样式表二、css字体的一些属性一、字体属性二、外观属性三、css选择器与标签的分类一、基础选择器二、复合选择器三、伪类选择器四、补充五、标签显示模式1、块状元素2、行内元素3、行内块元素4、显示模式之间的转换四、CSS背景五、css书写规范六、css书写规范一、css样式表css:Cacding Style Sheets 层级式样式表1、行内样式表(内联样式表) 特点: 1、只能适用于单个元素 2、没有实现结构与样式的分离 写法:<div style=原创 2021-04-01 15:46:35 · 203 阅读 · 0 评论 -
公共课-HTML基础
文章目录一、五大浏览器及其内核二、web标准三、HTML骨架四、HTML标签五、表格六、表单七、H5新增的语义化标签八、H5新增的表单标签九、H5新增的视频和音频标签一、五大浏览器及其内核谷歌:blink火狐:GeckoIE:Tridentsafari:webkitopera:presto转webkit二、web标准不是单个标准,是一个集合,包含了结构标准,表现标准,行为标准结构标准:html表现标准:css标准行为标准:js标准作用:1、程序员的角度:开发了一套代码,节省了时间与原创 2021-04-01 15:43:17 · 135 阅读 · 0 评论