css
Ritchie___
这个作者很懒,什么都没留下…
展开
-
使用css给div添加一些几何元素背景
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...原创 2020-02-29 10:33:16 · 460 阅读 · 0 评论 -
css实现圆形白底头像框
代码 <style> body { background-color: #f1f3f4; } img { margin: 30px; height: 100px; width: 100px; border-radius: 50%; padding: 3px; backgroun...原创 2020-02-24 09:49:15 · 1522 阅读 · 0 评论 -
padding属性的一些用法
移动端正方形(使用视口单位vw也可实现该效果)菜单图标选择器图标代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...原创 2020-02-16 21:34:50 · 546 阅读 · 0 评论 -
使用伪元素选择器构建标题左右特殊样式
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...原创 2020-02-16 21:31:35 · 249 阅读 · 0 评论 -
使用resize属性控制元素可拉伸
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...原创 2020-02-14 15:24:01 · 416 阅读 · 0 评论 -
两列布局的多种方式实现
使用浮动设置两列布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...原创 2020-02-14 13:08:33 · 436 阅读 · 0 评论 -
使用css变量动态换肤
结构 <div class="header">header</div> <button onclick="handleChange()">change theme</button>样式 <style> :root { /* :root伪类选择器表示文档根元素<html> */ ...原创 2020-02-14 12:59:36 · 374 阅读 · 0 评论 -
评论列表样式
结构 <div class="item"> <div class="photo"></div> <div class="text"> <div class="title"> <div>樱桃小丸子</div> <div>...原创 2020-02-14 12:07:31 · 1561 阅读 · 0 评论 -
css实现手风琴效果
结构 <div class="container"> <div class="item"></div> <div class="item item-1"></div> <div class="item"></div> <div class="item item-3">...原创 2020-02-14 11:51:48 · 125 阅读 · 0 评论 -
使用css position:sticky实现滚动时固定头部、侧边导航固定
结构 <div class="header"> 网站 </div> <div class="sider"> <div class="item">链接1</div> <div class="item">链接2</div> <div class="item">链接3</div&g...原创 2020-02-08 11:34:20 · 1656 阅读 · 0 评论 -
使用margin-left:auto实现单独排列的菜单项
结构 <div class="menu"> <div class="item">首页</div> <div class="item">公告</div> <div class="item">产品</div> <div class="item">关于</div> <d...原创 2020-02-07 21:45:53 · 168 阅读 · 0 评论 -
使用flex写个横向滚动
结构 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>样式 <style type="text/css"> ...原创 2020-02-07 21:38:15 · 4652 阅读 · 1 评论 -
使用css caret-color修改输入框光标颜色
结构 <input type="text">样式 input { caret-color: #f00; }效果原创 2020-02-07 22:02:40 · 297 阅读 · 1 评论