zoukankan      html  css  js  c++  java
  • 页面笔记

    DOCTYPE : DOC -document文档,TYPE类型, 文档类型,作用告诉浏览器这是个什么文件
    html:根元素 head:头部标签
    meta:设器标签, charset编码
    title:标题标签, body:身体标签单标签:
    双标签:开始标签结束标签, html
    css引入方式
    1.行内样式:写到标签里,style属性引出,属性跟到引号里面
    2.内部样式: head标签里面加上style标签
    3.外部样式:
    标签分类
    块级元素:默认占整行,宽度可设,但是独自占一行行
    内块元素:默认宽度和内容一样,可设宽
    行内元素:默认宽度和内容样,宽度不可设
    -----------------------------------------------------------------所有css---------------------------------------------------------

    *{ padding:0; margin:0; box-sizing:border-box; }

    html,body { 100%; height:100%; background-color:#f9f9f9; }

    img{ display:block; } li{ list-style:none; } .cen{ 1200px; }

    ------------------------------------------------------------------------------------------------------------------------------------

    引入css样式<link rel="stylesheet" href="css/style.css" />

    ------------------------------------------------------------- 常规属性------------------------------------------------------------

    文字颜色color 宽度 width 高度 height 字体厚度 font-weight

    外边距 margin 内边距 padding 浮动 float 鼠标经过时 hover

    字体大小font-size 变成块 display:block 去序列号list-style:none 行高 line-height

    去边框border:none 去轮廓:outline:none 底部边框border-bottom 去文本修饰text-decoration: none;

    边框 border 轮廓 outline 虚线 dashed 层级 z-index

    按钮 button 实线 solid 缩进 text-indent:1em 锁盒子box-sizing:border-box;

    居中 text-align 第一个 first-child 第好几个 nth-child(2 ) 最后一个 last-child

    插入超链接 <a href> li 列表 ul 无序 ol有序

    盒子(文字)阴影 box(text)-shaow 5px(向右) 5px(向下) 5px(模糊度) red 权重:!important

    不换行white-space: nowrap 文本框<textarea placeholder="。。。"></textarea>

    设置背景图 background-image: url 四个透明度:visiblity opacity transparent rgba

    固定位置:position:fixed 超出部分隐藏:overflow: hidden;

    ------------------------------------------------------------------设置背景--------------------------------------------------

    背景位置 background-position:center (20px) 背景重复 background-repeat 背景固定background-attyachment:fixed

    背景阴影值: rabg(30,29,24,7) 不透明度:opacity:0

    ----------------------------------------------------------------文本装饰---------------------------------------------------

    字符转换(处理文本的大小写)text-transform:none不变 uppercase全大写 lowercase全小写 capitalize首字母大写

    下划线 text-decoration:underline 上划线 overline 贯穿线 line-through 缩进 text-indent: 5em;

    字间隔《文本 text》《文字letter》word-spacing: 30px 鼠标变成手cursor: pointer; 边框圆角化:border-radius:10px;

    允许对长度单位进行拆分,并换行到下一行word-wrap:break-word

    复选框

    --------------------------------------------------------------定位 平移-------------------------------------------------

    定位总结position 相对定位relative 绝对定位 absolute 固定定位 fixed
    (相对自己定位) (相对父级定位) (相对浏览器视窗定位)

    变形:transform 翻转 rotate 平移 translate 放大(缩小)比例scale

    倾斜 skew(单位deg)

    ------------------------------------------------------------------过渡---------------------------------------------------

    过渡时长transition-duration:0.5s; 规定在过渡效果开始之前需要等待的时间 transition-delay:2s;

    ------------------------------------------------------------动画 --------------------------------------------------------

    所有动画属性的简写属性animation 规定动画 @keyframes+名字 所费时间animation-duration:2s;

    规定动画何时开始animation-delay: time; 动画播放次数animation-iteration-count: n | infinite(无限次);

    是否逆向播放animation-direction: alternate(逆向); 匀速 linear

    -----------------------------------------------------------兼容----------------------------------------------------

    —moz—  火狐    —webkit—  谷歌     —o—  Opera      —ms— IE浏览器

    ------------------------------------------------------------适配------------------------------------------------------------------

     @media (min-1366px) and (max-1920px) {

    .banner{
    height: 600px;
    }
    }

  • 相关阅读:
    CSS——实现图像远距离翻转效果
    《精通CSS》一个下拉菜单的例子
    将博客搬至CSDN
    44个Java代码性能优化总结
    QRCode 二维码生成
    Linux命令
    spring
    ajax 学习总结
    Servlet+Ajax实现搜索框智能提示代码
    搜索框智能提示
  • 原文地址:https://www.cnblogs.com/ysboke/p/9441987.html
Copyright © 2011-2022 走看看