CSS - 随笔分类 - 嘆世殘者——華帥

设置overflow:hiden出现偏移现象

摘要：原因：元素默认对齐方式是基线对齐即（vertical-align：baseline），设置设置overflow不为visible之后改变了他的默认对齐方式；导致其它元素出现下沉的视觉效果。解决方法：重新设置所有行内元素的对齐方式为vertical-align:top或者bottom 阅读全文

posted @ 2021-08-31 23:01 嘆世殘者——華帥阅读(64) 评论(0) 推荐(0)

Python Flask 构建微电影视频网站

摘要：Github：https://github.com/lgsp-Leslie/flask_movie Python：3.9 Mysql：8.0.17 Flask==1.1.2 flask-redis==0.4.0 Flask-SQLAlchemy==2.5.1 Flask-WTF==0.14.3 my 阅读全文

posted @ 2021-05-21 18:17 嘆世殘者——華帥阅读(430) 评论(0) 推荐(0)

HTML5标签兼容低版本IE浏览器

摘要：利用document.createElement创建当前浏览器（IE6-8）不支持的标签名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> article { c 阅读全文

posted @ 2020-06-14 15:46 嘆世殘者——華帥阅读(166) 评论(0) 推荐(0)

CSS-自定义变量

摘要：定义 :root{ --bg_color:#FAFAFA; } 用法 div {background-color:var(--bg_color);} 阅读全文

posted @ 2020-06-14 14:44 嘆世殘者——華帥阅读(131) 评论(0) 推荐(0)

图片控制

摘要：方法一：控制图片外框高度，让布局正常，图片不出现拉伸 <div class="left_img"> <img class="img-responsive center-block" src="img/index/j.png" alt="" /> </div> .section3 .left_img 阅读全文

posted @ 2020-06-12 15:58 嘆世殘者——華帥阅读(162) 评论(0) 推荐(0)

多行文本溢出显示省略号

摘要：多行文本溢出显示省略号 <style type="text/css">.section3 .title_leftDiv { height: 42px; margin-bottom: 10px;}.section3 .text_leftDiv { margin-bottom: 10px; height 阅读全文

posted @ 2020-06-12 11:27 嘆世殘者——華帥阅读(103) 评论(0) 推荐(0)

基于jQuery实现点击列表加载更多效果

摘要：CSS .section1 { padding-top: 58px; padding-bottom: 125px; position: relative;}.section1 div.news_list>div { margin-bottom: 6px; } .section1 .news_list 阅读全文

posted @ 2020-06-11 15:17 嘆世殘者——華帥阅读(277) 评论(0) 推荐(0)

div+radio模拟select

摘要：HTML <div class="section1"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-6"> </div> <div class="col-xs-12 col-sm-6"> <div cl 阅读全文

posted @ 2020-06-10 11:50 嘆世殘者——華帥阅读(214) 评论(0) 推荐(0)

清除浮动的三种方法

摘要：1、 <div class="clear"></div> .clear { clear: both; } 2、 <div class="container clearfix"> <div class="div1">333</div> <div class="div1">333</div> <div 阅读全文

posted @ 2020-06-03 18:00 嘆世殘者——華帥阅读(120) 评论(0) 推荐(0)

圣杯布局和双飞翼布局

摘要：布局要求： 1、三列布局，中间宽度自适应，两边定宽 2、中间栏要在浏览器中优先展示渲染 3、允许任意列的高度最高 4、用最简单的css、最少的HACK语句圣杯布局： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圣杯布局</ 阅读全文

posted @ 2020-06-03 16:49 嘆世殘者——華帥阅读(165) 评论(0) 推荐(0)

position之absolute居中定位

摘要：.parent { position: relative; width: 200px; height: 150px; background: blue; } .child { position: absolute; width: 80px; height: 80px; background: red 阅读全文

posted @ 2020-06-01 15:03 嘆世殘者——華帥阅读(197) 评论(0) 推荐(0)

解决IE9以下不兼容H5、媒体查询

摘要：1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。 2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。 head部分添加如下代码 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元阅读全文

posted @ 2020-04-27 17:33 嘆世殘者——華帥阅读(259) 评论(0) 推荐(0)

table添加水平滚动条

摘要：<html> <head> <title>table新增水平滚动条</title> <style type="text/css"> .tableWrap { overflow: auto; } table{ width: 100% } table th{ white-space: nowrap; } table td{ white-space: nowrap; } </style> </head> 阅读全文

posted @ 2019-11-06 11:34 嘆世殘者——華帥阅读(597) 评论(0) 推荐(0)

Vue动画的封装

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue动画的封装</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> .fade1-enter, .fade1-leave-to 阅读全文

posted @ 2019-10-31 18:55 嘆世殘者——華帥阅读(150) 评论(0) 推荐(0)

Vue中的列表过渡

摘要：Vue中的列表过渡 {{item.title}}————{{item}} Add ... 阅读全文

posted @ 2019-10-31 18:18 嘆世殘者——華帥阅读(136) 评论(0) 推荐(0)

Vue中多个元素或组件的过渡

摘要：Vue中多个元素或组件的过渡 Harold Hello toggle ... 阅读全文

posted @ 2019-10-31 16:27 嘆世殘者——華帥阅读(205) 评论(0) 推荐(0)

html引用公共的头部和尾部（多个html文件共用一个header.html和footer.html）、导航跳转页面改变导航样式

摘要：将header部分和footer部分提取出来，各保存为header.html和footer.html。 header.html（P.S.1：此次有导航跳转页面改变导航样式） footer.html 其他html引入头部尾部，如： index.html 阅读全文

posted @ 2019-09-18 10:40 嘆世殘者——華帥阅读(2409) 评论(0) 推荐(0)

css3 position fixed固定居中问题解决方案

摘要：fixed使对象脱离了正常文档流解决方案：阅读全文