随笔分类 - CSS
摘要：一、float概述 浮动（float）是CSS布局常用的一个属性。它可以左右移动，直至它的外边缘碰到包含框或另一个浮动框的外边框。 float被设计出来的初衷是用于文字环绕效果。如下代码： 效果如下： 浮动会脱离文档流，当一个元素浮动之后，不会影响到块级元素的布局而只会影响内联元素（通常是文本）的排
阅读全文
摘要：上一篇我模仿了抽屉网站，这一节我来对唯品会主页进行模仿。 我觉得写一个主页大概思路如下： 1、确定整体布局方式；(html框架布局) 2、针对每一块进行细化，尽量做到模块化。（css） 3、加上特效效果。（js） 一、整体效果图 二、实现细节 1、悬浮框 2、悬浮导航栏 3、hover效果 4、TO
阅读全文
摘要：一、效果图 前面对CSS基础知识有了一定的了解，是时候开始实战了！以下我对抽屉（https://dig.chouti.com/）主页进行模拟布局。 官方网站效果图： 模拟网站图： 二、实现步骤 1、整体布局（header、body、footer） 抽屉的首页主要分为三块：头部、网页内容、底部内容。
阅读全文
摘要：一、后台框架概述 我们在网上随便搜索后台框架，你会发现大部分都查不多。正所谓：好看的皮囊千篇一律，有趣的灵魂万里挑一。 第一个是H-ui，H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版采用源生html语言，完全免费，简单灵活，兼容性好让您快速搭建中小型网站后台。 第二款是响应式Bo
阅读全文
摘要：我们写python代码或者其他代码的时候，发现文件会越来越多，这时候你就觉得有必要把代码文件进行整理了。 对代码整理的整理主要思路： 1、按功能（比如：可执行程序文件、数据库文件、视图文件） 2、按类型（比如：html里面有js、css文件） 对于HMTL前端目录，我们大概可以按照以下结构进行划分：
阅读全文
摘要：实现效果图： 看上去是不是很屌的样子？其实实现起来主要就是用到了一个float，不难。 实现步骤：1、新建一个大div，300*30002、里面放5个小div，100*1003、将div定位
阅读全文
摘要：一、概述 hover伪类：在鼠标移到元素上时向此元素添加特殊的样式。比较普通的就是一个url，当你鼠标放上去后，会变颜色。 在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。 实例1：鼠标hover时，将内容框起来 原始效果： 鼠标悬停
阅读全文
摘要：一、三步搞懂箭头产生的原理 在前面的盒子模型一文中，我们已经知道了一个元素空间占位。为了弄明白箭头的产生，我们可以三步走： 第一步：设置一个div，然后给他设置样式：边框100px，上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100。 效果图如下： 第二步：我们可以看到中间一个正
阅读全文
摘要：一、概述 CSS 定位 (Positioning) 属性允许你对元素进行定位。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。 二、CSS 定位机制 CSS 有三种基本的定位机制：普
阅读全文
摘要：本系列入门知识的吸取大部分来自网页（w3c）和视频教学（淫角大王和精角大王）。由于之前零零散散学习了一些开发的基础知识，但是觉得不是很系统，心里没底，就像手里抓了一把珠子感觉随时都会掉落一样，所以决定把这些珠子用线串起来。本系列文章仅供像我一样入门级小白学习，大部分只是蜻蜓点水，如果要在某一个方面深
阅读全文
