• 百度前端技术学院-task1.8源代码以及个人总结


    通过这次任务的练习我学到了很多,现将所学到的以及遇到的问题总结如下。

    源码地址:http://pan.baidu.com/s/1kVB2VZL

    下面出现的代码,都是摘自这个上面的源码

    1、终于明白了absolute,relative,float的用法了,这三者结合在一起真的很强大。当然要注意的就是清除浮动了。

    清除浮动所用的代码:

    .clearfix { 
      *zoom: 1; 
    } 
    .clearfix:before, .clearfix:after { 
      display: table; 
      line-height: 0; 
      content: ""; 
    } 
    .clearfix:after { 
      clear: both; 
    } 

    2、input元素当你用鼠标点击后,外面可能会出现一个方框,你可以使用下面的清除:

    outline: none;

    3、对于button元素,你设置了背景后,点击的时候周围会出现方框,如果你想去掉方框的话:

    border: none;

    4、即使你设置了元素的大小,但是,当你添加内容或者设置padding,margin的时候,又会发生改变,从而你得再次修改。不过这时你可以使用box-sizing,css中有一篇就是专门讲这个的,要注意不同的浏览器。

    -moz-box-sizing: border-box;  /*Firefox3.5+*/
    -webkit-box-sizing: border-box; /*Safari3.2+*/
    -o-box-sizing: border-box; /*Opera9.6*/
    -ms-box-sizing: border-box; /*IE8*/
    box-sizing:border-box;

    5、before, after这两种伪元素的使用。可以用在添加图标啊,或者hover的时候,出现下划线上划线。

    .query-info-1 li:hover:before,.query-info-1 li.cur:before{
        content:'';
        position:absolute;
        top:-1px;
        left:-1px;
        width:110px;
        height:4px;
        background:#4388c9;
    }

    6、最受启发的就是第一组项目中的table的实现了,这里面包含很多的技术思想,很受启发

    1)不用js实现点击后的效果的切换:

    部分html代码

                    <li>
                        <input type="radio" name='tabs' id='tab1' checked >
                        <label for="tab1">项目一</label>
                        <div id='tab_menu1'>
                              <table>
                                <tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
                                <tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
                                <tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
                                <tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
                                <tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
                              </table>
                        </div>
                      </li>                

    css代码

    .project_tab_menu [id^='tab']:checked ~ [id^='tab_menu']{
        display: block;
        position:absolute;
        width:403px;
        border-radius:0 5px 5px;
        padding:28px 40px 35px 38px;
        left:0;
        top:40px;
        font-size: 14px;
        border: 1px solid #DDDDDD;
    }
    .project_tab_menu [id^='tab']:checked~label{/*当选中tab开头的id,则为其后面的label元素添加下面这些样式*/
        position: relative;
        z-index: 1;
        border:1px solid #DDDDDD;
        border-bottom: none;
        background: #fff;
        height:28px;
        font-size: 14px;
    }
    [title~=flower]
    { 
    background-color:yellow;
    }

    [attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。

    选择 titile 属性包含单词 "flower" 的元素,并设置其样式:

    这一段程序其实是参考别人的,他很聪明,采用radio来实现不同的项目的选择。并将<label>下的table设置为不可见,这样,所有的radio就可以排成一排。当其中一个按钮被选中后,再将其对应的table设置为display:block显示出来。

    7、input元素与文本对齐

    一般情况下会选用:

    vertical-align:middle;

    但是有时候效果并不是很好

    可以直接将input元素定位住

    input{
        position:absolute;
        top:5px;
        left:5px;
    }

    8、有时候在一行中,文字中间会有空格,这时候可以添加<span>      </span>元素,而不用添加空格的字符编码。

    9、有时候你可能要添加好几个图标,这时候可以选用一些行内元素插进去比如<i>,<span>等

    10、设置table的线框和边距,不推荐使用<table border="1"  cellspacing="0"  cellpadding="0">使用这种出来的边框会比设置要粗一些,可以这样设置

    .project table tr td{
        border:1px solid #D6D6D6;
    }
    .project table{
            border-collapse:collapse;
            color:#64656A;
    }
    11、后面再写页面的时候,可以先设置reset.css,这样比较省时省力。
  • 相关阅读:
    Docker安装使用及私有仓库搭建
    多线程核心基础
    JDK8以上提高开发效率
    kubernetes 之Controller介绍
    kubernetes 之调度
    kubernetes 之Pod介绍
    Kubernetes YAML文件详解
    【IntelliJ Idea】RunDashboard
    【Spring Boot】启动时执行:CommandLineRunner、ApplicationRunner 和 ApplicationListener
    URLConnection
  • 原文地址:https://www.cnblogs.com/huansky/p/5347751.html
Copyright © 2020-2023  润新知