- 博客(22)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 再接再厉
今天的成果今天考试！一口气做了三个页面，一个PC端+两个移动端，时间很紧都没时间恰饭。总体使用的浮动和flex布局比较多，然后PC端的尾部使用的是grid布局，我比较喜欢尝试这种新知识，但是真的麻烦，还不如一个个加浮动。第一阶段就结束了，感觉掌握了七八成，下周开始第二阶段了，希望自己能重点去学习JS，再不要逮着机会就碰手机，每天这么学时间过的也很快，马上到我讲PPT了，不知道讲啥好的话就讲我新疆吧(●’◡’●)...
2020-07-31 21:19:34
113
原创 grid布局+常见居中方式
grid 二维布局 网格布局.bx {display:grid}可以以px,百分比，fr为单位repeat() 第一个值是重复多少次，第二个值是要重复的值，用逗号隔开。1)重复 grid-template-columns:1fr 2fr 3fr2)水平 grid-template-rows: repeat(3,1fr);（等同于1fr 1fr 1fr）area区域3)划分 grid-template-areas 划分区域,grid的子项要用"grid-area"来指定区域例:grid
2020-07-29 22:47:04
11767
2
原创 CSS3完结，拼多多练习
1.景深perspective 视线的距离perspective: 1200px;(加在父元素上)transform:perspective(1200px); （在子元素中使用）2.3D呈现transform-style:preserve-3d;3.3D位移主要包括translateZ()和translate3d()translateZ() 让元素在3D空间沿Z轴位移4.3D旋转rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)5.CSS3动
2020-07-28 23:10:07
434
原创 CSS渐变+2D转换
一、CSS渐变1 线性渐变div { background:linear-gradient(to right, red , blue) }div { background: linear-gradient(to left top, red , blue); }线性渐变指沿着某条直线朝一个方向产生渐变效果，如下图是从红色渐变到蓝色。使用角度渐变div { background: linear-gradient(10deg, red, blue) }2 径向渐变径向渐变不同于线性渐变，线性渐变是
2020-07-27 22:06:51
127
原创 ‘外卖-我的’页面完成
‘外卖-我的’页面完成wode.html<!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-07-26 20:08:36
625
1
原创 美团移动端主页+订单界面
外卖订单界面美团移动端界面房事不利得找老中医html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width= , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e
2020-07-25 21:32:25
7026
7
原创 大众点评移动端网页
1.媒体查询结构(1)@media all and (min-width:320px) {div{ background-color:blue;}/表示设备宽度小于320px时就不执行蓝色背景了。/(2)@media only screen and (min-width: 300px) and (max-width: 640px) {/* 表示设备宽度到640px------300px之间显示桔色背景。 */div{background-color: orange;}2.Respons
2020-07-24 23:35:55
1300
原创 Flex布局
1.背景属性1.1. Background-origin 背景原点说明：指定background-origin属性应该是相对位置属性值：padding-box 背景图像填充框的相对位置 border-box 背景图像边界框的相对位置 content-box 背景图像的相对位置的内容框 注：默认值为：padding-box;1.2. Background-clip 背景裁切说明：background-clip 属性规定背景的绘制区域。属性值：border-box 背景被裁剪到边框盒。 pa
2020-07-23 23:35:55
350
原创 实现滑动按钮+CSS3笔记
今天用CSS3实现滑动按钮使用定位，圆角，::after伪元素选择器，相邻兄弟选择器来实现<!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-Compat
2020-07-22 22:32:51
815
原创 H5新增标签
**网页布局格式**<head>头部</head> <section>区域内容，在这里可以加入文章内容，侧边栏 <article>文章</article> <aside>侧边栏</aside> </section> <footer>底部</footer> H5新增input表
2020-07-21 23:34:33
178
原创 魅族网站开头
今天半日写出来的，感觉好慢，锚点定位真是磨了我好长时间再再复习一下1.定位relative 相对定位 当子级是absolute时，应该给父级一个relativeabsolute 绝对定位 要有父级，根据父级的定位而定位fixed 固定定位 固定在某一个位置，不会因为滚动条的滑动而改变位置static 静态定位absolute会脱离文档流，2.单行文本溢出显示省略号overflow-hidden;text-overflow:ellipsis;white-space: no
2020-07-20 22:40:46
153
原创 名孩库网站完成+内核
自习室呆了半天终于做的差不多了，底部导航栏就不写了。轮播图，要想让小点在轮播图内显示，要给它们的父级盒子相对定位relativeulli imgliulolli a href=”#img” liol盒子里的ul装照片，要让ul里的每个li都有自己的绝对定位absolute，然后ul是li的父级，所以给ul一个相对定位，要给父级盒子设置高度和overflow:hidden。目的是要让装小点的ol在轮播图中显示出来，所以要给ol绝对定位。ul li:target{ z-index:
2020-07-19 23:00:33
104
原创 明孩库网站开头
顶部导航栏害行，做的挺快，也没啥问题。红色导航栏问题多。。表格：给table和table里的td样式table ,table td {border:1px solid #ccc;border-collapse:collapse;}表格有3行每行7个单元格，要给每行th里一个class，然后用table .class td:nth-child(1){background: url(images/…png) no-repeat;background-position: -x -y; /在PS里
2020-07-18 22:40:55
93
原创 周末复习计划，前一周总结
一屏页面就是调整窗口的大小时，网页结构不会改变。首先给下面的大图片给个盒子，盒子里面装这个图片给html,body{W100%H100%}测量图片大小占总比的多少%，测量出来占比81%，那么高度就是81%，宽度是100%长截图太大，放个屏幕截图。伪元素选择符div::first-letter {/* 第一个文字 */color: red;font-size: 80px;font-weight: 900;} div::first-line{ /* 第一行
2020-07-17 22:19:33
457
原创 锚点定位+网页
轮播图鼠标点击小点后会换图片首先把所有图片放在一个div里面，设置div的宽高，和图片一样，然后overflow:hidden 将超出的部分隐藏，就会只显示一个图片了。用锚点定位，点击每个小点会转换图片，将小点我的做法：给父级一个position: absolute;，给ul一个position：relative，再分别设置它俩的位置，这样小点就不会被覆盖。老师做法：上面的图片用ul li做，下面的小圆点用ol li做，当一个链接（li）被锚点链接选中时，要执行的代码ul li:target
2020-07-17 15:14:37
206
原创 透明度+定位学习
一、调整透明度可以分两种方法1.opacity :0.3(范围是0~1)影响后代的透明度2.rgba（0-255，0-255，0-255，0-1）这三个是颜色 这是透明度二、堆叠顺序（z-index）在使用定位布局时，可能会出现盒子重叠的情况{z-index : 1}数字越大，盒子越靠上（正整数、0、负整数）定位的盒子需要写宽度：width：100%三、定位定位=定位模式+边偏移定位模式：position1.静态定位(static) :无定位2.相对定位 positi
2020-07-15 19:29:00
137
原创 千锋网站完工！品优购更新
一早上都在跟着做导航栏，虽然看着不咋样，但是确实挺拉跨，反正能做出来效果就行了！然后！千锋网站的底部也终于完工，在调整ul>li里面的span和a的距离时，可以把他俩display：block，转换成行内块元素，再调整他俩的padding-top和padding-bottom值。二维码直接用positive做的，给父级一个positive：relative，给寄几一个position：absolute；top:15px ;right=15px做完了看起来就感觉整挺好然后????继续开始整
2020-07-14 20:48:32
337
原创 今天学习了！
周一 真开心????下午半天自习时间做了张千峰培训的网页半成品，上手非常快，可能是总体比较简单，插入字体图标也很少，和同桌总结了ul li非常适用于nav导航，当鼠标划过导航会变颜色。如果li设定了宽度，那么“首页”这一栏就会很大，很不美观，可以给左边的logo给一个padding-right值，把多余的“挤出去”。做导航栏里的小边框可以给它一个div，长18px;宽1px;然后右边框设成白色。底部导航栏和底部备号地址明天再写。欢迎大家来千锋！！品优购项目暂时先放放…太难了细节太多了慢慢啃
2020-07-13 22:57:30
137
1
原创 品优购项目day01
首先测量大盒子的长宽后给它一个定位。大盒子里面分为以下三个盒子来做，给上面的大盒子一个position:relative;然后给下面的小盒子position:absolute；1.“品优购”logo的做法，需要在logo里加入h1，因为搜索引擎首先会搜索到h1，这样可以提权，然后整个图标加入链接，点击可以返回首页。最后把里面的品优购，字体改成0，font-size:0px; 品优购 2.search搜索框做法，还是用定位来做，大盒子已经
2020-07-11 17:39:30
175
原创 卧龙网站更新
nicebaby明天周六 还是上课做了一天，比以前稍微熟练，事实证明加了版心好看很多，下周老师会详细讲解这个网页的步骤，我还有 字体图标，查询图标等细节问题没有搞清楚，还有<a href"#"> 为啥会点不了呢，明天问潇哥看到女朋友做的虾粥给爷整饿了ˋ( ° ▽、° )...
2020-07-10 20:55:46
1640
1
原创 *学习前端前三天总结*
**学习前端前三天总结**1.标签及选择器标签选择器 p div li，，，id选择器 #class选择器 .通配符选择器 *{}伪类选择器 a:hover标签选择器权重是1class选择器权重是10id选择器是100内联样式表的权重是1000相同的属性会覆盖，不同的属性都会执行继承的属性 权重为0如果给元素本身设置了 和继承的相同的属性，那么给元素的设置会把继承的 覆盖了2.字体图标1.申明(注意路径)2.复制粘贴图标后<span>??图标?&
2020-07-09 22:13:17
230
Meituan mobile terminal_index.rar
2020-09-15
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人