发表于: 2019-05-02 23:21:50

1 783


今天完成的事情: 

   1.完成任务七

   2.学习任务八资料

明天计划的事情:

   1.了解Bootstrap

遇到的问题:

   1. 做任务七的时候发现用opacity的时候子级也会继承,且无法用opacity重新定义,用绝

   对定位也无法解决

                 

        1.1 解决办法一直接给他添加透明背景图,或者用rgba(x,x,x,不透明度(.x))的方法

              .1是代表不透明度是100%,.9是代表不透明度是90%,以此类推

                               

    2. 做任务七的时候,空格只能显示一个,用pre标签文字无法自定义

          2.1 查找资料后使用 (代表一个字符宽度的空格), (代表半个空

                格的宽度)

   3. 做任务七的时候发现button内用href无法打开链接

         3.1 查找资料后了解到,按钮或表单或表单按钮内本页打开onclick="location.href=' '  "

               按钮内新网页打开:onclick="window.open('  ')",或者用a标签,把button做他的子

               级即可

   4. 做任务七的时候发现用a标签,内放button,子元素button的margin点击到也会跳转

         4.1 询问师兄后了解到是因为a标签的宽度是根据他的子元素来定的(在a标签自己没

                设置宽度的情况下),margin也算在里面,所以点击会跳转,解决办法就是给a

                标签设margin,他的子元素不设置

收获: 

     解决了遇到的问题,对使用的元素及属性布局等有了更加深刻的了解。



任务名称 :css-task-07

成果链接:https://chenchenchen96.github.io/task/task7/html/task7-1.html

任务耗时:2019.5.1-2019.5.2(2天)

官网脑图:

我的脑图:

任务总结:

  1. 使用了文本溢出的时候显示省略号或其他:
        主要使用overflow:hidden(溢出的文本不显示) text-overflow:ellipsis;(溢出的文本显示省略号),white-space:nowrap;(文字 一行显示,不换行)最后设置宽度即可

  2. 了解了如何画一个三角形状: 
         画三角形可以用border, border实际上是由4个三角形组合而成的
          设置长高为0,botder的width就是三角形的高度设置成想要的长度,颜色,需要哪个位置的三角形,把其它三条边设置成透明色(transparent)即可,但被隐藏的仍然占据着位置,可以再简化一下,比如你需要最下面的三角形,就把上边框设置为0
    可以设置相邻的width大小来改变三角形形状,不可以一开始就只设置一条边,那样显示不出来,如果三角形需要边框的话,因为本身就是border所以不可以用border添加边框可以再叠加一个 稍大的三角形再后面,可以利用绝对定位,加上:after(用这个少用一个标签)
  3. 使用用opacity(不透明度)的时候子级也会继承,且无法用opacity重新定义,用绝对定位也无法解决:
         解决办法一直接给他添加透明背景图,或者用rgba(x,x,x,不透明度(.x))的方法,.1是代表不透明度是100%,.9是代表不透明度是90%,以此类推
  4. 了解了如何在html内输入空格(正常的时候不管多少空格都按一个计算)
     
  5. button跳转链接可以使用onclick

        按钮或表单或表单按钮内本页打开onclick="location.href=' '  "
         按钮内新网页打开:onclick="window.open('  ')"





返回列表 返回列表
评论

    分享到