css
关注
分享
扫一扫
文章平均质量分 59
才不是小弱鸡
一起学习~
展开
-
携程移动端静态页面仿写
0x00 写在最前 这次并没有完全复刻，首先是顶图用svg做遮罩层的部分没做，然后是页脚也用到了svg，这部分也没做，之后学习了svg可能会重新更新一下本博客吧 携程移动端网址m.ctrip.com0x01 HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widt...原创 2020-10-14 09:02:30 · 1118 阅读 · 0 评论 -
移动端布局day02
0x00 flex布局 flex布局为弹性布局，可以为任意盒子指定原创 2020-10-13 14:17:09 · 103 阅读 · 0 评论 -
京东移动端仿写
0x00 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="原创 2020-10-10 09:10:01 · 555 阅读 · 3 评论 -
移动端布局day01
0x00 视口 移动端有三种视口，第一种是布局视口，它将页面宽度设为980px，未做移动端的网页会自动缩放为980px，所以很多网页我们打开看到的都是缩小了的。第二中是视觉端口，也就是用户看到的视口；第三种视口是理想视口，需要通过meta视口标签来设置布局视口来使其和理想视口宽度一致。 meta视口标签0x01 二倍图 因为像素比的原因，pc网页的图片在移动端会被放大，具体放大多少倍看设备，所以在准备图片时一般会准备更大的图片，比如宽高都为两倍的图片，然后指定大小为正常...原创 2020-10-10 09:05:36 · 97 阅读 · 0 评论 -
3d导航栏
0x00 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="topBar"> <img src="img/baidu.png" class="logo">原创 2020-09-29 10:47:30 · 566 阅读 · 0 评论 -
css查漏补缺day07
0x00 tranform translate（）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> </div></body><style...原创 2020-09-25 17:37:08 · 142 阅读 · 0 评论 -
css查漏补缺day06
0x00 h5新增语义标签 ie中需要将其转换为块元素0x01 H5新增多媒体标签 video标签 audio0x02 h5新增表单属性 input0x03 css3新增特性 属性选择器，可以根据属性选择元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2020-09-25 09:25:57 · 203 阅读 · 0 评论 -
css实现京东的价格标签
0x00 京东效果图0x01 原理及代码 京东这个实质上是分为了三个部分，左边盒子中间盒子右边盒子 这个效果主要是通过中间盒子来实现，中间盒子的代码如下原创 2020-09-24 14:37:22 · 841 阅读 · 0 评论 -
图片底部的空白缝隙的消除办法
0x00 问题实例 有时候在div中设置图片时会发现图片底部存在一个空白缝隙，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> <img src="tes...原创 2020-09-23 15:10:18 · 650 阅读 · 0 评论 -
css查漏补缺day05
0x00 css三角<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div class="box"> </div></body><style> .box {原创 2020-09-24 14:30:16 · 202 阅读 · 0 评论 -
css精灵图技术
0x00 为什么要用精灵图sprites 网页所使用的小图标很多，如果分开储存，则会多次向服务器发送请求，增大服务器的负载，降低页面的加载速度。0x01 精灵图原理 精灵图主要针对背景图片，将多个背景图片整合到一张图片中 精灵图的本质就是通过bgc-position来移动图片位置，达到显示想要的背景图片的效果 因此，使用精灵图需要精确测量各背景图片位置...原创 2020-09-23 11:26:23 · 269 阅读 · 0 评论 -
css查漏补缺day04
0x00 定位 相对定位不脱标，偏移量是根据本身来移动的； 绝对定位在移动位置的时候，是相对它的祖先元素来移动的。当没有祖先元素或者祖先元素无定位时，以document为祖先元素 当祖先元素有定位时，则已最近的有定位的祖先元素来进行偏移。 绝对定位脱标，不占有原有的位置 当子元素需要用绝对定位时，父元素需要用相对定位 固定定位fixed也是脱标的，可以看成特殊的绝对定位 fixed的元素一般left和margin-left配合使用，可以做...原创 2020-09-22 17:13:57 · 117 阅读 · 0 评论 -
css查漏补缺day03
0x00 盒子模型 边框简写没有顺序border: 1px solid red; border-collaspe属性表示绘制表格边框的格式border-collapse: collapse; // 表示相邻边框合并 padding的复合写法原创 2020-09-22 10:50:22 · 152 阅读 · 0 评论 -
块元素塌陷问题解决方案
0x00 嵌套块元素塌陷问题复现 首先是基础代码<body> <div class="father"> <div class="son"> </div> </div></body><style>.father { width: 400px; height: 400px; background-color: black;}.son { width: 200px...原创 2020-09-21 10:40:23 · 427 阅读 · 0 评论 -
css查漏补缺day02
0x00 链接伪类选择器 链接伪类选择器一定要严格按照LVHA的顺序声明。否则可能无法生效，:link; :visited; :hover; :active; 因为a有默认样式，最好项目中给a单独指定样式0x01 元素显示模式 块元素 块元素独占一行 可以设置宽度高度内外边距 宽度默认为父元素的100% 是一个盒子，里面可以放行内或块级元素 另外，文字类元素里不能使用块级元素...原创 2020-09-17 17:33:25 · 135 阅读 · 0 评论 -
css查漏补缺day1
0x00 今日随笔 类选择器命名习惯 默认字体与大小 谷歌浏览器默认字体为微软雅黑，默认字体为16pxp { font-weight: bold; // font-weight设置文字粗细 font-weight: 700; // 可以直接设置数字，表示粗细，400为normal font: font-style font-weight font-size/line-height font-family // font的复合属性，顺序不能更改，f...原创 2020-09-17 14:52:05 · 125 阅读 · 0 评论 -
关于float引起的定位问题
0x00 遇到的问题 前几天，在编写自己的网站时遇到了一个定位问题，问题如下本站热门的容器，定位本应该在本站热门那里，而这里定位居然跑到上面去了。0x01 float的一个特性 当容器被直接定义了float属性后，该容器的高度将变为0.0x02 该问题的解决办法 这里我仔细检查了代码，果然在本站热门上面的轮播图容器中发现了直接定义在容器里面的floa...原创 2019-07-07 11:46:39 · 518 阅读 · 0 评论 -
CSS计数器的高级应用--@counter-style的使用
0x00 简介@counter-style是一个 CSS at-rule ，它让开发者可以自定义counter的样式。一个 @counter-style规则 定义了如何把一个计数器的值转化为字符串表示。0x01 语法@counter-style <counter-style-name> { system: <counter system> ...原创 2018-10-30 10:24:14 · 1062 阅读 · 0 评论 -
text-shadow的一些骚操作
首先是多重阴影.shadow3 { text-shadow: 1px 1px 1px #666, 3px 3px 8px black; } 效果如下然后是3d效果的实现.shadow9 { text-shadow: 0 1px #808d93, -1px 0 #c...原创 2018-10-27 10:32:04 · 5141 阅读 · 0 评论