• HTML 透明、阴影,圆角等知识点


    页面返回按钮,点击可返回到上一页
        onclick="javascript:history.back(-1);" 可用于任何元素的点击事件
      如:  <input type="button" onclick="javascript:history.back(-1);">
     
     table两个属性
    cellpadding:内容与单元格边框的距离,内部距离
    cellspacing:单元格之间的距离,外部距离
     
     table合并边框线: 
    border-collapse: collapse;

     table合并单元格:
    跨行合并:rowspan="3(所跨行数,数字)";//上下合并
    跨列合并:colspan="3(列数)";//左右合并
     
     
    单选框/复选框定义只读的属性以及js/jquery赋值:
    如果在需要用到单选/复选框显示数据,查看时不能对选择框默认的选项进行修改
    就用到 onclick="return false" 这个属性,这个属性只读,不能在查看中修改,可以进行js赋值
    <input type="checkbox"  id="check_btn"  onclick="return false" />复选框只读
    <input type="radio"  id="rad_btn"  onclick="return false" />单选框只读
    如何用js/jquery给他们赋值:
    js: document.getElementById('check_btn').checked=true;获取的选择框的选中事件赋值为选中
         document.getElementById('rad_btn').checked= true;
    jquery:$("#check_btn").attr("checked", "checked");用attr将获取的选择框属性改为选中
                $("#rad_btn").attr("checked", "checked");或者("checked","true")
     

    超链接去下划线:
         a:link { text-decoration: none;color: blue}
       a:active { text-decoration:blink}
       a:hover { text-decoration:underline;color: red}
       a:visited { text-decoration: none;color: green}

    其中:
      a:link 指正常的未被访问过的链接;
      a:active 指正在点的链接;
      a:hover 指鼠标在链接上;
      a:visited 指已经访问过的链接;


      text-decoration是文字修饰效果的意思;
      none参数表示超链接文字不显示下划线;
      underline参数表示超链接的文字有下划线

    文本框加文字水印:
    placeholder=“输入的文字”
    例:<input type="text"  placeholder="请输入课程名字" />
     
    文本域
    去掉某些浏览器查看时右下角显示的斜线:
    在css样式中加一条resize: none;

    DIV圆角:
    -moz-border-radius: 65px;
    -webkit-border-radius: 65px;
    border-radius: 65px;

    阴影:
    前两个是往左侧和上侧移动的距离,第三个是阴影的扩散程度以及最后一个阴影颜色
    box-shadow: 3px 5px 22px black;
     

    阴影颜色,四周阴影宽度,扩散程度

    -webkit-box-shadow: black 0px 0px 20px;
    -moz-box-shadow: black 0px 0px 20px;
    box-shadow: black 0px 0px 20px;


    透明:
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
     
    鼠标移入变小手
    cursor:pointer;
     
    字符间距:letter-spacing: 30px;
     
    文字下划线:text-decoration:underline;/*下划线*/
  • 相关阅读:
    6/10
    Alpha 冲刺5/10
    现场编程
    4/10
    3/10
    总结
    bbbbbeta
    总结
    beta 7
    beta 6
  • 原文地址:https://www.cnblogs.com/zyg316/p/5786504.html
Copyright © 2020-2023  润新知