html
周百万.
生于华夏,吾辈当自强!
展开
-
Jquery版轮播图超详细
主要功能介绍:鼠标移动到轮播图中显示左右按钮,轮播图片的定时器停止鼠标移出轮播图隐藏左右按钮,轮播图片的定时器开始动态创建下面的小圆点无缝滚动效果点击左右按钮能切换图片,点击小圆点也能切换到对应的图片中,定时器切换图片使用时间阀,只有点击左右按钮图片运动完成之后,点击左右按钮才能再次滚动,防止点击左右按钮次数过多,图片滚动过快的情况原创 2022-09-15 00:01:52 · 3474 阅读 · 0 评论 -
阴影:box-shodow 每个属性使用与分析
综合写法: box-shadow:h-shadow v-shadow blur spread color outset;h-shadow:表示水平阴影的位置,可以为负值,正值向右(必选属性)v-shadow:表示垂直阴影的位置,可以为负值,正值向下(必选属性)blur:阴影模糊半径,属性值为0,一点也不模糊(可选属性)spread:阴影扩展半径,属性值越大,扩展的半径越大,不能为负值(可选属性)color:阴影颜色(可选属性)原创 2022-09-07 09:00:00 · 5446 阅读 · 1 评论 -
移动端携程网首页flex布局完整制做(详细代码版)含footer部分
主要思路:1、让盒子的高度固定,只让他们的宽度随着屏幕的大小而变化!2、search-index 父盒子固定定位,固定定位的盒子必须有宽度,所以让他的宽度为100%3、固定定位的盒子,是以屏幕为准的,所以body中的margin:0 auto;对他不管用4、因此他使用left:50%;(让他的最左边移动到屏幕的一半位置),再使用transform:translateX(-50%) (这里的50%是以当前移动的盒子为准的),就是让这个盒子再往左移动盒子本身一半的长度原创 2022-09-06 21:37:10 · 2156 阅读 · 1 评论 -
关于 a (链接)标签 里面包含图片会被撑大的解决方法、a标签会撑大的解决方法
用一个a标签里面包含img图片,这事再平常不过的布局方式,然而a标签突然莫名其妙的被撑大,a会莫名其妙有一个大小,给a 设置margin:0;padding:0; 都不管用,研究了很久才最终解决。原创 2022-09-06 17:02:23 · 1619 阅读 · 1 评论 -
基础选择器汇总——标签选择器,类选择器、id选择器、通配符选择器
标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中标签指定统一的 CSS 样式。在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)其中权重不能直接说成 1、10、100这样,但可以这样理解,这样理解更方便!如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。复合选择器和属性选择器请参考我写的其他文章!原创 2022-09-05 11:52:24 · 5108 阅读 · 0 评论 -
jQuery购物车完整功能实现,全代码详解(有动态效果图)
jQuery购物车 实现购物车完整功能全代码详解(有gif动态效果图)原创 2022-07-25 00:23:07 · 8643 阅读 · 7 评论 -
手风琴效果
手风琴效果原创 2022-07-21 17:37:28 · 307 阅读 · 0 评论 -
图片突出显示案例html+css+jquery
图片突出显示案例html+css+jquery原创 2022-07-20 23:50:19 · 955 阅读 · 0 评论 -
会话存储sessionStorage与本地存储localStorage叙述与案例分析
会话存储sessionStorage与本地存储localStorage叙述与案例分析原创 2022-07-16 23:41:54 · 311 阅读 · 0 评论 -
javascript轮播图超详细
鼠标移动到轮播图中显示左右按钮,轮播图片的定时器停止鼠标移出轮播图隐藏左右按钮,轮播图片的定时器开始动态创建下面的小圆点无缝滚动效果点击左右按钮能切换图片,点击小圆点也能切换到对应的图片中,定时器切换图片使用时间阀,只有点击左右按钮图片运动完成之后,点击左右按钮才能再次滚动,防止点击左右按钮次数过多,图片滚动过快的情况...原创 2022-07-06 16:13:53 · 15613 阅读 · 10 评论 -
仿京东放大镜效果(pink老师版)
跟着pink老师学的,根据pink老师的代码敲,顺便改良了一下他的一个小bug原创 2022-07-01 00:18:54 · 1201 阅读 · 0 评论 -
WEB期末大作业——我的家乡济南,免费HTML项目练习
目录编辑一、首先创建base.css文件夹,对总体设置css样式 二、首页的HTML代码的书写,大伙自个看吧,我也不多说啥了。三、创建common.css文件夹,对nav,shortcat,footer部分的css样式进行书写,因为所有的页面都得用,不直接复制,用的时候直接link引入即可 四、创建index.css文件夹,对index首页布局设置,大伙还是自个看五、index文件的倒计时效果的js代码六、轮播图...原创 2022-06-29 11:00:03 · 1203 阅读 · 1 评论 -
javaScript中倒计时效果(详细步骤版)
总代码(赶时间直接复制即可):详细步骤(想学会的请看此处):1、先创建三个盒子 2、给盒子用css写一下他的属性,定义它的宽高,以及颜色,效果如下图所示! 3、获取三个盒子对象......原创 2022-06-25 22:36:34 · 761 阅读 · 0 评论 -
javascript 利用排他思想创作点击按钮显示颜色
代码不难主要是利用排他思想:排除其他的元素的干扰这是没利用排他思想,直接获取元素,注册事件,让他点击后获得背景颜色的改变但是无法使盒子点击一次只显示一个,所以下面使用for循环来给盒子进行排他思想的设置<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button&g..原创 2022-05-08 17:01:19 · 764 阅读 · 1 评论 -
javascript 显示隐藏密码案例
效果图:这是显示密码,有个睁开的小眼睛这是密码框,有个不让观看的小眼睛核心思路:绑定小眼睛的img和input点击img时,有点击触发事件,让密码框变成文本框,图片换成睁开的眼睛再次点击img时,又有点击触发事件,文本框让变成密码框,图片换成闭上的眼睛 <style> * { padding: 0; margin: 0; } ...原创 2022-05-06 08:56:21 · 499 阅读 · 0 评论 -
修改版ATM小型项目
费话不多说,直接上代码!var money = 100; while (num != 4) { var num = prompt('请输入你想进行的操作:\n1、存钱 \n2、取钱\n3、显示金额\n4、退出'); switch (num) { case '1': var saveMoney = prompt('请输入你存钱的金额:');原创 2022-04-17 08:00:00 · 172 阅读 · 2 评论 -
break,continue,return的区别
break:结束当前的循环体(for,while);continue:跳出当前循环,继续以后的循环(for,while);return:不仅可以跳出循环,还可以返回return语句中的值,同时还能结束循环体,不再执行下面的代码(只能在函数中使用);1、break的使用首先:就如他的含义一样他是结束的意思。就是直接结束整个循环;在代码中写了一个for循环,里面遍历了一下1~10的整数并输出,但是如果 i 的值等于3,就break,可以在输出结果中明显看到,break后整个循环就已经..原创 2022-04-16 15:57:46 · 247 阅读 · 0 评论 -
简易ATM项目(switch case)
主要运用了,switch case 循环语句,用户输入那个数,就进行 var money = 100; var num = prompt('请输入你想进行的操作:\n1、存钱 \n2、取钱\n3、显示金额\n4、退出'); switch (num) { case '1': var saveMoney = prompt('请输入你存钱的金额:'); money += saveMo.原创 2022-04-11 23:15:52 · 555 阅读 · 1 评论 -
Javascript 利用for循环制作多种星星模型
使用javascript制作星星模型的主要工具就是for循环语句!使用一个for循环语句可以生成一维的星星样式!使用两个for循环语句可以制作二维星星样式!(可直接往后面看)首先先看一维星星样式!实例1:打印五颗横向排列的星星。 // 打印五颗星星 var str = ''; for (var i = 1; i <= 5; i++) { str = str + '★'; }原创 2022-04-08 00:11:02 · 4858 阅读 · 3 评论 -
Javascript ++a 和 a++ 的联系与区别
前加 :++a后加:a++联系:当单独加的时候结果是一样的。区别:a++ 先返回原值 再加一 |||||| ++a 先加一 再返回原值但使用后加的概率大一点 前加和后加在单独使用的时候结果是相同的! var num = 1; //前加 num++; console.log(num); //后加 ++num; console.log(num)...原创 2022-04-04 22:05:44 · 1217 阅读 · 0 评论 -
解决 col-*-offset-n 不能正常移动的问题
在bootstrap中4.0以下版本!col-sm-offset-3:实质是 margin-left如果你之前给div 盒子设置 margin:0 ; 那么offset 属性将不会起作用。4.0以上版本!根据官方文档用 offset-sm-3 不用再写col- 前缀了。4.0以下版本实验:如果加 margin:0; 就不会产生任何反应! <style> * { padding: 0; ...原创 2022-03-30 23:05:57 · 588 阅读 · 1 评论 -
flex-direction设置主轴的方向
flex-direction:row:从左到右(默认属性)flex-direction:row-reverse;注意盒子中的数字!盒子第一个在右边开始排!flex-direction:column;flex-direction:column-reverse;注意盒子中的文字!盒子第一个在下边开始排!...原创 2022-03-20 22:00:05 · 351 阅读 · 0 评论 -
两面翻转的盒子(解决转后不显示问题)
如图所示:鼠标一碰到盒子,盒子就会翻转!重点来了,很多小伙伴会发现盒子转动后不显示后面的盒子:需要在".front" 标签上加backface-visibility: hidden;加上这行代码就可以啦!代码如下: <style> .box { position: relative; margin: 100px auto; width: 300px; heig..原创 2022-03-10 19:26:16 · 1207 阅读 · 2 评论 -
label标签
label标签是行内元素,使用时需要加display:inline-block;使用时和input标签一起使用<label for="name"></label> <input id="name"></input>原创 2022-03-02 23:18:24 · 265 阅读 · 0 评论 -
怎样用html写出三角形
1、先写一个盒子2、让宽度和高度为03、给出一个border值,border:10px solid transparent ;4、想要那个方向的三角形,就给出哪个方向的颜色如图所示:border-top-coloor:blue;上面的三角形就是蓝色!border-left-coloor:red;上面的三角形就是红色!......注意:如图所示正方形的边长为20px 但是所写的border 值为10px 根据此来做出想要的三角形即可!代码如下:<st原创 2022-03-01 12:36:36 · 5462 阅读 · 0 评论 -
外边距的合并问题
在代码的编辑中,常常会遇到下面的问题1、相邻块元素的垂直外边距合并原因:上面的盒子有下边距margin-bottom 下面的盒子有上边距 但是他不会取两外边距之和,而是最大的那个外边距!解决方法:尽量只给一个盒子添加margin值。2、嵌套块元素的垂直外边距塌陷原因:两个嵌套关系的盒子(父子级关系),大盒子有上外边距,小盒子也有上外边距,不会取两外边距之和,而是去两个外边距之中最大的那一个。解决方法:a:可以为父元素定义上边框b:可...原创 2022-02-26 20:30:01 · 372 阅读 · 0 评论 -
为什么给链接a加边框加不上
我们在日常敲代码中经常会遇到给链接a加边框加不上的情况!按道理说是没有问题的,但为什么会加不上呢!我也是在网上研究了好久才明白的。在实际网页开发中,我们不是直接给一个图片的,而是给这个图片一个链接,用户一点击图片就可以链接到商品的目标地址。<a href="#"><img src="#" alt=""> </a>但是图片是一个块状盒子,如果直接给链接a设置边框,是行不通的。...原创 2022-02-26 20:06:19 · 1689 阅读 · 0 评论 -
PS切片为什么会切出很多不想切的东西呢?
解决方法很简单,因为默认是选中所有切片的,你只要选中“选中的切片”选择按钮即可!原创 2022-02-25 14:05:40 · 950 阅读 · 0 评论 -
如何用PS的切片工具切出想用的图片
1、首先应当打开ps2、选择第五栏中的切片工具3、用切片工具选出想要使用大小4、选择文件——>导出——>存储为web所用格式5、在下方红色处可选择格式,蓝色处的存储按钮可选择存储位置!6、点击完成即可!...原创 2022-02-25 13:50:26 · 2239 阅读 · 0 评论 -
结构伪类选择器的使用
1、 E:first-child 匹配父元素中的第一个子元素E这里的:ul li:first-child 指的是匹配父元素(ul)中的第一个子元素li。2、 E:last-child 匹配父元素中的第一个子元素E例:这里的:ul li:last-child 指的是匹配父元素(ul)中的最后一个子元素li。3、ul li:nth-child(2) 匹配父元素中的第二个子元素E(这里的“2”可按需求自行改动)。这里的:ul l...原创 2022-02-23 18:02:49 · 504 阅读 · 0 评论 -
html的代码书写顺序
html的代码书写顺序原创 2022-02-23 16:14:35 · 422 阅读 · 1 评论 -
HTML思维导图—表
表 表格 作用 展示、存储数据 组成 <table> <tr> <td> 表格属性 border: 边框 cellspacing: 单元格与单元格边框的间距 cellpadding: 单元格内容与单元格边框的间距 width: 宽度 height...原创 2022-01-11 17:58:46 · 509 阅读 · 0 评论 -
HTML骨架思维导图
原创 2022-01-11 16:38:29 · 135 阅读 · 0 评论 -
HTML简单又好用的几种颜色!
一、pink颜色永远的神!钢铁猛男的最爱!二、deeppink 直男最喜欢的color!三、skyblue 也是一个比较好拼的词当然也很好看!四、chocolate(巧克力) 小时候很爱吃的当然也很好看!五、firebrick(火砖色) 燃烧着的荷尔蒙!六、比较好记的颜色#eeeddd 我的最爱!七、#966666八、计较吉利的一个颜色 #888888九、小米官网用的背景颜色 #f5f5f5...原创 2021-08-09 21:49:58 · 4714 阅读 · 0 评论 -
小米盒子布局练习(html)
简单的小米页面布局,希望能帮助正在自学的你!效果图如上所示!代码入下!<head> <meta charset="UTF-8"> <title>小米盒子加强版</title> <style> .box { width: 1160px; height: 515px; margin: 10px auto; } .left { float:left; width: 300px; he..原创 2021-08-03 15:54:55 · 1027 阅读 · 0 评论 -
小米布局练习HTML
<title>小米布局三</title> <style> * { margin: 0; padding: 0; } /*大盒子*/ .box { width: 1534px; height: 769px; /*background-color: deeppink;*/ margin: 10px auto; } /*左边大盒子*/ .box .left { width: 294px; height:.原创 2021-08-03 15:18:28 · 261 阅读 · 0 评论 -
链接伪类选择器中link颜色调试不出来的情况(a:link)
今天我也是遇到了这种情况,link标签的颜色,怎么也调试不出来,经过找资料和不断地尝试终于找出来原因! 原因就是你已经打开你的网页,点击你的链接(打开过一次了),之后就是再怎么刷新,甚至关掉软件都是行不通的,只有修改一下链接地址才可以。如上代码用的是华为的网址,当你换成小米、京东网址后打开不再点击就是可以的。总结:打开新建的网页后不要点击就可以一直看得到,如果点击过,那就换一个新地址,保存重新打开就可以了。我叫小小白,希望能帮助到你哟! <title>链接伪类选择...原创 2021-07-21 17:01:30 · 1582 阅读 · 3 评论