前端学习(2)

  • 前端学习(2)已关闭评论
  • 138 次浏览
  • A+
所属分类:Web前端
摘要

1.shift+alt+f 格式化代码(vscode)2.css的复合选择器
  后代选择器:选后代(不一定是儿子)
  空格隔开 如ol li{样式声明} 更好地选择想要的标签 也可以用class表示 如 .nav.li.a

1.shift+alt+f 格式化代码(vscode)

2.css的复合选择器
  后代选择器:选后代(不一定是儿子)
  空格隔开 如ol li{样式声明} 更好地选择想要的标签 也可以用class表示 如 .nav.li.a

  子选择器 >亲儿子

  并集选择器
  逗号 div,p{样式声明} 最后一个选择器 不需要加逗号

3.链接伪类选择器(鼠标放上去变色)
  必须按照LVHA来写 否则会无效化
  用冒号表示
  a:link 把没有点过的链接变化 text-decoration:none 删除下划线
  a:visited 已经访问过的
  a:hover 指针指在上面 更改背景颜色
  a:active 活动链接 按住鼠标
  给a修改样式必须单独修改

4.focous伪类选择器
  input:focus{} bgc背景色 color 内容色

5.css元素显示
  块元素特点:
  独占一行
  高宽内外边距都可以调整
  默认和父亲一样宽
  是一个盒子或容器
  p标签里面不允许再放div

6. span特点
  一行可以显示多个
  宽高设置无效
  宽度为本身内容宽度
  行内只能放行元素 不可以放块元素 但是a除外

7.行内块元素
  <img><input><text>
  可以给宽度也可以给高度

8.元素显示模式的转换
  在{}里面填
  display:block转换为块级元素
  display:inline 转换为行内元素
  行内块 display:inline-block

9. text-indent: 2em;/* 首行缩进 */

10.垂直居中:行高等于盒子的高度 line-height = height
  行高等于文字本身的高度加上下空隙 (均分)
  行高小于盒子高度偏上反之偏下

11.css的背景
  background-color可以为trasparent(透明)也可以是其他颜色
  背景图片的优点是便于控制位置:超大图片或者logo
  background-image:none/url()
  背景平铺:background-repeat :repeat
  background-repeat:no-repeat background-repeat:repeat-x 沿着x平铺 background-repeat:repeat-y沿着y平铺

  背景图片会压住背景颜色
  background-position 改变图片在背景的位置
  background-position:x y;xy可以是长度也可以是方位名词
  如果只有一个方位名词,另外一个省略,第二个值默认居中对齐

11.js
  prompt 提示框
  alert 弹出框
  console.log 测试框

  var变量声明
  例如: var li

  对话框输入输出
  var myname = prompt('xxx')
  alert(myname)