2018 年 1月随笔档案 - 鹿大大

摘要：1.实例一效果： 2.实例一代码：注意HTML结构和红框中的内容 3.实例二效果： 4.实例二代码：注意HTML结构和红框中的内容 ps：区别于选项卡阅读全文

posted @ 2018-01-19 22:52 鹿大大阅读(93) 评论(0) 推荐(0)

摘要：过年在携程买票的时候，偶然间发现点击城市中间的图标可以将出发城市和到达城市互换，于是我去官网找了一下实现代码，具体如下： 1.效果：点击图标互换城市 2.HTML结构：给img设置一个ID，href="javascript:;"可以阻止a标签的默认行为 3.JavaScript： 4.js源代码：阅读全文

posted @ 2018-01-19 16:39 鹿大大阅读(163) 评论(0) 推荐(0)

滑动穿透

摘要：在webApp的复合页面中，如果主层或者遮罩层的高度大于屏幕高度，滑动遮罩层时就会引起联动，这就是滑动穿透事件，那么如何解决呢。我在网上找了很久，有很多人提供了比较好的思路，可惜目前水平不足，看demo的时候一切顺利，改到自己项目中就总是出问题。先马上两篇比较认可的文章，以后水平提高了再做尝试吧阅读全文

posted @ 2018-01-19 15:40 鹿大大阅读(201) 评论(0) 推荐(0)

float和position

摘要：当构建页面排版时，有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求，在不同的情况下，某些方法可能好过于其他的方法。比如，可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者，如果需要更复杂的排版要求，可以考略使用其他方法，比如使用相对定位和绝对定位。在这篇文章中，我们首先要讨论元阅读全文

posted @ 2018-01-18 13:48 鹿大大阅读(462) 评论(0) 推荐(0)

给一行文字的左侧、右侧、两端添加横线

摘要：效果是酱婶的： HTML布局： css样式：源代码-css： 1 .cityLineLeft { 2 vertical-align: middle; 3 text-align: left; 4 display: inline-block; 5 width: 100%; 6 border-top: 阅读全文

posted @ 2018-01-17 14:15 鹿大大阅读(671) 评论(0) 推荐(0)

修改日历控件的默认样式

摘要：默认效果：修改后的效果：源代码： 1 ::-webkit-datetime-edit { padding: 0; background-color: #fff;} /*控制编辑区域*/ 2 ::-webkit-datetime-edit-fields-wrapper { background-c 阅读全文

posted @ 2018-01-15 15:44 鹿大大阅读(271) 评论(0) 推荐(0)

input开关按钮

摘要：最终效果：源代码： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .switchInput { 6 display: none; 7 } 8 .switchlabel { 9 position: relative; 阅读全文

posted @ 2018-01-15 10:50 鹿大大阅读(253) 评论(0) 推荐(0)

bootstrap折叠展开

摘要：效果图—折叠时：效果图—展开时：实现步骤： 1.引入bootstrap.css、jquery.js和bootstrap.css 2.给母版一个data-toggle="collapse" 和data-target="子版ID" 3.给子版一个class="collapse"和一个ID 结构布局：阅读全文

posted @ 2018-01-15 10:31 鹿大大阅读(789) 评论(0) 推荐(0)

左边三个小个子元素，头边一个高个子元素

摘要：想让左边的“经济舱”等三个元素居于底部 vertical-align没用页面样式是这样的：代码结构是这样的：阅读全文

posted @ 2018-01-11 17:04 鹿大大阅读(123) 评论(0) 推荐(0)

选项卡

摘要：效果图： HTML结构： JavaScript结构：源码： 1 <div class="row dongtaiChooseBox"> 2 <div class="col-sm-6 col-xs-6 col-lg-6 text-center dongtaiByNo" ng-model="srhTyp 阅读全文

posted @ 2018-01-03 10:36 鹿大大阅读(132) 评论(0) 推荐(0)

checkbox全选

摘要：checkbox全选有四种情况： 1.全选按钮checked——全选 2.全选按钮checked之后再次点击全选按钮——全不选 3.全选了之后取消选择某一个选项——全选按钮unchecked 4.全选了所有的选项——全选按钮checked 阅读全文

posted @ 2018-01-02 16:09 鹿大大阅读(173) 评论(0) 推荐(0)