随笔分类 - HTML/CSS
摘要：一、 ::first-letter 第一个字 二、 ::first-line 第一行（以浏览器为准的第一行） 三、 ::selection 被选中的字行（鼠标选中的字段）只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline
阅读全文
摘要：一、结构（位置）伪类选择器（ : ） 1、:first-child 2、:last-child 3、:nth-child(n)或者:nth-child(2n)或者:nth-child(2n+1) 二、属性选择器（[ ]） 1、[ 属性 ] 2、可以和正则表达式混用，如 $ 和 ^ 和 *
阅读全文
摘要：一、上传到第三方网站，然后引入例如视频上传到优酷网，然后得到代码 二、audio 标签定义声音，比如音乐或其他音频流。 1.audio支持三种音频格式ogg、mp3、wav，为了兼容性考虑，一般会引入其中的两种格式 2.属性： autoplay 如果出现该属性，则音频在就绪后马上播放。（注：可以au
阅读全文
摘要：一. input type属性 以下是Firefox显示效果(每个浏览器上的默认显示效果不同,可以通过css修改统一样式) 二. 其他新增属性： 1. placeholder placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点
阅读全文
摘要：1.header 标签定义文档的页眉（介绍信息）。 2.nav 标签定义导航链接的部分。如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。 3.footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
阅读全文
摘要：<body> <div class="bg">超大背景图定位一般使用top center</div> </body> <style> .bg{ width: 100%; height: 1100px; border: 1px solid #000; background: url(bg.png) n
阅读全文
摘要：一、normallize.css(github的一个项目 点击进入链接 二、.其他的一些初始化(借鉴) article, aside, details, figcaption, figure, footer, header, main, nav, section, summary { display
阅读全文
摘要：网站优化是指在了解搜索引擎自然排名机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键词的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，网站优化包括整站优化、站内优化、站外优化，就是时适合搜索引擎检索，满足搜索引擎排名的指标，从而在搜索引擎检索中获得搜索引擎排名靠前，
阅读全文
摘要：<body> <!-- h1里面嵌套a,并且有网站名,方便seo --> <h1> <a href="#">小米官网</a> </h1> </body> <style> a { display: block; width: 55px; height: 55px; background: url(lo
阅读全文
摘要：一、什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果，放大缩小不失真，而且可以使用CSS任意更改图标字体的颜色,能够缩小源文件的体积，减少http的请求，提高页面的性能. 二、推荐的网站: 1.
阅读全文
摘要：首先，我们应该知道引入精灵图的原因： 具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。 其次，我们应该知道精灵图和图标字体(有文章介绍)在使用的过程中
阅读全文
摘要：如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动
阅读全文
摘要：<body> <div>一定要首先强制一行内显示，再次和overflow搭配使用,三个步骤缺一不可</div> </body> <style> div{ border: 1px solid #000; width: 250px; white-space: nowrap;/* 第一，强制一行*/ ov
阅读全文
摘要：利用display：none和display：blocks设置鼠标经过的一个效果。 注意的几个点：1.子绝父相定位 2.设置百分比宽高 3.播放按钮放用背景图做 4.a:hover .mask的写法
阅读全文
摘要：1、display:none,不会占位置，下面的盒子顶上来了，与之对应的是display：block，和js搭配用来做特效。 2、visibility: hidden隐藏元素以后占位置下面的盒子顶不上来，与visibility: hidden对应的是visibility: visible 3、ove
阅读全文
摘要：这样写完之后，会发现中间边框明显更粗，因为是两个盒子的边框并在一起。 解决方法是设置负的margin值 然后我们设置鼠标经过盒子的样式，会发现，有盒子边框有一边不会变色 解决方法是：使用相对定位可以解决，如果li本身就具有定位，这时候可以使用z-index提高层级
阅读全文
摘要：1、图片和文字是默认基线（baseline）对齐，这样会导致图片下方出现3px的空隙 2、解决方法是使用其他的对齐方式，比如middle，top等等 3、使用浮动使文字环绕似乎更美观 注意：vertical-align大多是行内块和文字的对齐方式，比如img和input
阅读全文
摘要：<body> <input type="text" name="" id=""> <textarea name="" id="" cols="30" rows="10"></textarea> </body> <style> input { outline: none;/* 取消默认的表单轮廓线 *
阅读全文
摘要：【注意】 通过以上的设置，可以实现为行内非替换元素设置宽高及内外边距。但是替换时，还需要注意转换为块级元素只是，position的副作用，他们本身的作用还会干扰布局效果。 块级元素的宽度会继承其父元素。但是，只有为行内元素设置display:block;才会有这样的效果，其他转换之后并不会默认带来这
阅读全文
浙公网安备 33010602011771号