html+css
文章平均质量分 64
前端
等待的L先生
自律
展开
-
css之图形大全 菱形 心形 五角星 太极 三角形...
css之图形大全因为需要,所以整理出了一份全css的图形大全,供大家一起学习;圆形:#circle { width: 100px; height: 100px; background: red; border-radius: 50% }椭圆形:#oval { width: 200px; height: 100px; background: red; /* border-radius: 10原创 2020-12-24 11:53:06 · 1123 阅读 · 0 评论 -
IFE页面结构语义化
IFE页面结构语义化目的:1.更好的可读性2.更易修改,维护3.搜索引擎友好,SEO优化H5新增语义化标签:-section 元素 ,表示页面中的一个区块;-article元素,表示一块与上下文无关的独立内容;-aside元素,在article之外的,与article内容相关的辅助信息;-header元素,表示页面中的一个内容区块或整个页面的标题;-footer元素,表示页面中的一个内容区块或整个页面的脚注-nav元素,表示页面中导航链接部分;-figure元素,表示一段独立的内容原创 2020-12-23 18:47:08 · 264 阅读 · 0 评论 -
关于第一个子元素margin-top值传递给父元素的问题
关于第一个子元素margin-top值传递给父元素的问题解决办法: 1.给父元素设置一个边框, 2.父元素使用padding; 3.父元素使用overflow:hidden 4.父元素使用浮动 5.对于子元素添加float 6.还有一种就是在子元素前面在添加一个块元素,高度设置很小也是可以解决的;注: 其实解决这个办法虽然多,但是好用的就是给父元素overflow,border,和第六点给子元素钱添加一个块元素,是影响最小的 ;...原创 2020-12-14 10:54:18 · 300 阅读 · 0 评论 -
css3中的transition的应用案例一
css3中的transition的应用案例一代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>traansform的图片移动的案例</title>原创 2020-12-10 20:47:14 · 459 阅读 · 0 评论 -
倒影(-webkit-box-reflect)
倒影(-webkit-box-reflect)通过html5的-webkit-box-reflect来做倒影,代码如下:box-reflect属性值有:dirrection-方向:above向上,below向下,left向左,right向右。offset距离:可以是数值,也可以是百分比:mask-box-image设置倒影的遮罩图像:(1)url(2)linear-gradient线性渐变创建遮罩图像。(3)repeating-linear-gradient重复线性渐变创建遮罩图像。(4)repe转载 2020-12-09 22:52:25 · 263 阅读 · 0 评论 -
css3中的animation的动画帧制作-卡通人物的走动效果
css3中的animation的动画帧制作-卡通人物的走动效果代码如下;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>animation动画帧</title>原创 2020-12-09 17:06:15 · 769 阅读 · 0 评论 -
css3之rotate的折扇的制作
css3之rotate的折扇的制作代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2020-12-08 17:37:21 · 143 阅读 · 0 评论 -
css3之导航transition图标的变化
css3之导航transition图标的变化原理:用了两个图片,一个有颜色,一个没有,都放在精灵图中。再用position定位,和transition变化。代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-12-08 17:14:16 · 173 阅读 · 0 评论 -
html中用css隐藏滚动条的操作
html中用css隐藏滚动条的操作有时候我们写网页的时候可能需要用到把窗口的滚动条影藏起来,特别是在移动端的时候,就会经常用到;在pc端就很简单了:目测谷歌浏览器,ie高版本浏览器都有效:::-webkit-scrollbar{width:0;height:0;}移动端只需要加上:html,body{height:100%;overflow:scroll;}就可以了!如下图所示:...原创 2020-12-07 20:26:53 · 107 阅读 · 0 评论 -
css3中的旋转筛子的制作二
**注:把筛子拼成一个的原理就是运了position原理,在筛子面的外面来个父元素,给其定位相对定位,在把每面筛子都旋转好方位,移动,之后通过给每面筛子面添加绝对定位,使其拼接成一个完整的筛子;**原创 2020-12-05 14:10:19 · 311 阅读 · 0 评论 -
网页响应式布局的应用
响应式布局的应用 主要用到了media,css中的媒体查询的功能,实现了网页中的内容可以根据不同设备,不同的分辨率来实现不同的布局;从而在pc和移动端都可以完整的展现; 效果如图: 1200+的分辨率:1000-1200的分辨率:600-1000的分辨率:600-分辨率:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m原创 2020-12-04 11:47:34 · 169 阅读 · 0 评论 -
css中的弹性盒筛子的制作
css中的弹性盒筛子的制作运用简单的flex的基本属性,做成六个筛子的面;后面还有动态的筛子;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css中的弹性盒筛子的原创 2020-12-03 23:26:26 · 631 阅读 · 0 评论 -
移动端上下导航布局二: 弹性盒
移动端上下导航布局二: 弹性盒第二种就可以用flex弹性盒来写:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端上下导航布局二: 弹性盒</title&g原创 2020-12-03 23:03:13 · 122 阅读 · 0 评论 -
移动端上下导航布局一:position
移动端上下导航布局一:position如图:我们移动端,有上下两个,固定的栏目,中间是内容;可以用position定位来完成;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2020-12-03 23:00:46 · 246 阅读 · 0 评论 -
css旋转风车的制作一
css旋转风车的制作一 旋转效果其实很简单就是个transform;animation动画。 效果如图:主要是这个风筝的制作,运用到了border边框的原理;假如给一个没有宽高的div盒子各个方向设置了不同颜色的border,就会出现以下图的情况:注意:以上的风车就是用到了这个原理,值得一提的是,元素的边框是随着物体各个不同边框而自由填充的;假如一个长和宽都是100px的盒子,设置其四个方向的边框,就会出现以下这种情况。可以看到每个方向的边框都是梯形;但是,假如你只设置左边的边框和原创 2020-12-02 21:17:26 · 1258 阅读 · 0 评论 -
伪类选择器表格的制作二
伪类选择器表格的制作二如图所示: 代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪类选择器表格的制作</title> <style&原创 2020-12-01 22:48:32 · 160 阅读 · 0 评论 -
伪类选择符,target的一些用法
伪类选择符,target的一些用法target一般与锚点一起使用。语法:E:target { sRules }说明:匹配相关URL指向的E元素。下面我做了一个例子,达到了为类似手风琴的效果; 如图·所示:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=原创 2020-12-01 15:07:52 · 452 阅读 · 0 评论 -
css中的一些居中的方法
css中的一些居中的方法 1.字体垂直居中:text-align:center;line-heigght:高度值;1,行间距 2.字体垂直居中3.去掉本身的行间距2.图片,行内块元素,块元素垂直居中:margin,或者padding3.图片,行内块元素,块元素垂直居中:vertical-align:middle注意:需要参照物;并且两个都要设置verticla-align:center;和display:inline-block;4.图片,行内块元素,块元素垂直居中:运用pos原创 2020-11-28 14:56:17 · 144 阅读 · 0 评论 -
几类简单表格模型的制作
几类简单表格模型代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>几类简单表格模型</title></head><style>原创 2020-11-27 17:58:04 · 391 阅读 · 0 评论 -
静态的表格的制作一
静态的表格的制作一废话不多说,直接进上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单的制作练习一</title> <style>原创 2020-11-27 13:10:21 · 189 阅读 · 0 评论 -
vscode写的html页面在手机端实现预览
vscode写的html页面在手机端实现预览做了一个响应式网页,需要在手机端查看浏览,所以在电脑上找了很久的资料,对于这个问题,但是都不是很详细,虽然最后终于解决了这个问题,实现了手机端浏览。但是我还是想把这个问题详细的步骤说出来,以便能给一些刚接触的和不会的小白一些方便。1: 安装live server 插件要想在移动端调试,首先得本地起一个服务,这时候就用到了live server 插件。具体下载方法:在vscode 中搜索下载,如图所示:搜索出来,点击安装即可,我这里已经安装好了。安原创 2020-11-26 21:20:27 · 9992 阅读 · 1 评论 -
网页二级菜单栏的几种做法
网页二级菜单栏的第一种做法,纯css第一种:纯css的写法:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>二级菜单的第一种做方法</title> <s原创 2020-11-25 21:26:48 · 8127 阅读 · 2 评论 -
多行文本溢出问题的解决
多行文本溢出问题的解决我们都知道单行文本的溢出问题的解决办法,就是: 1.使用宽度with,来限制宽度 2. 使用white-space:nowrap/pre来强制限制换行; 3. 使用overflow:hidden隐藏溢出文本; 4. 使用text-flow:ellipsis来用...来表示隐藏的文本那么多行呢?有以下几种方法:1. 使用css3自带的属性-webkit-box来改变,具体方式:代码示例:/*css代码:*/ ove原创 2020-11-25 19:14:45 · 2190 阅读 · 0 评论 -
css3中的point-events的用法说明
css3中的point-events的用法说明语法:point-events:auto/none/visiblepainted/visiblestroke/visible/painted/fill/stroke/all默认值为auto;主要的作用就是鼠标的事件对你想要的事件无效化;如下图所示,第一个是正常的超链接,可以点击进入下个页面,而第二个用到了point-events,使鼠标的事件效果无效化。图片效果:代码如下:<!DOCTYPE html><html lang="e原创 2020-11-19 18:40:53 · 5713 阅读 · 0 评论 -
css中的text-shadow的用法
css中的text-shadow的用法作用:用来设置或者检索对象中文本的文字是否有阴影及模糊效果;具体的效果:用法:text-shadow:{length,length,length,color}默认值为:nonelength:第一个代表阴影的水平偏移量,可以为负值;length:第二个代表阴影的垂直偏移量,可以为负值;length:如果设置了这个值就代表了阴影的模糊值,不能为负数;color:阴影值的颜色;案例:<!DOCTYPE html><html lang原创 2020-11-19 14:42:27 · 657 阅读 · 0 评论 -
简单的网页表格的制作4
简单的网页表格的制作4图片示例:实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>静态网页的表格制作4</title> <style typ原创 2020-11-18 13:53:40 · 521 阅读 · 0 评论 -
**静态网页的表格的制作3**
静态网页的表格的制作3图片示例:代码详情:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title网页表格的制作3</title> <style type="tex原创 2020-11-18 09:15:50 · 370 阅读 · 2 评论 -
**静态的网页表格制作2**
静态的网页表格制作2图片示例:代码详情:```html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格训练第二个内容</title> <st原创 2020-11-17 22:22:27 · 170 阅读 · 0 评论 -
静态网页表格的制作1
静态网页表格的制作1*代码:html+css:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格训练第二个内容</title> <style typ原创 2020-11-17 21:59:10 · 1021 阅读 · 0 评论