![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
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 · 105 阅读 · 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 · 191 阅读 · 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 · 168 阅读 · 0 评论 -
品优购定位的使用
在实际开发过程中,定位是必须使用的一个大盒子,然后分几个小盒子,全部定位实现logo 的写法我大概修改了下写法多了几个标签,但是我感觉还是不放心,我得看下京东,淘宝咋写的?京东我打不开,淘宝啥的,我发现,直接放一个img 可见技术人员发生变化了——————————————————————————————行,这么写没多大问题!——————————————————————好,这么写主要是为了提权估计!______________________..原创 2020-10-28 08:53:49 · 138 阅读 · 0 评论 -
品优购的学习
为了彻底搞定css 布局,所以重新学习下该项目盒子模型, 浮动,定位我前段时间又复习了一遍,一遍一遍效果废话少说看下我昨天写的一点代码,温故而知新大的布局,就一左边一右浮动布局左边是ul 里有两个li li >a右边,就是 ul 里面有许多Li红色部分是个盒子主要是模拟分割线这个用到了iconmoon 的字体图标用到字体库的时候要参考例子写!要复制的部分其他设置字体就行了这里重点强调的是line-height ..原创 2020-10-27 11:57:59 · 335 阅读 · 1 评论 -
行高=高度,让字体垂直居中的原理
原理很简单, 就是 文字的高度+ 上下高度= 高度 height上高度= 下高度若行高> 高度,那么自然 上下的高度要高些,然后文字就往下走若行高<高度,那么 上下的高度就小写,文字,自然往上走若一样,则上下高度也一样,正好居中显示...原创 2020-10-18 19:31:36 · 1367 阅读 · 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 · 748 阅读 · 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 · 282 阅读 · 0 评论 -
阶段性的总结和下一步行动计划
我们要搞定 rem + flexiable + less 移动端的布局,彻底搞定它,打通css 技能!这里要强调的就是 ,会用https://www.mockplus.cn/这个网站,因为这里有前端代码自动化,最主要的是有切图!这个我们要搞定。 UI设计师,拿到psd 文件,我们就把它上传上去,然后 可以参考着写代码!这样就好多了!行,前端我们就暂时,这么打算的,另外加强vue 的练习,就是 总结下电商类项目,elementui 突击下!axios 复习下基本到这,就..原创 2020-09-26 20:21:56 · 719 阅读 · 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 · 319 阅读 · 0 评论 -
es6 要刷的api 文档备注下
https://wohugb.gitbooks.io/ecmascript-6/content/docs/object.html原创 2020-09-25 16:46:05 · 127 阅读 · 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 · 5709 阅读 · 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 · 145 阅读 · 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 · 86 阅读 · 0 评论 -
从今天开始,我们就要补移动端知识,顺带着复习js
flex 是必须掌握的,我记得有个阮一峰的百度第一:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html我们挨着牌的是实验下:https://www.kancloud.cn/explore原创 2020-09-23 12:21:22 · 97 阅读 · 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 · 982 阅读 · 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 · 166 阅读 · 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 · 669 阅读 · 0 评论 -
css 背景的复习
https://www.w3school.com.cn/css/css_background.asp大家可以去看,我要强调是一个属性 就是我圈起来的,非常重要,就是点对点,然后贴到上面就行了!原创 2020-09-19 09:07:28 · 61 阅读 · 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 · 983 阅读 · 0 评论 -
做个总结,我们继续
这个css3 我大概过了一遍,https://www.w3school.com.cn/css3/css3_user_interface.asp现在已经初步对transition @keyframes + animation + 2d 3d 变化, 有一个初步的回顾,当然,那个3d 井深啥的, 3d 效果还没有复习,不过不着急,我们要按照我们预定的脚步前进:https://blog.csdn.net/qq_15009739/article/details/108646023我们去找石川..原创 2020-09-18 10:24:24 · 74 阅读 · 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 · 140 阅读 · 0 评论 -
animation + @keyframes
这两个是绝配啊, 我去 可以定义动画,然后开始执行,重点是可以配合 transform 一起使用,你想咋定义都行!我觉得一些展示页面可以这么写,当然有可能配合css ,肯定不难!<!DOCTYPE html><html><head> <style> div { position: absolute; left: 0; top: 0;原创 2020-09-18 10:12:53 · 286 阅读 · 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 · 678 阅读 · 0 评论