前端
fxnfk
这个作者很懒,什么都没留下…
展开
-
没有宽度的固定定位盒子居中对齐
因为盒子没有宽度,所以不能用margin: 0 auto;可以指定left: 50%,然后通过css3移动属性transform: translateX(-50%)来实现。/* 搜索模块 */.search-index { position: fixed; width: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0;原创 2021-03-02 15:08:43 · 483 阅读 · 0 评论 -
float还是position?
上图是jd手机版的搜索栏。要实现上面的效果为什么用定位而不是浮动呢?要实现的效果是并排三个div,左右宽度都是40px,中间盒子占满剩下的宽度。如果用浮动,并且给左右盒子指定宽度,中间盒子没有办法占满剩下的宽度,而是根据内容大小而定,如下图所示。如果中间的盒子指定宽度100%,就会被挤下去,如下图所示:所以就不能用浮动,而应该用定位来做左右盒子用绝对定位不占用位置,中间盒子在标准流中,占满一行,左右用margin空出来固定宽度给左右两个盒子。css代码如下:/*搜索*/.原创 2021-02-24 15:36:59 · 149 阅读 · 0 评论 -
页面布局
1、固定宽度布局 设置宽度,不要设置长度,不要设定包含的块的宽度,让它填满容器。2、流动布局3、弹性布局一个很乱的例子: 整个容器占页面的90%宽,左右两个栏是固定宽度,中间宽度自适应。html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...原创 2018-05-19 18:53:47 · 472 阅读 · 0 评论 -
css display属性
display属性值有block和inline。分别代表块级元素和行内元素。块级元素有:段落、标题、列表等。在浏览器中上下堆叠显示。 行内元素有:a/span/img。并排显示。...原创 2018-05-19 20:05:57 · 665 阅读 · 0 评论 -
css3
w3cschool css w3cschool css3样式三种插入方法: 外部样式表:&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt; 内部样式表:&lt;style type="text/css"&gt原创 2018-05-14 17:00:21 · 133 阅读 · 0 评论 -
css 多级菜单
多级菜单html:&amp;amp;amp;lt;!doctype html&amp;amp;amp;gt;&amp;amp;amp;lt;html&amp;amp;amp;gt;&amp;amp;amp;lt;head&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&原创 2018-05-21 17:37:09 · 1664 阅读 · 0 评论 -
css 弹出层
弹出层:鼠标移动到图片上,会有一个弹出层显示在上面。 html:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&原创 2018-05-21 18:55:47 · 1682 阅读 · 0 评论 -
响应式设计
<meta name="viewport" content="width=device-width; maximumscale=1.0" />按照屏幕宽度来演示网页,不要缩小网页。媒体查询:两种方式 1、@media规则@media screen and (max-width:568px) { // 只要屏幕宽度不大于568px时应用}2、<link&...原创 2018-05-21 19:40:45 · 172 阅读 · 0 评论 -
安装npm和cnpm
参考:https://www.cnblogs.com/yominhi/p/7039795.html首先安装node.js http://nodejs.cn/下载zip,直接解压: 将这个路径添加到环境变量PATH中,测试:npm -v 要先配置npm的全局模块的存放路径以及cache的路径:npm config set prefix "E:\nodejs\node_glo...原创 2018-05-16 10:48:44 · 3374 阅读 · 0 评论 -
vue调试工具——vue tools安装
参考:https://www.cnblogs.com/yuqing6/p/7440549.html从github下载zip:https://github.com/vuejs/vue-devtools,解压。 在vue-devtools目录下安装依赖包:cnpm install修改manifest.json文件 在这个目录下:E:\迅雷下载\前端\vue\vue-devtools...原创 2018-05-16 11:11:22 · 6379 阅读 · 0 评论 -
css定位 position
对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。 position属性有下面4个值: static、relative、absolute、fixed默认是static,安装出现的顺序排列在文档流中。relative是相对于原来在文档流中的位置,可以通过top/left/bottom/right设置相对位置。absolute是把元素彻底从文档流中拿出来,脱离了文档流,...原创 2018-05-19 15:19:16 · 148 阅读 · 0 评论 -
围住浮动元素的方法 float clear
1、 overflow:hidden的意思是1、防止包含元素被超大内容撑大;2、迫使父元素包含其浮动的子元素。 2、 父元素也设置浮动,就会包围住浮动的子元素。 注意,父元素的后面的元素,可能会浮上来,要用clear: both清除。 3、 给父元素的最后添加一个非浮动的子元素,然后清除该子元素。&amp;lt;div class=&quot;clear_me&quot;&amp;gt;&amp;lt;/di原创 2018-05-19 13:22:23 · 225 阅读 · 0 评论 -
bootcdn
BootCDN 稳定、快速、免费的前端开源项目 CDN 加速服务 共收录了 3375 个前端开源项目可以在里面找到感兴趣的前端项目,比如:normalize。原创 2018-05-19 12:02:47 · 891 阅读 · 0 评论 -
node webpack vue
表严肃Intell IDEA里面有terminal终端,可以输入下面的命令:node -v // 查看node版本号npm init -y // 将当前目录初始化为一个node项目,会生成一个package.jsonnpm i webpack --save-dev // 安装webpack包,i代表installnode b.js // 执行b.js文件node模块化,每个模块都...原创 2018-05-18 13:59:50 · 295 阅读 · 0 评论 -
sass的嵌套和变量
sass视频sass 是一种css预处理语言。 用一门编程语言,为css增加了一些编程特性,用编译器将写好的sass文件编译为css文件。便于书写。嵌套、变量安装: sass基于ruby,要先按照ruby。ruby的仓库gem。切换gem源:gem sources --remove https://rubygems.org/ gem sources -a https:...原创 2018-05-18 15:10:25 · 617 阅读 · 0 评论 -
sass的导入@import
视频嵌套进阶 变量进阶 sass导入 sass继承css3的@import,在css样式表之中使用绝对或相对地址指定导入的外部样式表文件。 如:@import url(&quot;style/index.css&quot;);css3中的@import可能会造成延迟加载,有的地方没有样式。sass @import解决了这个问题,它能将多个scss合并为一个。 如:@import &quot;style...原创 2018-05-18 16:07:23 · 20933 阅读 · 1 评论 -
sass媒体查询与嵌套
在scss中媒体查询@media可以嵌套在选择器中。 原来是写在外面的。这样就可以在一个css文件中进行相应式了。 例子: c.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scss media&am原创 2018-05-18 16:40:35 · 6134 阅读 · 0 评论 -
scss 继承extend
@extend 选择器 d.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>scss extend继承</title> <link rel="st原创 2018-05-18 16:49:13 · 4999 阅读 · 0 评论 -
sass 混合器 @mixin 混合器参数
定义大段的样式复用永mixin,一行样式的复用就变量。定义用@mixin:@mixin background-size { background-size: 100%; -moz-background-size: 100%; -webkit-background-size: 100%; -o-background-size: 100%;}使用,用@include...原创 2018-05-18 17:57:48 · 953 阅读 · 0 评论 -
原子css
三种预处理器: Less Sass stylus原创 2018-05-18 18:19:39 · 624 阅读 · 0 评论 -
css页面自适应
像素 viewport css单位 ps切图 浮动与display像素在pc端,一个px像素,就是一个物理像素。但手机端是不一样的。devicePixelRatio = 物理像素 / css像素1个css像素,可能对应多个物理像素。viewportviewport 980px,如果页面较小显示不了,可以缩小,或者加滚动条,但这两种体验都不会,于是有了下面...原创 2018-05-19 09:17:26 · 2281 阅读 · 0 评论 -
vue2
张果老师的博客 视频 vue githubvue安装:直接在官网,文档,安装下找到js文件下载。 Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。双向绑定MVVM模型、视图&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &l原创 2018-05-19 11:57:37 · 138 阅读 · 0 评论 -
html5
Intell IDEA这个IDE超好用HTML5 XHTML CSS3 JAVASCRIPT JQUERY: JQUERY-UI/JQUERY-MOBILE原创 2018-05-11 16:16:07 · 203 阅读 · 0 评论