前端水獭的博客

写在前面最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。亮起来按钮<div id="neon-btn"> <button class="btn one">Hover me</button> <button class="btn two">Hover me</button> <button cl

CSS学习笔记关于float浮动最近期末忙着期末的大作业和一些课程设计，在前端知识的学习上投入的精力少了些，整理一些css和js的简单的学习笔记以供巩固。首先css三种传统的布局方式有：1.标准流：标签按照规定的默认方式排列，例如块级元素，一行放一个，div,hr,p,(h1~h6)ul,dl等。行级元素则从左到右，碰到父元素边缘就自动换行，a,i,em,span等。2.浮动官方解释为：float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘及包含块或另一个浮动框的边缘。3.定位为什

做一个天气查询效果图html+css部分html先上代码再分析<div class="app" id="app"> <div class="img"> 知 天 气 </div><div class="input-item"> <input type="text" v-model="city" @keyup.enter="searchWeather" class="input" placeholder="输入要查询的天气"/&gt

两大部分首先我们先看看小米首页左侧导航栏的样子首先是左侧灰色部分，不难分析出我们应该使用的是列表元素进行编写。而右侧很明显也应该使用到的列表元素进行设计。不多说直接开始左侧灰色部分因为使用纯css写，代码稍显复杂，其实所有的li标签可以通过vue框架v-for进行遍历渲染到页面上，因为是基础学习 就使用最基础的方法进行。先上代码<!-- 导航栏区域 --><div class="nav"><!-- 左侧导航区域 --><ul class="na

一些基础概念在页面的编写中我们不但需要经常借助开发文档，也需要比较扎实的基础，整理以下关于CSS中的小知识点px，em，rem1.px就是pixel的缩写，pixel即像素，它不是自然界的长度单位。那么他就是一个相对的单位，px是相对于显示器屏幕分辨率而言的。2.em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em常用于设置文本首行缩进等.etc {font-size:20px;text-indent: 1em;//文

目录爱心的组成三部分的CSS阴影的制作动画效果执行动画爱心的组成使用CSS画一个爱心首先我们可以把爱心分解成三部分，分别是两个圆，加上一个菱形。再通过他们之间的层叠关系将爱心画出来三部分的CSS整个框起来的div.love { width: 500px; height: 500px;/* border: 1px solid black; */ position: relative; left: 500px; opacity: 0; } }两个圆形加一个矩形，两个圆许多