JackieDYH

2020年2月28日

摘要：目录伪类选择器不同元素间使用状态伪类选择器伪类选择器 :root{ } 匹配根元素 element:first-child{ } 选择一组相同元素中的第一个元素 element:last-child{ } 选择一组相同元素中的最后一个元素 element:nth-child(n){ } 选择阅读全文

posted @ 2020-02-28 13:42 JackieDYH 阅读(4) 评论(0) 推荐(0) 编辑

css3新增选择器使用--小技巧

摘要： css2中的属性选择器： element[attr]{ } 指定了属性名，但没有指定属性值得element元素 element[attr=value]{ } 指定了属性名，并且指定了属性值为value的element元素 element[attr~=value]{ } 指定了属性名，并且属性值可以为阅读全文

posted @ 2020-02-28 13:28 JackieDYH 阅读(3) 评论(0) 推荐(0) 编辑

2020年2月19日

3种方法多列等高布局思路--小技巧

摘要：（1）利用内外间距相抵消，为父元素设置overflow:hidden;实现每一列使用padding值撑开背景色；并且每一列使用padding撑开的多余的占位让margin负值抵消；父级盒设置溢出隐藏优点：结构简单，兼容所有浏览器缺点：伪等高，需要合理控制margin和padding值（2）阅读全文

posted @ 2020-02-19 20:50 JackieDYH 阅读(7) 评论(0) 推荐(0) 编辑

双飞翼三栏布局思路--小技巧

摘要：双飞翼布局——三列布局 1、html结构中——先主体结构后侧边； 2、两侧固定宽度，中间宽度设置为width: 100%; 3、主体内容和左、右侧边分别加浮动float:left; 4、左侧边设置marign-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度; 阅读全文

posted @ 2020-02-19 20:39 JackieDYH 阅读(4) 评论(0) 推荐(0) 编辑

圣杯三栏布局思路--小技巧

摘要：圣杯布局——三列布局 1、html结构中——先主体内容后侧边栏； 2、两侧固定宽度，中间内容宽度设置width: 100%; 3、主体内容和左右侧边栏分别加浮动float: left; 4、左侧设置margin-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度阅读全文

posted @ 2020-02-19 20:34 JackieDYH 阅读(5) 评论(0) 推荐(0) 编辑

vertical-align属性解决元素间有间隙和对不齐问题--小技巧

摘要： vertical-align属性：设置元素的垂直对齐方式 vertical-align: baseline; 将元素放在父元素的基线上默认值 vertical-align: top; 顶端对齐 vertical-align: middle; 中部对齐 vertical-align: bottom 阅读全文

posted @ 2020-02-19 12:52 JackieDYH 阅读(39) 评论(0) 推荐(0) 编辑

2020年2月16日

css命名规范--小技巧

摘要：登录条：loginBar 标志：logo 侧边栏：sideBar 广告：banner 导航：nav 子导航：subNav 菜单：menu 子菜单：subMenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小阅读全文

posted @ 2020-02-16 21:15 JackieDYH 阅读(6) 评论(0) 推荐(0) 编辑

背景图定位html案例

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>境外保险</title> <style type="text/css"> *{ margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { 阅读全文

posted @ 2020-02-16 13:32 JackieDYH 阅读(2) 评论(0) 推荐(0) 编辑

列表html案例

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>考试题</title> <style type="text/css"> * { margin: 0; padding: 0; } .clearfix { *zoom: 1; } . 阅读全文

posted @ 2020-02-16 13:32 JackieDYH 阅读(3) 评论(0) 推荐(0) 编辑

选项卡html案例

摘要： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>骆驼书</title> <style type="text/css"> * { margin: 0; padding: 0; } .clearfix::after { conten 阅读全文

posted @ 2020-02-16 13:32 JackieDYH 阅读(2) 评论(0) 推荐(0) 编辑

公告