HTML+CSS基础布局
关注
分享
扫一扫
油菜花666
致力修炼成为一个二逼女青年的路上。。。
展开
-
用css画五角星
css技巧原创 2023-08-10 11:19:29 · 1833 阅读 · 0 评论 -
圣杯布局和双飞翼布局
<!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-Com...原创 2019-04-29 09:17:38 · 112 阅读 · 0 评论 -
css3烟花效果
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style> * { -原创 2019-01-15 14:39:37 · 2466 阅读 · 1 评论 -
边框内圆角（inset-rounding）
如下图所示边框内圆角：这种其实也不难实现：可以使用两个便签，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,原创 2018-11-20 14:36:16 · 194 阅读 · 0 评论 -
img-div塌陷
问题1：描述，如下面图片显示的结果，当图片大小高度不一的时候，就会出现如图所示的问题：问题2：当容器高度依靠内容撑开，并且需要做到自适应宽高的时候，解决方法可以巧用margin/padding的百分比实现高度自适应，达到占位，避免避免闪烁；例如下面：<!DOCTYPE html><html lang="en"><head> <me...原创 2018-11-12 16:43:42 · 703 阅读 · 0 评论 -
canvas的基础使用
1.canvas是HTML5元素，作为图形容器，通过使用脚本（通常是Javascript来完成）来完成图形的绘制； canvas默认没有边框和内容，在网页中就是一个矩形框；下面是canvas的简单案例： <canvas id="myCanvas" width="910" height="766" style="border: 1px solid #f50;"><...原创 2018-11-09 16:36:52 · 155 阅读 · 0 评论 -
多重边框
多重边框：1、可以使用box-shadow来编写：例如box-shadow: h-shadow v-shadow blur spread color inset/outset;其中： h-shadow ------ 水平阴影位置 v-shadow ------ 垂直阴影位置 blur ------ 模糊的距离 spread --------- 阴影...原创 2018-10-20 16:43:23 · 125 阅读 · 0 评论 -
纯CSS的导航栏Tab切换方案
1、使用：target伪类选择器以及兄弟选择器的使用~:target 是 CSS3 新增的一个伪类，可用于选取当前活动的目标元素。当然 URL 末尾带有锚名称 #，就可以指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。它需要一个 id 去匹配文档中的 target 。使用:target伪类需要html锚点，以及锚点对应的html结构，例如下面a标签的...原创 2018-10-17 18:06:34 · 3052 阅读 · 0 评论 -
等高多列布局
方法一：使用flex布局方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2018-10-16 23:02:27 · 130 阅读 · 0 评论 -
半透明边框
1、假设我们给一个容器设置一层白色的背景和一道半透明白色框：那么首先我们可能会这么做：background-color: #fff;border: 10px solid hsla(0, 0%, 100%, .5);然而，效果却不理想：但是幸好有css3：只要加一条background-clip：padding-box;就可以实现效果；延伸：上面效果的实现，则...原创 2018-10-19 12:08:24 · 151 阅读 · 0 评论 -
css技巧之左边竖条的实现
单标签，左边竖条的实现，尽可能多的写出实现方式（只使用一个标签，不考虑浏览器的兼容性）对于一个单标签如何合计算上伪元素:before和:after的话，应该算是有三个标签的:那么对于下图的效果，单标签如何实现呢？<div class="vertical_line"></div>1、使用border-left实现：.vertical_line {...翻译 2018-10-15 22:40:52 · 2500 阅读 · 0 评论 -
BFC理解
css中的BFC是什么呢？1、概念：BFC（Block Formatting Context）格式化上下文，是web页面中盒模型布局的css渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。2、形成BFC的条件浮动元素，float除none以外的值； 定位元素，position（absolute,fixed）； display为一下其中的值inline-block, t...翻译 2018-10-15 17:09:20 · 160 阅读 · 0 评论 -
response.css
/* ------------------------------------------------------------------------ *//* Grid/* ------------------------------------------------------------------------ *//* Desktop */@media only screen ...原创 2018-09-18 23:13:52 · 1643 阅读 · 0 评论 -
css布局技巧
1、自定义下拉框如何实现滚动条(下拉两个属性的组合则可以实现)：div { max-height: n; overflow-y: auto;}2、尽量少使用overflow：hidden来清楚浮动，因为有写情况下会把要显示的内容给截断了；清楚浮动可参考bootstrap源码的清楚浮动的方法；.clearfix:before, .clearfix:after { displ...原创 2018-10-15 15:59:34 · 149 阅读 · 0 评论 -
修改placeholder文字颜色
::-webkit-input-placeholder { /* WebKit browsers */ color: #fff;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff;}::-moz-placeholder { /* Mozilla Firefox 19+ */ col...原创 2018-06-04 15:53:54 · 3093 阅读 · 0 评论