前端
文章平均质量分 67
扶公瑾以苏
这个作者很懒,什么都没留下…
展开
-
子div有内容,父div高度为什么为0?(含解决方法)
我们先看一段测试代码:<html> <head> <title></title> <style> .aBox{ background-color:blue; } .bBox{ background-color:yellow; float:left; height...原创 2018-09-26 00:47:24 · 9332 阅读 · 1 评论 -
HTML新增的拖放API
允许拖动 在Html5中,<img.../>元素默认就是可拖动的;而<a.../>元素只要设置了href属性也是可以拖动的。而对于普通元素而言,如果需要将其变为可拖动的,只需将该元素的draggable属性设为true即可。但仅仅只设置该属性还不够,因为该属性只表示该元素可以拖动,可是并未携带任何数据,所以用户无法看到拖动效为了让拖动操作能携带数据,应...原创 2018-09-18 22:56:23 · 437 阅读 · 0 评论 -
display的inline-block问题详解
比如说有两个div, 设置为inline-block。然后分别给二者设置宽高度。当div内有内容、无内容、一个又一个没有,那么对齐的形式就非常乱甚至怪异。inline-block的本身是采用baseline对齐。此处对两个块中都有内容,且大小不一进行解释:如果大小不一致,以占据空间最大的内容下划线处对齐。所以在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical...原创 2018-09-27 10:23:50 · 412 阅读 · 0 评论 -
dispaly属性四大常用取值
四大常用取值值 描述 none 此元素不会显示 inline 此元素将显示为块级元素,且前后会带有换行符 block 默认。此元素会被显示为内联元素,且前后没有换行符 inline-block(CSS2.1新增的属性) 行内块元素 我们在介绍这四种display取值之前我们先区分一下什么是块级元素与行级...原创 2018-09-27 10:26:33 · 1102 阅读 · 1 评论 -
子元素margin-top为何会对父元素造成影响?
我们有时候发现,子div设置的margin-top对整个父div的位置造成了影响,对我们的布局造成了很大的困扰。下面我们做一个测试:css结构如下: .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } ....原创 2018-09-27 11:34:04 · 5360 阅读 · 0 评论 -
JavaScript函数重载
重载函数:重载函数是函数的一种特殊情况。允许在同一范围中声明几个功能类似的同名函数,但是这些同名函数的形式参数(指参数的个数、类型或者顺序)必须不同,也就是说用同一个函数完成不同的运算功能。这就是重载函数。重载函数常用来实现功能类似而所处理的数据类型不同的问题。我们知道JavaScript中的函数参数传递时是没有个数限制的,那么我们该如何实现函数重载呢?解决方法:我们...原创 2018-09-27 21:38:23 · 292 阅读 · 0 评论 -
z-index属性
z-index 属性设置元素的堆叠顺序,z-index的值也可以为负数。z元素只对定位属性生效,position不能是默认值 注意:拥有更高堆叠顺序的元素并不总是会处于堆叠顺序较低的元素的前面!z-index只针对于同级的定位元素生效, 不针对父子元素,。若父元素与子元素z-index值都为正数,就算父元素z-index值大也是在下边。但是把子元素z-index值设成负值...原创 2018-09-27 23:02:29 · 1848 阅读 · 0 评论 -
position属性
position定位有4个属性,分别是static,absolute,relative,fixed1.static(默认)static属性为默认值,没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).2.relative(相对定位)此处的相对并不是相对于哪个父div或子div,相对只是相对于自身原本的位置发生变...原创 2018-09-27 23:28:32 · 1477 阅读 · 0 评论 -
表格td内容过长自动隐藏
td可以设置宽度,但是不能设置高度,而为了满足overflow:hidden条件,我们必须给其设置固定高度。关于overflow:hidden条件,查看https://blog.csdn.net/csdn_zsdf/article/details/72871357我发现给td设置display:block等属性还是不能设置高度,但是我们可以在td中设置一个固定div来固定死td的大小。因为...原创 2018-10-17 21:01:12 · 1643 阅读 · 0 评论 -
ul列表横向排版及删除li圆点
ul默认排版:<html> <head> <meta charset="utf-8"/> <style> .good{ } </style> </head> <body> <ul> <li clas原创 2018-10-14 23:41:22 · 1850 阅读 · 0 评论 -
文本超出部分隐藏(非块级元素)
先看测试代码:<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> #tr1{ display:block; width:547px; height:33px; borde...原创 2018-10-16 21:49:37 · 596 阅读 · 0 评论 -
布局小心得
今天学习了一个网页UI设计,虽然之前写过好几个网页了,但是今天的练习项目依旧让我受益匪浅。项目静态效果:项目代码:<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> body{ ba...原创 2018-10-19 21:45:49 · 178 阅读 · 1 评论 -
form基本元素
<form/>元素用于生成输入表单,该元素不会生成可视化部分。注:在HTML5规范以前,表单控件都需要放在<form/>元素之内。<form/>元素可以指定id、style、class等核心属性,还可以指定onclick等事件属性。除此之外还可以指定如下几个属性:action:指定当单击表单内的“确认”按钮时,该表单被提交到哪个地址,可以是绝对地址...原创 2018-09-18 23:51:08 · 684 阅读 · 0 评论 -
HTML制作百度首页
先给出我的网页成品图:先说我的网页布局的几个要点:为了防止各个块之间互相造成影响,我们几乎整个网页都用div模块组合而成. 为了在不同分辨率的屏幕和缩放的网页上保持原网页各元素相对位置不产生改变,居中的要么选择<center>居中,要么使用margin属性,不过要使用百分比。 小图标都是用的截图抓取,使用div包含其,然后调整布局就可以。 具体字体大小,字体颜色等到百...原创 2018-09-19 23:19:38 · 3198 阅读 · 0 评论 -
HTML制作菜鸟教程网站首页
这是我们要制作的网站首页 我们接下来将分块进行解析:顶端模块:我们将顶端模块分为两个div,分别通过float属性和margin属性达到我们想要的布局效果.此处我试用的高和宽皆为像素定值,实际很多地方高都不需为定值,使其根据内容自适应大小即可.因为是像素设置的原因,所以当浏览器窗口缩小,浏览器窗口像素相应减小.此时div的宽又无法自适应调整,如果浏览器一行无法放下的话,di...原创 2018-09-21 11:57:57 · 20977 阅读 · 1 评论 -
overflow:hidden 属性详细解释
overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解。我们下面来详细阐释一下。测试代码:<html> <head> <title></title> <style> .aBox{ background-col...原创 2018-09-26 00:19:33 · 34528 阅读 · 10 评论 -
word-wrap控制长单词或URL地址换行
有时候文本内容中包含了特别长的单词或特别长的URL地址——URL地址既不包含半角空格,也不包含连字符,因此当浏览器窗口较窄时,浏览器下部将会出现滚动条,用户只有通过拖动滚动条才能看到全部内容。如果需要改变浏览器的默认行为,则可通过word-wrap属性进行设置。该属性支持如下两个值。normal:靠浏览器默认规则进行换行。 break-word:设置允许在单词中间换行。为了让浏览...原创 2018-09-23 00:14:02 · 2069 阅读 · 0 评论 -
word-break实现多种文本换行效果
当HTML元素不足以显示它里面的所有文本,浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是,对于西方文字来说,浏览器只会在半角空格、连字符的地方进行换行,不会在单词中间换行;对于中文来说,浏览器可以在任何一个中文字符后换行。如果希望改变浏览器的默认行为,则可通过word-break属性进行设置。该属性支持如下三个值。normal:靠浏览器的默认规则进行换行。 keep-all:...原创 2018-09-22 23:55:10 · 1005 阅读 · 0 评论 -
white-space控制空白的处理行为
white-space用于控制HTML元素对元素内文本中空白的处理方式。该属性支持如下几个属性值。normal:默认属性值。浏览器忽略文本中的空白。 pre:浏览器保留文本中的所用空白,其行为方式类似于<pre.../>标签。 nowrap:文本不会换行,文本会在同一行上继续,知道遇到<br.../>标签为止。 pre-wrap:保留空白符序列,但可以正常换行。...原创 2018-09-22 22:17:24 · 1209 阅读 · 0 评论 -
HTML文本相关属性
文本相关属性用于控制整个段、整个<div.../>元素内文本的显示效果,包括文字的缩进、段落内文字的对齐等显示方式。text-indent:用于设置段落文本的缩进,默认值为0.被另一个元素(如<br.../>断开的元素不能应用本属性。text-overflow:用于控制溢出文本的处理方法。该属性支持如下两个属性值。clip:如果该元素指定了overflow:h...原创 2018-09-22 21:54:22 · 2312 阅读 · 0 评论 -
HTML:CSS选择器介绍
本文将介绍各种选择器的定义方法。元素选择器:元素选择器是最简单的选择器,其语法格式如下:E{...} /*其中E代表有效的HTML元素名*/E甚至还可以用“*'来表示元素名,”*“可匹配HTML文档中任意元素。属性选择器:属性选择器一共有如下几种语法格式。E{...}:指定该CSS样式对所有E元素起作用 E[attr]{...}:指定该CSS样式对具有att...原创 2018-09-22 20:44:32 · 424 阅读 · 0 评论 -
HTML头部三大常用元信息介绍
使用<head...>元素可以定义HTML文档头,该元素可以包含如下子元素。<script>:该元素用于包含JavaScript脚本。 <no编辑script>:该元素用于向禁用了JavaScript脚本或不支持JavaScript脚本的浏览器显示提示信息。 <style>:该元素用于定义内部CSS样式。关于内部CSS样式的介绍,请参考本书...原创 2018-09-22 19:23:11 · 748 阅读 · 0 评论 -
JavaScript图片动态移动及文字浮现
先说我们这个小动画想要达到的效果:月亮最开始藏在海中,只露出一点点。 随着时间,开始慢慢上升,直到一个高度停止。 当月亮停止上升,出现一首诗。效果一:我们先设置一个div,设置你想要的图为背景,以让其他图片可以很方便的覆盖在上面。这个div中包含三个div:第一个div:包含背景图中的海的图片。 第二个div:包含月亮图片。 第三个div:作为文字容器。既然要被海遮盖住,那...原创 2018-09-22 15:37:29 · 2812 阅读 · 0 评论 -
HTML5绘制字符串
HTML5新增了一个<canvas.../>属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript脚本进行绘制。为了向<canvas.../>元素上绘图,必须经过如下3步。获取<canvas.../>元素对应的DOM对象,这是一个Canvas对象。 调用Canv...原创 2018-09-22 13:49:34 · 950 阅读 · 0 评论 -
HTML5实现简单绘图
HTML5新增了一个<canvas.../>属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript脚本进行绘制。为了向<canvas.../>元素上绘图,必须经过如下3步。获取<canvas.../>元素对应的DOM对象,这是一个Canvas对象。 调用Canva...原创 2018-09-22 13:46:30 · 17538 阅读 · 1 评论 -
float属性及影响
float属性的英文名是漂浮的意思,那么该属性的作用会使得拥有该属性的模块漂浮在第二层.为什么要使用float:使用最多的情况即使用于div排版(并不是只能用于div排版).div本身是一个块,默认占据了一行的位置,如果接下来再写一个块,会默认换行实现.而我们如果想实现两个div在一行的效果,就要使用float.float拥有两个属性:left和right.left的作用为漂浮并向左对...原创 2018-09-21 13:16:38 · 2639 阅读 · 0 评论 -
jquery对cookie进行读取、写入和删除
使用前注意:cookie虽然是存储在本地,但是是针对服务器的。如果是file:///C:/Users/BYF/Desktop/2.html这种静态网址是无法使用cookie的,只有部署在服务器上的页面才可以使用cookie,类似于http://localhost:8080/test/2.html 这种网址才可以访问 使用前首先需要下载jquery.cookie.js这个文件,下载...原创 2018-10-30 17:22:21 · 9334 阅读 · 0 评论