HTML&CSS
关注
分享
扫一扫
文章平均质量分 53
不见蝴蝶不见君。
这个作者很懒，什么都没留下…
展开
-
table合并单元格colspan和rowspan
colspan和rowspan这两个属性用于创建特殊的表格。colspan是“column span（跨列）”的缩写。colspan属性用在td标签中，用来指定单元格横向跨越的列数：在浏览器中将显示如下：单元格1单元格2单元格3单元格4该例通过把colspan设为“3”, 令所在单元格横跨了三列。如果我们将colspan设为“转载 2017-05-20 10:50:27 · 562 阅读 · 0 评论 -
渐变虚框及边框滚动动画的纯CSS实现
一、渐变虚线边框的实现前段时间，有位小伙伴在微博上问了我这么一个虚线边框如何实现渐变效果的问题：如果对边框的样式细节不是很在意，则可以借助反向镂空的方法实现，也就是虚线原本实色的地方和周围颜色融为一体，看上去透明，而原来虚框透明的部分透出渐变背景色，于是看上去像是渐变色。如下HTML和CSS：<div class="box"> <div class=...转载 2018-09-05 20:05:12 · 9086 阅读 · 1 评论 -
简单的音乐播放器
纯Css,js前端音乐播放器,界面UI比较好。我特别喜欢,适合二次开发,调用了网易云第三方接口以及将歌曲链接导出可以访问的歌曲链接,实现了异步歌曲搜索播放,以及异步显示歌词等.结合html5 新特性实现歌曲暂停,下一首,快进等等.为大二前端练手项目.采用渐变质背景是前端练手的好项目，强烈推荐，会让你对js产生浓浓的兴趣挺好玩的，挺有意思的记得当时搞出来高兴了好久异步搜索歌曲链接...转载 2018-09-10 19:44:53 · 570 阅读 · 0 评论 -
:before和：after在li中的应用
一、afterli:after li+li+li:after二、beforeli:beforeli+li+li:before原创 2018-09-07 16:58:58 · 4518 阅读 · 0 评论 -
制作音量控制器的滚动条效果
<form> <fieldset> <legend> HTML5表单新增输入类型range的简单应用 </legend> <label>音量大小： <input type="range" name="range" id=&quo原创 2018-10-04 10:58:04 · 1289 阅读 · 0 评论 -
CSS总结篇之选择器
一、（一）后代选择器后代选择器：先找到选择器1，然后在选择器1下面去查找所有选择器2，并设置属性（1）语法：选择器1 选择器2{ }（2）注意点后代选择器必须使用空格隔开； 后代不仅仅包括儿子，还包括孙子，曾孙等等；后代选择器可以无限嵌套 （二）子选择器如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child s...原创 2018-10-13 12:16:12 · 319 阅读 · 0 评论 -
Web Storage
WEB应用的快速发展，是的本地存储一些数据也成为一种重要的需求，实现的方案也有很多，最普通的就是cookie了，大家也经常都用，但是cookie的缺点是显而易见的，其他的方案比如：IE6以上的userData，Firefox下面的globalStorage，以及Flash的本地存储，除了Flash之外，其他的几个都有一些兼容性的问题。 sessionStorage与localStorage...转载 2018-10-06 21:26:37 · 109 阅读 · 0 评论 -
css3中background-repeat的 space和round属性
background-repeat space/round属性2018-06-01 admin1.容器空间小于图片div { width: 200px; height: 200px; border: solid 1px red; background-color: #fff3d4; background-size: 300px; bac...转载 2018-11-03 14:41:32 · 6745 阅读 · 0 评论 -
css3中background-clip和background-origin的区别
一、origin 二、clip 结果：background-clip只是将背景和背景色粗暴的裁剪原创 2018-11-03 21:07:01 · 883 阅读 · 0 评论 -
CSS浮动，你不知道的事
浮动到底做了什么？浮动如何影响元素的盒模型？浮动的元素和行内元素有何不同？调整浮动元素的位置是通过什么规则进行的？clear属性如何工作，它的目的又是什么？浮动甚至能绊倒有经验的开发者，理解浮动能帮助你解决很多CSS问题。即使你认为已经知道了浮动的所有知识，我们足够深入的分析也许也能让你学到一些新东西。什么是浮动？CSS中的一些元素是块级元素，表示它们会自动另起一...转载 2018-11-06 16:59:45 · 232 阅读 · 0 评论 -
文字超出边框解决办法
问题如图 解决方法:加word-break:break-all.原创 2018-11-06 18:21:52 · 4692 阅读 · 1 评论 -
CSS三栏布局的四种方法
前言总括： 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。 原文地址：CSS三栏布局的四种方法 知乎专栏&&简书专题：前端进击者（知乎）&&前端进击者...转载 2018-11-10 12:19:13 · 185 阅读 · 0 评论 -
float子元素超出父元素解决办法
使用float 子元素浮动，如果子元素比父元素大，会撑开父元素此时在父元素上加上 overflow:hidden原创 2018-11-05 14:11:11 · 5045 阅读 · 0 评论 -
HTML行内元素、块状元素、行内块状元素的区别
1.行内元素 行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体<b>和<i>标签，还有<sub>和<sup>这两个标签可以直接做出平方的效果，而不需要类似移动属性的帮助，很实用。 行内元素特征：(1)设置宽高无效 (2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会...原创 2018-11-05 15:47:16 · 277 阅读 · 0 评论 -
CSS + DIV 让页脚始终位于底部
<body> <form> <!-- 如果用的是 Asp.Net 就可能会有这个结点 --> <div class="Wrapper"> <div class="Header"></div> <div class="Content"原创 2018-11-05 20:11:33 · 759 阅读 · 0 评论 -
CSS3 filter:drop-shadow滤镜与box-shadow区别应用
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？一、兼容性不一CSS3 box-shadow从IE9浏览器开始就支持了，兼容性如下截图：而filter中的drop-shadowIE13才开始支持，移动端Android4.4才开始支...转载 2018-09-05 20:00:45 · 449 阅读 · 0 评论 -
drop-shadow 详解
属性css3 属性：filter: drop-shadow 滤镜要使用标准的 css3 实现某元素的投影效果，有两个方法，第一个就是使用常见的 box-shadow ，第二个就是使用 css3 的 filter 阴影滤镜 drop-shadow。filter 中的 drop-shadow 与 box-shadow 有同样的参数值，但表现效果有差异例如：filter:drop-sh...原创 2018-09-05 19:57:29 · 1168 阅读 · 0 评论 -
css3中border-image属性
border-image是CSS3的一个属性，由于比较复杂，总是处于一知半解的状态，今天下定决心，花时间整理了一下，供大家共勉和学习。border-image的用处没用border-image之前，觉得css的属性基本够用，border-image完全是将简单的工作复杂化，当学习完该属性以后，发现该属性的运用能够大大节省编码时间和效率，总结一下，大致适用于以下两个场景： 元素边框不规...转载 2018-08-29 21:28:01 · 1848 阅读 · 2 评论 -
HTML140种常用RGB颜色代码列表
转自：http://blog.csdn.net/jcx5083761/article/details/9998293转载 2017-05-20 10:55:31 · 2450 阅读 · 0 评论 -
web前端到底怎么学？干货资料！
一般据我经验，在喜欢并且决定和她恋爱之前，我都会做一下充分准备和调查，有必要了解和研究清楚 ‘她’ 的几个特性和习惯web前端的基本工作职责 和基础技能（要清楚）web前端的分类和门派（简要概述，武林 实在是太大啦）前端开发 必看的书籍资料（干货重点）如果 你已经了解清楚以上前2点并思路清晰，那就直接 和她相爱吧-直接跳入 【前端开发 必看的书籍资料】1.web转载 2017-05-20 12:00:12 · 399 阅读 · 0 评论 -
利用HTML和CSS实现常见的布局
单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display:转载 2017-05-21 11:09:02 · 614 阅读 · 0 评论 -
background的属性和背景图片定位的实例
本文内容： 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round、space属性 4.background-size的属性值（着重介绍contain、cover） 5.background-origin属性值（borde-box、padding-box、content-box） 6.多背景图片示例...转载 2018-08-09 15:34:07 · 3597 阅读 · 0 评论 -
html和css文件路径问题
HTML初学者会经常遇到这样一个问题，如何正确引用一个文件。比如，怎样在一个HTML网页中引用另外一个HTML网页作为超链接(hyperlink)？怎样在一个网页中插入一张图片如果你在引用文件时(如加入超链接，或者插入图片等)，使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。 为了避免这些错误，正确地引用文件，我们需要学习一下HTML路径。 HTML有2种路径的...转载 2018-08-09 17:10:49 · 634 阅读 · 0 评论 -
HTML学习笔记
一、HTML1、标题大小与字体大小的关系1到6号标题与1到6号字体逆序对应，比如1号字体对应6号标题，2号字体对应5号标题。2、HTML 水平线<hr> 标签在 HTML 页面中创建水平线。3、<b>加粗文本</b><br><strong>加粗文本</strong><br>&l原创 2018-08-07 11:58:40 · 469 阅读 · 0 评论 -
a标签中href=""的几种用法
一、Js的几种调用方法（参考总结的） 1、a href="javascript:js_method();" 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面...转载 2018-08-26 11:01:04 · 1718 阅读 · 0 评论 -
Flex 布局教程：语法篇
网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地...转载 2018-08-26 14:30:21 · 107 阅读 · 0 评论 -
Flex 布局教程：实例篇
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。（转自阮一峰博客）我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实...转载 2018-08-26 14:32:55 · 646 阅读 · 0 评论 -
详解 清除浮动 的多种方式（clearfix）
说明本文适合知道HTML 与 CSS基础知识的读者，或者想要了解清除浮动背后原理的读者！1.什么是浮动首先我们需要知道定位元素在页面中的位置就是定位，解决问题之前我们先来了解下几种定位方式1、普通流定位 static（默认方式）普通流定位，又称为文档流定位，是页面元素的默认定位方式页面中的块级元素：按照从上到下的方式逐个排列页面中的行内元素：按照从左到右的方式逐个排列但是如何...转载 2018-08-26 15:44:30 · 335 阅读 · 0 评论 -
:after和:before炫酷用法总结
引入 提到伪类，在我的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等，说实在其他的我发现"然并卵"。 百度一下:after和:before会发现有很多关于研究它们用法的文章，形形色色各式各样，说明这两个伪元素在实际工作中还是很实用的，再结...转载 2018-08-30 17:25:19 · 3753 阅读 · 0 评论 -
CSS3阴影 box-shadow的使用和技巧总结
text-shadow是给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。随着html5和CSS3的普及，这一特殊效果使用越来越普遍。基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩...原创 2018-08-30 18:32:27 · 252 阅读 · 0 评论 -
inline-block使用详解
基础知识display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。举例说明：以前我们做横向菜单列表的时候，我们可以通过l...转载 2018-08-28 00:04:09 · 14183 阅读 · 1 评论 -
css照片墙总结
今天在做照片墙的时候出现了照片尺寸无法控制这一问题,以下是解决方案：1、注意图片宽度和边框宽度的关系（即图片宽度<=边框宽度）2、将边框宽度设置为auto,在<body>里添加clearfix<!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head> ...原创 2018-08-28 14:48:27 · 386 阅读 · 0 评论 -
word-wrap和word-break的区别
word-wrap 强调的是是否允许单词内断句，而word-break强调的则是怎么样来进行单词内的断句。举例:首先，何谓单词内断句？当然这里指的都是西文单词。这是没有单词内断句的情况，我们看到那个单词是在是太长了，所以它溢出了包裹它的容器。这是进行了单词内断句的情况，就是一个单词被断作了两行。 先要明确一点，不加word-wrap或word-break的时候，就是...转载 2018-08-31 11:10:03 · 823 阅读 · 0 评论 -
多行多栏布局
我的版本<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0}原创 2018-11-11 15:33:18 · 203 阅读 · 0 评论