02 2020 档案
摘要：目录 伪类选择器 不同元素间使用 状态伪类选择器 伪类选择器 :root{ } 匹配根元素 element:first-child{ } 选择一组相同元素中的第一个元素 element:last-child{ } 选择一组相同元素中的最后一个元素 element:nth-child(n){ } 选择
阅读全文
摘要：css2中的属性选择器： element[attr]{ } 指定了属性名，但没有指定属性值得element元素 element[attr=value]{ } 指定了属性名，并且指定了属性值为value的element元素 element[attr~=value]{ } 指定了属性名，并且属性值可以为
阅读全文
摘要：（1）利用内外间距相抵消，为父元素设置overflow:hidden;实现 每一列使用padding值撑开背景色；并且每一列使用padding撑开的多余的占位让margin负值抵消； 父级盒设置溢出隐藏 优点：结构简单，兼容所有浏览器 缺点：伪等高，需要合理控制margin和padding值 （2）
阅读全文
摘要：双飞翼布局——三列布局 1、html结构中——先主体结构后侧边； 2、两侧固定宽度，中间宽度设置为width: 100%; 3、主体内容和左、右侧边分别加浮动float:left; 4、左侧边设置marign-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度;
阅读全文
摘要：圣杯布局——三列布局 1、html结构中——先主体内容后侧边栏； 2、两侧固定宽度，中间内容宽度设置width: 100%; 3、主体内容和左右侧边栏分别加浮动float: left; 4、左侧设置margin-left: -100%;将左侧拉到最左边；右侧设置margin-left: -右侧边宽度
阅读全文
摘要：vertical-align属性： 设置元素的垂直对齐方式 vertical-align: baseline; 将元素放在父元素的基线上 默认值 vertical-align: top; 顶端对齐 vertical-align: middle; 中部对齐 vertical-align: bottom
阅读全文
摘要：登录条：loginBar 标志：logo 侧边栏：sideBar 广告：banner 导航：nav 子导航：subNav 菜单：menu 子菜单：subMenu 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>境外保险</title> <style type="text/css"> *{ margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 {
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>考试题</title> <style type="text/css"> * { margin: 0; padding: 0; } .clearfix { *zoom: 1; } .
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>骆驼书</title> <style type="text/css"> * { margin: 0; padding: 0; } .clearfix::after { conten
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>6列布局</title> <style type="text/css"> * { margin: 0; padding: 0; } .clearfix::after { conte
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>歌曲</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { width: 300px; marg
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 773px; margin:
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>课表</title> <style type="text/css"> *{ margin: 0; padding: 0; } td{ text-align: center; } .
阅读全文
摘要：html结构 <!DOCTYPE html> 文档声明，不是HTML标签必须放首行 <html> 网页的根元素 <head> 放网页的头部信息 <meta charset="utf-8"> 设置网页的编码方式 <title></title> 网页标题 <link href="css文件的路径" re
阅读全文
摘要：目录 引入方式 css长度单位 布局定位属性 自身属性 文本属性 其他属性 引入方式 行内样式——内联样式：写在标签内部，style属性中 如：<div style=”width:100px;”></div> 内部样式——嵌入式：写在head标签内，style标签对中 如：<style> css样式
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册</title> <style type="text/css"> * { margin: 0; padding: 0; } .wrap { width: 400px; font
阅读全文
摘要：@charset "utf-8"; /* JCHao */ body,h1,h2,h3,h4,h5,h6,p,th,td,ol,ul,li,dl,dt,dd,form,fieldset,legend,input,button,textarea,select,div,pre,code,blockquo
阅读全文
摘要：1、简述!DOCTYPE的作用？ <!DOCTYPE> 决定浏览器渲染方式； 帮助浏览器正确地显示网页 文档类型声明（简称为 "DTD"），告诉浏览器这个文件的类型，让浏览器知道该用哪个规范来解析文档。 声明必须在HTML中的第一行，Doctype 是一条声明它不是一个HTML标签，只起到声明作用。
阅读全文
摘要：前端知识&HTML常用标签 20200210 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 前缀—— -webkit- Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko 前缀——
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>等高布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .clearfix::after{ content
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>等高布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .parent{ width: 900px; bo
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>双飞翼布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .clearfix::after{ conten
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>电子相册</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; } b
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>logo名牌</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; }
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DYH</title> <style type="text/css"> .item{ position: relative; width: 300px; height: 300px
阅读全文
摘要：加 “|” 的小技巧，效果图如上图 css a{ text-decoration: none; } .linkes { list-style: none; margin: 20px 90px 5px 0; padding: 0; padding-bottom: 8px; height: 18px;
阅读全文
