![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 62
NO0b
小白
展开
-
前端----CSS 父元素在子元素之上显示
今天做练习想让父元素在上覆盖子元素的边框,在网上查了些资料, 发现了一种办法能让父元素靠上显示,把子元素的z-index值设为负数 (position不能是默认值,z-index对定位属性生效) 但是这样有个弊端,我的练习是onmouseover事件,当鼠标悬停在该元素或子元素时生效,当我设置子元素的z-index值为负以后发现onmouseover事件对于其子元素不起作...原创 2018-09-25 22:19:47 · 2584 阅读 · 1 评论 -
前端——HTML+CSS前端元素定位问题技巧要点和琐碎的知识点
前端设计第一步先用div分割不同模块,设置不同的背景色加以区分,大致的调整大小和位置,div是通用的方便操作的容器,再按照一定的顺序实现每个div,此过程中不断调整各个div的本身细节(如颜色大小是否漂浮),相对位置,实现后去除div背景色调整整体色调、风格,最后检查细节作最后修改。position属性可能的值:值 描述 absolute 生成绝对定位的元素,相对于...原创 2018-09-19 13:39:09 · 1071 阅读 · 0 评论 -
前端——HTML5的基本元素和属性
HTML5保留的基本元素有如下几个:<!--...-->注释 <html>根元素,允许省略 <head>页面头部分,允许省略 <title>页面标题 <body>页面主体部分,可指定各种通用属性和事件属性 <h1>到<h6>标题从大到小 <p>段落 <br原创 2018-09-18 23:12:46 · 2343 阅读 · 0 评论 -
前端——HTML5简介与知识点总结
HTML5于2014年10月28号正式发布,全称为Hyper Markup Language(超文本标记语言)。从HTML 4.01、XHTML到HTML5不是革命性的升级,而是规范向习惯的妥协,HTML5增加了很多实用的新功能,将吸引开发者投入HTML5的怀抱。HTML5的优势:解决跨浏览器问题 部分替代了原来的JavaScript 更明确地语义支持 增强了Web应用程序的功能...原创 2018-09-18 22:38:18 · 1129 阅读 · 0 评论 -
前端----HTML/JS 鼠标停留和移开实例----鼠标指示时显示二级菜单(共三级)
onmouseover和onmouseout事件和各种position定位的练习,效果是鼠标指示一级菜单显示二级菜单, 指示二级菜单的选项出现相应三级菜单效果图: 一级菜单: 鼠标停留时的二级菜: 三级:有一个小技巧效果就是二级菜单出现时 , 一级菜单的右边框 消失,和二级菜单连起来 ,其实是二级菜单的大div下加了一个白块div, 调整pos...原创 2018-09-25 20:01:18 · 13967 阅读 · 1 评论 -
前端----GitHub登录页和首页制作
做了登陆页和登陆后的首页的静态样式效果, 没有加超链接,没点击效果,先上效果图:然后绿色的登陆按钮可以跳转首页(没做对账号密码的检查,空着也能跳转):主要为了练习布局, 练习CSS的一些样式, 图片图标全是网站截图下来的页面相对简洁, 文字居多, 以黑白灰为主加上圆角的灰色边框,感觉挺清新这个首页上边的渐变效果是一个背景效果:background-image:...原创 2018-10-07 13:57:59 · 1511 阅读 · 0 评论 -
前端----cookie的域:domain
cookie的域是用来限制哪些域名能来访问cookie的, 解决同一个主域下的访问问题domain是cookie的一个属性, 表示的是cookie所在的域,默认为请求的地址设置domain的格式如下:document.cookie = "username=nO0b; path=/; domain=baidu.com"这里的域名前可以不带点, 原因下边会介绍 作用域:规则是...原创 2018-10-14 15:26:47 · 6479 阅读 · 0 评论 -
CSS----z-index 属性详解
用途:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置,z 轴定义为垂直延伸到显示区的轴。注意:z-index 属性值可以是负的, 如果为正数,则离用户更近,为负数则表示离用户更远。z-index 仅能在定位元素上奏效(position:relative/absolute/fixed;)...原创 2018-10-14 20:37:24 · 2751 阅读 · 0 评论 -
z-index堆叠规则
一、z-indexz-index用来控制元素重叠时堆叠顺序。适用于:已经定位的元素(即position:relative/absolute/fixed)。一般理解就是数值越高越靠上,好像很简单,但是当z-index应用于复杂的HTML元素层次结构,其行为可能很难理解甚至不可预测。因为z-index的堆叠规则很复杂,下面一一道来。首先解释一个名词:stacking context...转载 2018-10-14 20:39:15 · 769 阅读 · 0 评论 -
js事件机制----捕获与冒泡
先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现,语法格式如下:element.addEventListener(event, function, useCapture)参数值参数 描述 event 必须。字符串,指定事件名。注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 提...原创 2018-10-14 22:29:40 · 972 阅读 · 0 评论 -
target、this、currentTarget区别
target、this、currentTarget三个关键词用在事件处理函数中,区别:target:触发事件的某个具体对象, 比如click事件就指的是实际点击的对象 currentTarget:绑定事件的对象,恒等于this,并不一定是实际触发者 通常情况下terget和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌...原创 2018-10-14 23:24:43 · 394 阅读 · 0 评论 -
前端----通过js给相同class的元素添加事件
写网页时我们可能一组元素增加一个相同的事件,比如下图的下拉菜单中每项都有一个鼠标悬停事件和鼠标悬出事件(onmouseover和onmouseout事件)不会的同学可以看看介绍这两个事件的一个小实例博客https://blog.csdn.net/q5706503/article/details/82843997效果很简单, 鼠标指到选项时背景色变成灰色,悬出时背景色再变白,...原创 2018-10-10 21:05:40 · 27403 阅读 · 3 评论 -
前端----addEventListener实现点击菜单外收起菜单功能
效果:点击按钮菜单出现: 点击菜单外则收起菜单:这里主要介绍怎么收起菜单, 打开菜单相信大家都会(给按钮添加单击事件) 点击菜单外收起菜单需要添加单击事件来控制菜单的display="none";达到隐藏效果但难就难在没有现成的事件判定点击发生在元素外我们需要用排除法控制,也就是监听所有的点击事件,...原创 2018-10-10 21:56:55 · 2147 阅读 · 0 评论 -
cookie简介
Cookie 是一些数据, 存储于你电脑上的文本文件中。当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。Cookie 的作用就是用于解决 "如何记录客户端的用户信息":当用户访问 web 页面时,他的名字可以记录在 cookie 中。 在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。Cookie 以名/值对形式存储,如下所...原创 2018-10-10 23:19:13 · 424 阅读 · 0 评论 -
JSON的遍历(js)
今天在做前后端交互的时候需要把一个json中的数组以表格(table)的形式输出然后就出现了标题的问题,怎么遍历JSON对象 ,经过痛苦的纠结之后发现json对象是可以像数组一样使用下标遍历的!只不过json对象使用key值作为下标遍历的, 并且作为下标的key值是字符串形式var j={"id":"1","name":"博通","age":"16","other原创 2018-10-17 20:40:25 · 899 阅读 · 0 评论 -
前端——HTML 5绘图元素canvas
<canvas.../>元素是HTML5新增的绘图元素,本身功能有限但是可以通过它获取一个CanvasRenderingContext2D对象,该对象是个强大的绘图API。控制该对象绘图需要使用Java Script。canvas就像一张画纸本身并没有什么功能,常用的属性就是height和width来设置画纸的宽和高,要想绘图需要三步:获取<canvas.../>元...原创 2018-09-19 23:49:52 · 2176 阅读 · 0 评论 -
前端----文字下方小三角的实现方法
效果如图:文字下有一个小三角,看起来美观小巧但是实现起来有点让人摸不到头脑,这里有两种方法实现,当然有人有更好的办法可以留言补充。 把块元素的长宽设为0再加下边线可以实现: 这种是常用的方法,网上很多,先用代码举个栗子: .div{ width: 0; height: 0; border: 10px solid transparent; ...原创 2018-09-21 10:28:52 · 3113 阅读 · 2 评论 -
前端----HTML 百度首页制作
效果图:用百度首页的制作对布局进行了简单的练习,存在一些缺陷,比如 底部的小图标懒得搞上去这个小警徽和小图标右上角的标题颜色没有细致修改登陆和设置的浅色没有设置 但是设置了form表单,点击百度一下button时会直接打开真实的百度搜索内容分析百度搜索url设置相应表单项https://www.baidu.com/s?wd=搜索内容&ok=提交...原创 2018-09-24 22:34:19 · 16104 阅读 · 3 评论 -
前端----HTML canvas元素 绘制简单 折线图
这次小练习只是简单实验canvas元素的使用,用到了路径的使用和填充,简单的moveTo lineTo的重复绘制直线,最后stroke填充<!DOCTYPE html><html><head> <title>折线图</title></head><body> <canva原创 2018-09-24 22:05:11 · 4364 阅读 · 0 评论 -
前端----HTML 拖动条的实现
拖动条的实现是HTML5 对input标签 type值的新增项(新增项还有很多,比如颜色选择器,日期选择器等)直接说怎么用:<input type="range" min="0" max="100" step="5"/>效果如下: 拖动条当然是可以拖动的, 拖动的过程中会改变该input的 value值而 min max step则设置了 最小值 最大值...原创 2018-09-24 21:50:18 · 13415 阅读 · 0 评论 -
前端----HTML 菜鸟教程网站首页制作
效果图:(实际内容是重复的,因为懒得去挨个搞图标,挨个写介绍,没有技术点) 缺陷很多, 比如底部栏没有做, 放缩效果不太好,文字有些会错位,原版的放缩时对应两套界面,菜鸟教程首页很适合练习布局,很简洁有结构,当然要做好还是很难的,看起来像不难,用起来体验好却很难做到,有大量的细节问题,还需要JS的加工附上源码,css和HTML是分开的,图片资源没上传 ,不方便,有需要的...原创 2018-09-24 20:41:40 · 1771 阅读 · 6 评论 -
前端----HTML 制作QQ空间练习
先上效果图:主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点...原创 2018-09-24 20:06:56 · 4952 阅读 · 11 评论 -
前端----HTML label基本用法和作用效果
<label.../>用于表单元素中定义标签进行说明,label并不生成请求参数所以不要给label指定value值问题来了,普通文本就能作为标签,为什么要用label标签呢?因为label还有一个额外的效果,点击该标签浏览器会自动把焦点转移到标签相关的表单控件上效果如下:这是label和input,当我们点击label(姓名:)时焦点自动转移到inpu...原创 2018-09-24 12:08:14 · 5055 阅读 · 0 评论 -
前端----CSS透明度属性opacity
指定透明度的属性是opacity,属性值从 0.0 到 1.0。值越小,越透明。img{ opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */}IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。IE8 以及更早的版本使用滤镜 filter...原创 2018-09-24 11:23:21 · 15992 阅读 · 1 评论 -
前端----HTML/CSS 修改placeholder的颜色
placeholder这个属性是HTML5中新增的属性,作用是描述输入字段预期值的提示信息如何修改placeholder的颜色呢?但是存在一定的浏览器兼容问题,以chorme为例:<!DOCTYPE html><html><head> <meta charset="utf-8"> <style>...原创 2018-09-24 09:29:34 · 27865 阅读 · 1 评论 -
前端----HTML/CSS 圆角边框
border的边框默认是直角矩形的,很多网页的边框都是圆角的,看起来很圆滑,舒服了不少其实方法特别简单,css中的一个border-radius属性就够了这个属性是CSS 3支持的属性值是圆角的半径,半径越大,圆角的成都越大方法如下:boder-top-left-radius:30px; //左上角boder-top-right-radius:30px; //...原创 2018-09-24 00:02:34 · 8798 阅读 · 0 评论 -
前端----HTML/CSS 单边框
先说下边框怎么用:border-bottom:2px solid red;3个参数意思分别是 边框宽度为2px(2像素),边框类型为实线,边框颜色为红色<!DOCTYPE html><html><head><style> p{ border-bottom:2px solid red; }</sty...原创 2018-09-23 22:14:07 · 2749 阅读 · 0 评论 -
前端----CSS优先级规则
以某标签颜色为例,菜鸟的我天真的以为只有后边的样式表覆盖前面的样式表,后来才知道CSS的优先级还是比较复杂的,查阅了一些资料感慨世界真复杂!先说结论:通用选择器<元素(类型)选择器<类选择器<属性选择器<伪类<ID 选择器<内联样式如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。一般情况下,优先级为:外部样式<...原创 2018-09-23 00:04:18 · 2861 阅读 · 0 评论 -
前端----HTML/CSS(块)元素居中的简单方法,如div居中margin:0 auto;
如题,这篇无疑是给向我这样的小白看的,发这篇主要因为我总觉得块元素的居中不好处理需要JavaScript的来取div的尺寸再计算父级容器的尺寸来动态调整元素块的位置好麻烦哟,今天突然发现在style里写一句margin:0 auto;就实现了........感觉自己蠢了好久所以给和我一样蠢的小白分享一下让元素居中的简单方法(如果这样的人存在的话):在元素的style属性值里写上下边...原创 2018-09-22 21:29:07 · 2911 阅读 · 0 评论 -
前端——HTML5 可以省略结束标签(script标签不能自闭合!)
本来是个非常基础的问题,之所以要写篇博客是因为今天发现<script>标签不能自闭合意思就是<script src="xxx" type="text/javascript"/>是不合法的必须写成<script src="xxx" type="text/javascript"></script>的形式否则js文件原创 2018-09-22 21:06:38 · 6552 阅读 · 1 评论 -
前端——html定位position用法(相对位置问题)
定位问题是最让新手(比如我。。)头疼的问题之一,如果懒得看分析直接翻到最后 直接说如何用。我们知道定位分为相对和绝对position的属性值其实一共有五个:absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 f...原创 2018-09-21 12:00:50 · 8666 阅读 · 1 评论 -
js删除css某个属性值
先上结论:属性值不能删, 可以设置成默认值问题描述:做小项目的时候需要js触发条件时把一个有固定高度的div的height属性删掉也就是变成高度由子元素决定(height属性写在CSS)想到这有点蒙, 以前都是修改, 还没有删除过某个属性, 网上搜索了一些, 果然没有直接删除的方法 到这其实有点钻牛角尖, 再次分析问题, 我可以修改属性, 但不能直接删除设置的属性,...原创 2018-10-20 23:05:49 · 23234 阅读 · 1 评论