08 2021 档案

css巧用 transform的 rotate属性得到三角形箭头（取代iconfont的字体符号）
摘要：思路： 1，先做1个正方形，然后旋转45°即可让箭头分别朝向上下左右 2，需要那个朝向的箭头就分别设置这个箭头两边边框颜色，如下代码可以实现箭头朝右 div { width: 8px; height: 8px; border-top: 1px solid #666; border-right: 1p 阅读全文
posted @ 2021-08-23 18:12 专注网站建设和推广 阅读(231) 评论(0) 推荐(0)
li 鼠标悬停抖动问题
摘要：li因为本身自带1个像素的边框，当鼠标悬停改变它的颜色时就会出现抖动的问题，此时只需把li的边框颜色设置为透明即可 li { width: 199px; height: 235px; border: 1px solid transparent; } li:hover { border: 1px so 阅读全文
posted @ 2021-08-23 15:06 专注网站建设和推广 阅读(258) 评论(0) 推荐(0)
小米官网首页商品列表鼠标悬停动画和阴影效果
摘要：li{transition: all .2s linear;} li:hover { z-index: 2; -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1); box-shadow: 0 15px 30px rgba(0, 0, 0, .1); - 阅读全文
posted @ 2021-08-19 11:49 专注网站建设和推广 阅读(283) 评论(0) 推荐(0)
用伪类after和before实现对CSS边框长度的控制，做出小米商城的效果图
摘要：主要是中间的分割线，效果图如下： Html代码： <div class="fuwu"> <ul> <li><a href=""><i class="iconfont icon-shizhong"></i><span>保障服务</span></a></li> <li><a href=""><i cla 阅读全文
posted @ 2021-08-18 20:17 专注网站建设和推广 阅读(228) 评论(0) 推荐(0)
css中文字只在一行显示，多出的部分隐藏并且使用省略号...代替
摘要：一般适用于公告展示。 操作步骤： 1，强制性让内容不换行只在一行内显示 white-space: nowrap 2，把div这行内溢出的部分文字隐藏 overflow:hidden 3，再把div内显示不全的的文字用省略号替代 text-overflow:ellipsis 阅读全文
posted @ 2021-08-18 19:16 专注网站建设和推广 阅读(867) 评论(0) 推荐(0)
CSS实现三角形箭头
摘要：主要原理： 1，先把盒子宽度和高度设置为0，只剩下边框，这样的话每个边框都会变成1个三角形 2，需要三角形朝向哪个方向，先把所有边框颜色设置为透明，然后只需设置这个方向的边框颜色就可以了（箭头方向和边框方向相反，比如需要箭头朝右就需要设置左边框颜色） width: 0px; height: 0px; 阅读全文
posted @ 2021-08-18 18:11 专注网站建设和推广 阅读(453) 评论(0) 推荐(0)
css控制同级兄弟元素以及兄弟元素的子元素的样式
摘要：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title></head> <style>.a {color : #FFFF00;} .a:hover + .b{color : #00FF00;}.a:hover 阅读全文
posted @ 2021-08-18 17:38 专注网站建设和推广 阅读(1002) 评论(0) 推荐(0)
CSS: hover选择器控制子元素的出现和隐藏
摘要：使用方法：.父元素:hover .子元素（hover和子元素之间需要一个空格），如： .a:hover .b 演示效果：代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm:ho 阅读全文
posted @ 2021-08-18 15:11 专注网站建设和推广 阅读(1303) 评论(0) 推荐(0)
CSS实现背景图标居中显示
摘要：使用场景： 比如在视频缩略图上显示播放按钮 只需在背景图属性上设置个center值即可。 background: url(../images/play.jpg) no-repeat center; 阅读全文
posted @ 2021-08-17 13:44 专注网站建设和推广 阅读(316) 评论(0) 推荐(0)
CSS不再占用原先位置的几种情形总结
摘要：1，元素为浮动时（float） 2，元素被设置为绝对定位时（absolute） 3，元素被设置为固定定位时（fixed） 4，元素的display属性为设置为none隐藏时（display:none） 阅读全文
posted @ 2021-08-17 13:10 专注网站建设和推广 阅读(679) 评论(0) 推荐(0)
iconfont使用说明
摘要：iconfont使用说明： 1，下载对应的字体包 2，解压得到iconfont.css，在网页文件中引入iconfont.css 3，使用<i class="iconfont icon-sousuo"></i>显示字体，其中iconfont是固定类目， icon-sousuo是字体css名 阅读全文
posted @ 2021-08-17 12:55 专注网站建设和推广 阅读(242) 评论(0) 推荐(0)
绝对定位下的水平水平和垂直居中
摘要：CSS绝对定位下的水平居中原理： 1，先设置div绝对定位的左侧位偏移为整个网页body的一半也就是50% 2，再设置div左侧边距margin-left为这个div自身宽度的一半 如： .box3 { width: 150px; height: 26px; position: absolute; 阅读全文
posted @ 2021-08-17 11:24 专注网站建设和推广 阅读(356) 评论(0) 推荐(0)
CSS实现背景半透明
摘要：/* 背景半透明，前面三个参数是颜色代码，后面小数是透明度 */ background: rgb(0, 0, 0, 0.5); 阅读全文
posted @ 2021-08-13 09:02 专注网站建设和推广 阅读(316) 评论(0) 推荐(0)
CSS实现椭圆形圆角
摘要：实现步骤： 先设置好div的高度，然后把边框椭圆属性设置为高度的一半即可，如： height: 26px; border-radius: 13px; 阅读全文
posted @ 2021-08-13 09:00 专注网站建设和推广 阅读(373) 评论(0) 推荐(0)
CSS局中对齐方法
摘要：一、div本身局中对齐（前提：必须给这个DIV设置高度）： margin: 0 auto; 二、DIV内的子元素文字图片局中对齐： 给这个div（也就是子元素的父div）的css设置： text-align: center; 阅读全文
posted @ 2021-08-12 23:09 专注网站建设和推广 阅读(136) 评论(0) 推荐(0)
css实现背景图片等比例缩放并填充
摘要：/* 通过以下两个参数实现背景图片等比例缩放并填充*/ background: url(../images/banner.jpg) no-repeat; background-size: 100% 100%; 阅读全文
posted @ 2021-08-12 23:05 专注网站建设和推广 阅读(1769) 评论(0) 推荐(0)