![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
原克技术
这个作者很懒,什么都没留下…
展开
-
flex布局书写固定宽度
<style> .con { display: flex; } .con_left { flex: 0 0 500px; width: 500px; //为了解决兼容性 border-right: 1px solid aqua; } .con_right { flex: 1; }</style><div class="con"> <div class="con_left">con_left</div> &原创 2021-07-08 23:19:45 · 756 阅读 · 0 评论 -
网页引入自定义字体
1.引入<style> @font-face { font-family:avenir; src: url('./fonts/avenir/Avenir-Book-woff-5.ttf'); } /* 这里的avenir就是引入字体的名字,可以自定义 */</style>2.使用.project .con .project_txt .tit_en{ font-family: avenir;/* 这里的avenir就是引入字体的名字,可以自定义 */}...原创 2021-05-11 13:25:32 · 415 阅读 · 0 评论 -
让所有的input失去焦点
//表单的提交$("form").submit(function() { //让input框触发失去焦点事件 $("input").trigger("blur"); // return true;})原创 2021-04-22 16:45:27 · 900 阅读 · 0 评论 -
网站加载特效,网站渐入特效
网站淡入效果的制作1.引入样式<script src="js/wow.min.js"></script><link rel="stylesheet" type="text/css" href="css/animate.min.css"/>2.初始化new WOW().init();3.使用<div class="list wow animated fadeInUp"> </div>...原创 2021-03-18 10:08:31 · 346 阅读 · 0 评论 -
图片从中心放大,元素从中心放大
.main img { transition: all 1s; }.main img:hover{ transform: scale(1.2);}原创 2021-03-16 13:21:30 · 298 阅读 · 0 评论 -
子元素定位后,无法撑开父元素
我们经常会遇到一个问题那就是在对子元素进行定位以后,就无法撑开父级元素,这时候我们可以给父级元素加一个属性overflow: hidden;或者overflow: auto;或者float:right或者float:left原创 2020-11-01 22:05:38 · 3083 阅读 · 1 评论 -
DIV元素加 margin 会把父元素的 margin 也撑高
这种现象叫做外边距合并或CSS样式margin叠加的问题。原理:相邻两个元素都有margin,那么间距会取两者较大的作为间距距离;同理,对于包含的两个元素也一样,特殊的是如果包含的两个元素,父元素没有margin,而子元素有margin,并且父元素没有border和padding的话,那么子元素的margin会溢出到父元素外,要解决这个问题有很多方法,如设置1px的padding,或者设置透明的border等方法来防止margin溢出。解决方案一:给父节点添加一个border ( border:1p原创 2021-02-08 10:55:32 · 1274 阅读 · 1 评论 -
清除浮动极力推荐写法
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility: hidden;}.clearfix {zoom:1;}经益求精写法.clearfix:after {content:”\200B”;display:block;height:0;clear:both;}.clearfix {*zoom:1;} //照顾IE6,IE7就可以了...原创 2021-02-05 19:35:32 · 135 阅读 · 0 评论 -
下拉菜单
<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title原创 2020-09-29 17:53:13 · 50 阅读 · 0 评论