html + css
关注
分享
扫一扫
爱生活，爱编程
在以后的日子里，我会不断的写博客，争取拿下大前端
展开
-
css 复习01
这个写起来简单多a 是行内元素， 宽度由内容撑开，为了可以设置高度，所以转成了行内块，为了让宽度变大，由于字数不一样，所以不可以直接给宽度，直接给padding 撑开就行了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca..原创 2021-02-20 10:55:37 · 133 阅读 · 1 评论 -
小三角的简单做法
废话少说，直接代码：<!DOCTYPE html><html lang="en"><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"> ..原创 2020-10-30 20:28:15 · 211 阅读 · 0 评论 -
购物车小精细样式
就这个 <div class="jingpin"> <i class="shopcart"></i> 我的购物车 <span class="rightmore"> ></span> <i class="count">8</i> </div>布局的话：.jingpin { p..原创 2020-10-28 09:45:06 · 195 阅读 · 0 评论 -
品优购定位的使用
在实际开发过程中，定位是必须使用的一个大盒子，然后分几个小盒子，全部定位实现logo 的写法我大概修改了下写法多了几个标签，但是我感觉还是不放心，我得看下京东，淘宝咋写的？京东我打不开，淘宝啥的，我发现，直接放一个img 可见技术人员发生变化了——————————————————————————————行，这么写没多大问题！——————————————————————好，这么写主要是为了提权估计!______________________..原创 2020-10-28 08:53:49 · 158 阅读 · 0 评论 -
品优购的学习
为了彻底搞定css 布局，所以重新学习下该项目盒子模型， 浮动，定位我前段时间又复习了一遍，一遍一遍效果废话少说看下我昨天写的一点代码，温故而知新大的布局，就一左边一右浮动布局左边是ul 里有两个li li >a右边，就是 ul 里面有许多Li红色部分是个盒子主要是模拟分割线这个用到了iconmoon 的字体图标用到字体库的时候要参考例子写！要复制的部分其他设置字体就行了这里重点强调的是line-height ..原创 2020-10-27 11:57:59 · 354 阅读 · 1 评论 -
行高=高度，让字体垂直居中的原理
原理很简单， 就是 文字的高度+ 上下高度= 高度 height上高度= 下高度若行高> 高度，那么自然 上下的高度要高些，然后文字就往下走若行高<高度，那么 上下的高度就小写，文字，自然往上走若一样，则上下高度也一样，正好居中显示...原创 2020-10-18 19:31:36 · 1503 阅读 · 1 评论 -
行，苏宁首页我给大家分析分析
这是我做的，我们一个个分析，第一个非常简单，flex 布局，justify-content : space-between; align-items:center; <div class="header"> <a href="#"> <img src="https://image2.suning.cn/uimg/cms/img/157199320847433454.png" alt=""> <...原创 2020-09-28 10:26:56 · 778 阅读 · 0 评论 -
rem 实战
在写布局之前，我们用 vscode 安装几个插件1， easyless 来自动编译 less文件变成 css2, cssrem 会将px 转成 rem这个要设置 基本值（ 750px 设计稿的话，不用flexiable 我们就设置为 50px ) 用的话就设置为 75px;设置基准值：需要重启vscode 才生效！第一种适配方案：rem实际开发适配方案1①假设设计稿是750px②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等...原创 2020-09-27 21:22:36 · 311 阅读 · 0 评论 -
阶段性的总结和下一步行动计划
我们要搞定 rem + flexiable + less 移动端的布局，彻底搞定它，打通css 技能！这里要强调的就是 ，会用https://www.mockplus.cn/这个网站，因为这里有前端代码自动化，最主要的是有切图！这个我们要搞定。 UI设计师，拿到psd 文件，我们就把它上传上去，然后 可以参考着写代码！这样就好多了！行，前端我们就暂时，这么打算的，另外加强vue 的练习，就是 总结下电商类项目，elementui 突击下！axios 复习下基本到这，就..原创 2020-09-26 20:21:56 · 760 阅读 · 0 评论 -
绕来绕去，我发现还是得用php
node 也可以用，但是部署起来，我不太会啊， 要是Php 到时可以随便部署！废话少说，我们先测试！服务器好了，我们就可以用ajax 测试了，为了防止跨域问题，我们将一个页面放入网站内：axios.html 和 index.php 都在一个网站内！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo原创 2020-09-25 21:19:52 · 365 阅读 · 0 评论 -
es6 要刷的api 文档备注下
https://wohugb.gitbooks.io/ecmascript-6/content/docs/object.html原创 2020-09-25 16:46:05 · 155 阅读 · 0 评论 -
api 接口简单调用
互联网的资源是很丰富了，我又发现了个网站，提供api ,供我们联系用https://www.showapi.com/我注册好之后注册完之后，提供了 appid和 key<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc.原创 2020-09-24 20:12:45 · 5786 阅读 · 1 评论 -
em rem 的区别
这个很简单，rem root em 这个是相对于html 元素中字体大小设定的html{ font-size: 12px} 那么此时10rem == 10 * 12 = 120pxem 相对于父元素字体大小设定的，当然假如自身有 font-size属性，则相对于自身设定举个列子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta.原创 2020-09-24 10:46:04 · 166 阅读 · 0 评论 -
媒体查询的复习
以前也学过这个玩意，可惜没有真正弄懂，今天又学习了一篇写个demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> .原创 2020-09-24 10:35:08 · 100 阅读 · 0 评论 -
从今天开始，我们就要补移动端知识，顺带着复习js
flex 是必须掌握的，我记得有个阮一峰的百度第一：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html我们挨着牌的是实验下：https://www.kancloud.cn/explore原创 2020-09-23 12:21:22 · 115 阅读 · 0 评论 -
做移动端布局，css 基本的样式
为了复习，我们总要摘抄些东西我觉得吧，你啥也不用看，就学习https://m.jd.com/看人家咋写的，你模仿下来，就很牛了！行，我们还是摘抄下自己的index.cssbody { width: 100%; min-width: 320px; max-width: 640px; margin: 0 auto; font-size: 14px; font-family: -apple-system, Helvetica,...原创 2020-09-22 22:32:54 · 1032 阅读 · 0 评论 -
无序列表风格（为啥这么简单还写，让大家放松下）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul { .原创 2020-09-19 09:28:02 · 193 阅读 · 0 评论 -
人民币符号的打印方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p[title~=h...原创 2020-09-19 09:17:46 · 724 阅读 · 0 评论 -
css 背景的复习
https://www.w3school.com.cn/css/css_background.asp大家可以去看，我要强调是一个属性 就是我圈起来的，非常重要，就是点对点，然后贴到上面就行了！原创 2020-09-19 09:07:28 · 78 阅读 · 0 评论 -
jQuery 使用的时候，不要用es6的函数写法，否则很容易出错
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <div class="box"> <p>ddsddsdf dsfdsfds </p> <button>bind</button> <input type="t..原创 2020-09-18 15:51:17 · 1036 阅读 · 0 评论 -
做个总结，我们继续
这个css3 我大概过了一遍，https://www.w3school.com.cn/css3/css3_user_interface.asp现在已经初步对transition @keyframes + animation + 2d 3d 变化， 有一个初步的回顾，当然，那个3d 井深啥的， 3d 效果还没有复习，不过不着急，我们要按照我们预定的脚步前进：https://blog.youkuaiyun.com/qq_15009739/article/details/108646023我们去找石川..原创 2020-09-18 10:24:24 · 93 阅读 · 0 评论 -
box-sizing 经常使用
在我们以前的盒子模型中，padding 会撑开盒子这样我们写布局，还要手动去计算宽高，为了方便，css3 提供了box-sizing : border-box ； 就行了，css3 的盒子模型反正你做移动端的时候， flex 布局时，这个经常用！行， 给大家一个地址，没事看一看！https://www.w3school.com.cn/css3/css3_user_interface.asp...原创 2020-09-18 10:19:43 · 187 阅读 · 0 评论 -
animation + @keyframes
这两个是绝配啊， 我去 可以定义动画，然后开始执行，重点是可以配合 transform 一起使用，你想咋定义都行！我觉得一些展示页面可以这么写，当然有可能配合css ,肯定不难！<!DOCTYPE html><html><head> <style> div { position: absolute; left: 0; top: 0;原创 2020-09-18 10:12:53 · 321 阅读 · 0 评论 -
transition 加过渡效果
这个我的理解就是以前用js 写动画，现在可以用css 做动画index.html<!DOCTYPE html><html><head> <style> div { width: 300px; height: 200px; background-color: #666; border: 1px solid #CCC;原创 2020-09-18 09:55:44 · 708 阅读 · 0 评论