Html/CSS 第16页
css高级应用三种方法实现多行省略的示例代码-偶像资源网

css高级应用三种方法实现多行省略的示例代码

前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用 -webkit-line-clamp 的方案。 如果你看到这篇文章,可能代表你...
网络的头像-偶像资源网网络32天前
000
使用Rem布局实现自适应-偶像资源网

使用Rem布局实现自适应

之前写过一篇移动端适配的文章,很长,内容太多,看得容易凌乱,重新写个通熟易懂版的。 为什么要自适应? 比如,对于一个移动端页面,设计师给的视觉稿画布宽 750,视觉稿中的一个黄色区块的尺...
网络的头像-偶像资源网网络32天前
000
基于html css实现带搜索图标的搜索框功能-偶像资源网

基于html css实现带搜索图标的搜索框功能

前言 给大家分享一下前端用处很多的带小图标的搜索框的制作方法。 效果展示 基本思路 1、搜索图像用绝对定位放到搜索框的上方 2、input框设置文本缩进,大小为搜索图像大小加上图像左右两边的外...
网络的头像-偶像资源网网络32天前
000
CSS3实现文本垂直排列的方法-偶像资源网

CSS3实现文本垂直排列的方法

最近的一个项目中要使文字垂直排列,也就是运用了CSS的writing-mode属性。 writing-mode最初时ie中支持的一个属性,后来在CSS3中增添了这一新的属性,所以在ie中和其他浏览器中的语法会有区别。...
网络的头像-偶像资源网网络32天前
000
网页中如何设置默认图片?方式介绍-偶像资源网

网页中如何设置默认图片?方式介绍

现在网页中图片随处可见,但避免不了有时会出现图片资源失败的情况,在谷歌浏览器中就会显示这样 <img src="logo.jpg" alt="logo"> 这里的alt属性是为了当图片加载失...
互联网的头像-偶像资源网互联网32天前
000
CSS3实现可翻转的hover效果-偶像资源网

CSS3实现可翻转的hover效果

CSS3实现可翻转的hover效果,具体代码如下所示: 1.css /*基础样式*/ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0 auto;...
网络的头像-偶像资源网网络32天前
000
用css实现正方形div 的两种方法-偶像资源网

用css实现正方形div 的两种方法

目标:实现一个正方形,这个正方形边长等于 方法一:使用单位vw, (ps我觉得这个是最简单的方法) html结构也很简单,只有一个div即可 <html> <body> <div class="square&...
网络的头像-偶像资源网网络32天前
000
CSS背景图片设置的6个有趣的技巧-偶像资源网

CSS背景图片设置的6个有趣的技巧

背景图像可能是所有前端开发人员在我们的职业生涯中至少使用过几次的CSS属性之一。大多数人认为背景图片没有什么不寻常的,但是。。。。。。 1.如何将背景图像完美地适合视口 body { background...
网络的头像-偶像资源网网络32天前
000
CSS Sticky Footer 几种实现方式-偶像资源网

CSS Sticky Footer 几种实现方式

什么是 “Sticky Footer” 所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果: 如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果...
网络的头像-偶像资源网网络32天前
000
浅谈css3 device-width和width之间的差异-偶像资源网

浅谈css3 device-width和width之间的差异

1.device-width 定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iPhone...
互联网的头像-偶像资源网互联网32天前
000