2019 年 11月随笔档案 - 可樂_Thompson

原生DOM方法实现，多个图片的横向左右轮播

摘要：轮播页面的构成：页面中间有多个同样大小的图片，在图片群的左右两侧有左右方向播动的可点击钮，图片群就会往左侧翻转，并且在最后一张图片的时候，第一张图片就会继续出现在最后一张图片，属于无裂痕翻转。右侧按钮也是同样。实现逻辑：左侧按钮，通过获取图片所在上一级（父级）目录，对出现在最左侧的第一个ch 阅读全文

posted @ 2019-11-29 10:20 可樂_Thompson 阅读(450) 评论(0) 推荐(0)

font-awesome图标的显示问题

摘要：font-awesome一个很强大的字体图标库。下载链接：http://fontawesome.dashgame.com/刚开始使用font-awesome的新手往往容易只引入一个css文件，这样就会导致图标显示不出来。如下图：下载解压后我们至少需要引入这两个文件夹css、fonts,）这两个文件阅读全文

posted @ 2019-11-25 14:38 可樂_Thompson 阅读(539) 评论(0) 推荐(0)

解决移动端页面出现 X轴横向滚动条问题

摘要：最近在写一个需要适配手机移动端的官网，写完后发现移动端总是会出现横向滚动条，也就是 X 轴滚动条，导致页面左右滑来滑去，上图：很是令人头疼，即使设置了 overflow-x： hidden和 width:100% 也无法去除，后来发现出现这种问题的主要原因就是，由于内容较多导致出现Y轴滚动条，占阅读全文

posted @ 2019-11-25 14:02 可樂_Thompson 阅读(902) 评论(0) 推荐(0)

实现侧边导航栏的悬浮设置

摘要：首先看效果图：最开始鼠标没有滚动的时候：当鼠标滚动下拉到一定高度的时候：侧边的悬浮框会一直悬浮在最左边，实现导航的悬浮。通过js代码实现： js代码： var n_t1 = $('body').height() * 0.12; if(scrTop < n_t1){ $('.content2_ 阅读全文

posted @ 2019-11-20 11:19 可樂_Thompson 阅读(2169) 评论(0) 推荐(0)

CSS如何实现三列布局？如果两端固定、中间是自适应又该如何做？(面试必问)

摘要：①使用浮动布局来实现左侧元素与右侧元素优先渲染，分别向左和向右浮动中间元素在文档流的最后渲染，并将 width 设为 100%，则会自动压到左右两个浮动元素的下面，随后在中间元素中再添加一个div元素并给其设置 margin 左右边距分别为左右两列的宽度，就可以将新元素调整到正确的位置。 htm 阅读全文

posted @ 2019-11-19 14:10 可樂_Thompson 阅读(262) 评论(0) 推荐(0)

css盒模型相关问题

摘要：盒模型的组成？盒模型由内容区域、内边距、边框、外边距四部分组成。盒模型实际大小？盒模型实际大小由内容区域、内边距、边框三部分组成。盒模型的box-sizing属性？如果对盒子不进行设置（或者设置为box-sizing: content-box; ），那么给盒子设置的width和height 阅读全文

posted @ 2019-11-19 13:56 可樂_Thompson 阅读(109) 评论(0) 推荐(0)

html新特性的几个注意点(面试必问)

摘要：一、HTML 1.HTML5有哪些新特性？新增的标签有哪些？新特性：语义标签——语义化标签使得页面的内容结构化，见名知义增强型表单——拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证（包括取色器控件、日期时间控件等）视频和音频——HTML5 提供了播放音频文件的标阅读全文

posted @ 2019-11-19 13:50 可樂_Thompson 阅读(244) 评论(0) 推荐(0)

css基础样式的初始化

摘要：1.为什么要进行页面标签的样式初始化? 为了保证同一个页面,在不同浏览器中看到的显示效果是一致的，防止统一样式的重复书写，提高效率。 2.样式初始化过程中,我们需要注意哪些细节? 哪些标签有默认自带的样式,我们需要考虑给标签设置一个基本的样式(不能影响网页布局) 设置文字大小, 设置文字字体, 文阅读全文

posted @ 2019-11-19 13:46 可樂_Thompson 阅读(222) 评论(0) 推荐(0)

html中常见的锚链接的使用

摘要：①锚点(anchor)：其实就是超链接的一种，一种特殊的超链接 ②普通的超链接，<a href="路径"></a> 是跳转到不同的页面而锚点，<a href="路径"></a> 可以在同一个页面中不同的位置间跳转可以看到，跳转到锚点的超链接跟普通的超链接格式是一样的 1.使用锚点的步骤： 1.1 阅读全文

posted @ 2019-11-19 13:41 可樂_Thompson 阅读(2678) 评论(0) 推荐(1)

HTML设置目标页面在新窗口打开

摘要：HTML设置目标页面在新窗口打开：在使用<a></a>标签进行超链接跳转时，目标页面默认在当前页面中打开。如果希望当前页面中所有超链接跳转页面的时候,都在新窗口中打开,那么只需要在head标签中设置 base标签,给base标签设置target属性即可. <base href="" target 阅读全文

posted @ 2019-11-19 13:33 可樂_Thompson 阅读(307) 评论(0) 推荐(0)

HTML中多样化的设置表格

摘要：1. 设置表格内容对齐方式在HTML中通常通过align设置对齐方式，文字是： text-align ，表格是：align 如果将align属性设置给<table>标签，只能改变<table>整体的对齐方式，不会影响内容的对齐方式，如下图所示： <table class="one" align=" 阅读全文

posted @ 2019-11-19 13:29 可樂_Thompson 阅读(274) 评论(0) 推荐(0)

Flex布局的教程

摘要：注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 1.指定flex布局： .box{ display: flex; }行内元素.box{display: inline-flex;} 2.容器的属性： flex-direction：该属性决定主轴阅读全文

posted @ 2019-11-19 13:18 可樂_Thompson 阅读(116) 评论(0) 推荐(0)

官网中常见到的火箭导航的实现过程

摘要：1 // 当到某一位置显示侧边导航 2 $(document).scroll(function(){ 3 var scrTop = $(window).scrollTop(); 4 var n_t = $('body').height() * 0.1; 5 if(scrTop < n_t){ 6 $ 阅读全文

posted @ 2019-11-15 18:09 可樂_Thompson 阅读(668) 评论(0) 推荐(0)