Hike News

rebuild-task-xueer

  • 这是关于学而的第三篇文章

    第一篇是做xueer之前的配置;第二篇是做的过程以及issue之后的修改;这一篇将是一些反思与巩固。

  • body{margin:0px;
    padding:0px;
    }
    用于去除自带的边框。注意:没有点.
  • header宽度写100%,铺开页面,不要写死,尽量兼容。

  • header的高度写死一次之后,其子元素的高度要用百分比写,这样要求修改时,省时省力。

  • 第一次使用top:calc(% - px;);position:relativel;来改变位置。

  • 查text-align:center;

  • 查vertical-align:top;玄学问题。

  • 查在父元素下font-size:0;可以使其子元素inline-block毫无空隙了。

  • 查可爱的按钮样式border:red 2px solid;border-style;

  • 查常用的box-sizing:border-box;

  • 添加按钮的背景图片,要background-image:url(“”);

  • main 宽度写死之后用 margin:0 auto; 来居中。

  • border-radius: 12px 12px 12px 12px;
    height: 12px;
    width: 12px;画圆。

  • width: 90px;
    height: 90px;
    border: 2px #1dc091 solid;
    -webkit-border-radius: 100px;画圆环。

  • border-right: 2px solid #eeeeee; 画右边框。

  • white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;单行溢出文本省略。

  • text-decoration: none;去除超链接的下划线。

  • 查border-radius: xx%;

  • a:hover{
    color: red;
    }
    div.h1:hover{
    color: red;
    }鼠标掠过变色。


下面查找一些资料:

  • top:calc(% - px;); 点击看calc用法归纳

    点击查看英文用法介绍
  • text-align: left | right | center | justify | match-parent;文字相对于他的块父元素对齐。不能改变块元素自己的对齐,只能控制他的行内内容的对齐。左-右-中间-拉伸-相对于父元素对齐。

  • vertical-align:baseline | sub | super | text-top | text-bottom | middle | top | bottom | |
    只有一个元素是属于inline或是inline-block,才起作用。

    肯定不行了。参考资料

  • inline-block的父元素中加上 font-size:0;去除空隙。

  • border-style的参考资料

  • box-sizing:border-box;此元素的内边距和边框不再会增加它的宽度防止盒子被撑破、避免计算边距

  • border-radius: xx%;

    “/”前是指圆角的水平半径,而“/”后是指圆角的垂直半径,top-left、top-right、bottom-right、bottom-left.圆角的设置

    英文参考资料–px;%;

存有疑问–> 比如直接写px不写%是怎么回事orz。。。


END-by WWY.2016-12-17

xueer-task

  • 上上篇讲述了做学而task之前的命令行操作,这篇就记录一下学而task的完成过程。(虽然有好多bug,但是她作为自己的第一个静态页面task,能写下来我还是好开心的)

一.我先布局,研究写html的div(顺便第一次做笨笨的画了个图

  • 觉得应该是整体拆分为三个大块:header,main,footer。
  • 之后按照大块再细分每个小盒子里面的div,写html。

二.header部分

  • 忘记了一个属性:placeholder=”课程名、标签” ,作为提示词。
  • 这里的body的margin,padding。 去除了间隙。

    top:calc( );position: relative; 实现了垂直居中。

    vertical-align: top; 使其紧贴在顶部

    index 处 使用了抽象。
    text-decoration: none;使得去除超链接的下划线。

    border:red 2px solid; 边框加颜色、粗细、边框样式。

    background-image: url(“http://p1.bqimg.com/4851/527ea2d653366686.png“) 使得按钮加入了背景图片。

三.main部分

  • <div class="circleA">公</div>这样可以在图形里面加上文字,我竟然才知道。

    h1h2h3light同样也用了四次抽象。
  • border: 2px #1dc091 solid;
    -webkit-border-radius: 100px; 实现圆形边框。

    border-right: 2px solid #eeeeee; 实现小竖条右边框。

    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; 实现单行溢出文本省略.

    a:hover{
    color: red;
    }选择器实现鼠标略过变色。**

四.footer部分。

1
2
3
4
5
6
7
8
9
10
<div class="footer">
<div class="sentenceA">
<div class="s1">最热课程动态</div>
<div class="s2">精心为您推荐最佳口碑课程No.1-No.5</div>
</div>
<div class="sentenceB">
<div class="s1">猜你喜欢课程</div>
<div class="s2">根据您的浏览记录,推荐相似课程列表</div>
</div>
</div>
  • s1 s2 两次抽象
  • border-top: 2px solid #eeeeee; 设置上边框颜色型号。

    margin: auto; 实现居中布局。

五.导师提issue。

冗余的属性和不必要的固定值

.header{
width:100%;
margin:0 auto;
}

//宽度已经是100%,也就没有居中了吧

.header{ height :80px;}

//如果想要它的子元素的高度与它一样。可以给子元素设 height:100%;

这样的好处是当我们想修改导航栏的高度时,不用找出所有的height:80px,只需要修改父元素上面的height。

.main {
width: 1137px;
height: 700px;
}

//main 的宽度应该是占满整个屏幕的宽度的,高度也不需要写,它的子元素会它的高度撑开的。

.footer{
width: 1137px;
height: 500px;
}

.sentenceB{
height:250px;
}

//同理还有很多,找出来,修改过来吧

布局还是导航栏,这种inline-block的布局,尽量不要使用left,right来布局,用margin控制间距就可以了。同样还有banner的居中,课程列表栏底部的加号的居中,可以用margin.

代码的复用:

课程列表分了4栏,写了4个class,里面的样式有很多都是一样的,不妨把它写到一个.list 里面.
样式还不完善的地方:
按钮的样式.
课程列表内容和边框有一定距离.
list前面的黑点也不在文字的中间

六.修改

  • 抽象出来了好多重复的css;优化了盒子(增删);改变布局(footer);了解了margin,height等等不能写死。
  • 优化后代码见仓库

Linux&Unix大学教程-第13章作答

1.1什么是字符数字式字符、元字符?列举三种,展示用途。

  • 字符数字式字符:键入希望键入的,即所见即所得的,字母和数字。
  • 元字符:使用shell时,许多其他字符拥有特殊意义。
  • 列举如下:
    • 使用星号-文件名拓展:匹配0或多个字符。
    • & 和号-作业控制:在后台运行命令。
    • $美元符号-变量:用变量的值替换。

1.2写出下列绰号

  • 星号–星号
  • 输入。回车–新行
  • 感叹号–bang
  • 点号–点
  • 引号–双引号
  • 竖线–管道

1.3引用字符的三种不同方式是什么?如何区别?

  • 1.反斜线—引用单个字符:

    echo It is warm and sunny\; come over and visit

如果没有\,就是两个命令:echo,come

  • 2.单引号—引用一串字符:

    echo It is warm
    ‘(and sunny);come over & visit’

    echo It is warm’(and sunny);’comr over \& visit

  • 3.双引号—引用一串字符,但是保留 美元,反引号,反斜线 的特殊含义。

    echo “My userid is <$USER>; my terminal is <&TERM>”

1.4什么是内置命令?在哪里查找内置命令的文档材料?

  • 在输入命令时,shell将命令分成不同部分,进行解析,之后shell决定如何处理命令。而一些命令在shell内部,shell可以直接解析他们,这些命令叫做内置命令。
    • Korn shell

      man bash

      man ksh

      man tcsh

      man csh

    • 查看是否有说明书页

      apropos builtin

    • 快速查看内置命令列表—Linux & FreeBSD

      man builtin

    • 快速查看内置命令列表–Solaris

      man shell_builtins

    • Linux还有个help命令

      help [-s] [command(命令名称)]

      • help

        help | less 每次一屏地显示信息。

      • help set

        help pwd history kill

        help help 利用help显示一条或者多条具体命令的信息。而help本身也是一个内部命令。

1.5什么是搜索路径?如何显示搜索路径?

  • 搜索路径是:包含所有外部命令的程序的目录列表。命令不是内置的,shell必须查找出合适的程序来运行。比如date,搜索路径中的一个目录里面-包含存放date的文件。
  • 查看搜索路径,显示PATH的值即可:

    echo $PATH

    典型的输出是

    /bin: /usr/bin: /usr/ucb: /usr/local/bin: /home/harley/bin

1.6什么是历史列表?最简单最常见的历史列表应用就是重新执行前面的命令,这是如何完成的呢?如果使用Bash或者Tcsh,那么如何调取、编辑然后再执行前面的命令呢?

  • 在输入命令时,shell会将命令保存在所谓的历史列表中。历史列表会记录之前输入过的诸多命令。
  • 重新执行前面的命令,需要按一下就好了。
  • 两种情况:

    • 对于Bourne shell家族(Bash,Korn shell),可以使用fc命令加上-l(list列举)选项显示历史列表。

      fc -l

    • 对于C-Shell家族(C-Shell,Tcsh),可以使用history命令。

      history

    • 以上两种输出为每行一个事件,事件前面有编号。如果历史列表太长了,可以用less命令。

      history | less

    • 如果重新执行之前的某一个命令(编号为24),可以用 -s(Bash shell) 或者用 !(bang)(C-Shell)

      fc -s 24

      !24

    • 如果要执行前一个命令

      fc -s

      !!

    • 如果要修改一个命令

      打开data,不是tempfile文件

      fc -s tempfile=data 25

      !25:s/tempfile/data/

      输入date,不是datq

      fc -s q=e

      ^q^e

1.7什么是自动补全?自动补全有多少种类型?简述各种类型的自动补全各自完成什么补全。哪种类型的自动补全是最最重要的?

  • 在任何时候,都可以按下一个特殊的键组合,然后shell就会尽量地自动补全当前的单词。
  • 对于Bash、Korn shell、C-Shell、Tcsh来说,自动补全有五种类型。我的好像是Tcsh。
    • BKCT –文件名补全 –补全文件和目录
    • BT –命令补全 –补全命令,包括路径名
    • BT –变量补全 –补全变量
    • BCT –用户标识补全 –补全系统上的用户标识
    • B –主机名补全 –补全局域网上的计算机
  • 文件名补全最常用,当知道希望键入什么,但是记不清完整文件、目录名称时,自动补全非常方便啦。

2.1如何修改Bash的shell显示,以显示用户标识、工作目录、还有当前时间?在Tcsh的shell提示中又是如何实现相同修改的吗?

  • shell提示:

    • Bash:

      $ date

    • Tcsh:

      % date

      date

    • 超级用户:

      /# date

  • 修改Bash的shell显示:

  • USER:
    • ➜ ~ export PS1=”$USER$ “

      ➜ ~ echo “ID is ${USER} “

      ID is qianziqianshang

    • ➜ ~ set prompt = “$USER> “

      ➜ ~ echo “ID is ${USER} “

      ID is qianziqianshang

  • TIME:
    • Bash:

      export PS1=”\d \@$ “

    • Tcsh:

      set prompt = “%d %w %D %@> “

  • PWD:
    • zsh

      echo “$PWD “

    • Bash

      echo “$PWD$ “

    • Tcsh

      echo “$PWD> “

2.2什么是命令替换?创建一条命令:“These userids are logged in right now:”,后面紧跟用户标识列表。

  • 什么是命令替换?—命令替换允许一条命令嵌入在另一条命令里,shell首先执行嵌入的命令,并且输出替换该命令,然后shell再执行整个命令。
  • set prompt = “$USER> “

    echo “These userids are logged in right now: ${USER}”

2.3修改历史列表

如图所示---

2.4自动补全时,引入文件需要的最低字符是多少?

  • datanew —5
  • dataold —5
  • important —1
  • phonenumbers —2
  • platypus —2

做task.xueer之前的命令行操作

  • 肯定是先要有node (-v 看看版本)。
  • 之后淘宝镜像

    sudo npm install -g http-server –registry=https://registry.npm.taobao.org

  • 建立xueer文件夹

    work mkdir xueer

  • 建立html,css文档

    xueer touch index.html
    xueer touch index.css

  • github新建仓库。

  • 使其有git功能,和github建立关系,并忽视没有太大意义的文档(.DS_Store),只保留html,css,.gitignore可见。

    xueer git init
    Initialized empty Git repository in /Users/qianziqianshang/work/xueer/.git/
    xueer git:(master) ✗ vim .gitignore

  • 按照github操作来。

    ➜ xueer git:(master) ✗ git add .
    ➜ xueer git:(master) ✗ git commit -m “initial commit”

    [master (root-commit) 8d22ed1] initial commit
    3 files changed, 1 insertion(+)
    create mode 100644 .gitignore
    create mode 100644 index.css
    create mode 100644 index.html
    

    ➜ xueer git:(master) git remote add origin https://github.com/wwyqianqian/task-xueer.git
    ➜ xueer git:(master) ✗ git push origin master

    Counting objects: 4, done.
    Delta compression using up to 4 threads.
    Compressing objects: 100% (2/2), done.
    Writing objects: 100% (4/4), 275 bytes | 0 bytes/s, done.
    Total 4 (delta 0), reused 0 (delta 0)
    To https://github.com/wwyqianqian/task-xueer.git
    [new branch]      master -> master
    
  • 正常写html,css,在本地查看

    ➜ xueer git:(master) ✗ http-server

js添加新函数

正常是这样写的

printFarmInventory(cows,chickens){
1
2
3
4
5
6
7
8
9
10
var cowString=String(cows);
while(cowString.length<3)
cowString="0"+cowString;
console.log(cowString+"Cows");
var chickenString=String(chickens);
while (chickenString.length<3)
chickenString="0"+chickenString;
console.log(chickenString+"Chickens");
}
printFarmInventory(7,11);

如果要加入一只pig的话,把重复的代码,提取成为一个函数。

printZeroPaddedWithLable(number,label){
1
2
3
4
5
6
7
8
9
10
11
var numberString=String(number);
while (numberString.length<3)
numberString="0"+numberString;
console.log(numberString+""+label);
}
function printFarmInventory(cows,chickens,pigs){
printZeroPaddedWithLable(cows,"Cows");
printZeroPaddedWithLable(chickens,"Chickens");
printZeroPaddedWithLable(pigs,"pigs");
}
printFarmInventory(7,11,3);

不再将重复的代码提取为函数,而是提取其中一项操作。

zeroPad(number,width){
1
2
3
4
5
6
7
8
9
10
11
var string=String(number);
while(string.length<width)
string="0"+string;
return string;
}
function printFarmInventory(cows,chickens,pigs){
console.log(zeroPad(cows,3)+"Cows");
console.log(zeroPad(chickens,3)+"Chickens");
console.log(zeroPad(pigs,3)+"Pigs");
}
printFarmInventory(7,16,3);

Linux下操作目录最基本的命令

复习一下cd

  • cd /xxx 不基于当前工作目录
  • cd xxx 基于当前工作目录
  • cd null 相当于回家目录~

创建新目录mkdir

  • 例如:
    1
    cd mkdir bin essays essays/history essays/literature

或者

1
mkdir ~/bin ~/essays ~/essays/history ~/essays/literature

  • 即,在一个目录中,不能重名(两个目录可以拥有相同的名称)。先父后子。

但是这样好麻烦啊,于是乎-p来啦!!!

  • 例如:
    1
    2
    3
    4
    5
    mkdir ~/essays
    mkdir ~/essays/history
    mkdir ~/essays/history/roman
    mkdir ~/essays/history/roman/unix
    mkdir ~/essays/history/roman/unix/research

可以使用-p

1
mkdir -p ~/essays/history/roman/unix/research

移除目录:rmdir

  • 例如:
    1
    2
    3
    4
    cd /essays
    rmdir history literature
    cd ..
    rmdir bin essays

以上为法1

1
2
cd
rmdir essays/history essays/literature essays bin

以上为法2

1
rmdir ~/essays/history ~/essays/literature ~/essays ~/bin

以上为法3

  • 即,当目录为空(无文件。无子目录)时,才可以移除rmdir。不能移除工作目录和根目录之间的任何目录。

同理,-p又来造福大家啦

1
2
3
4
5
rmdir essays/history/roman/unix/research
rmdir essays/history/roman/unix
rmdir essays/history/roman
rmdir essays/history
rmdir essays

简化为以下。

1
2
cd
rmdir -p essays/history/roman/unix/research

  • 绝对路径:路径的写法一定由根目录/ 写起,例如:/Users/qianziqianshang/work/wwyqianqian 这个目录。
  • 相对路径:路径的写法不是由/ 写起,例如由/Users/qianziqianshang/work/wwyqianqian 要到 /Users/qianziqianshang/work/wwy底下时,可以写成:『cd ../wwy』。
.         此层目录
..        上一层目录
-         前一个工作目录
~         目前使用者所在的家目录  是home啦
~account  account 这个使用者的家目录(account是个帐号名称)

注意:以下root 和 qianziqianshang是两个使用者。

  • [root@www ~]# cd ~qianziqianshang

    代表去到 qianziqianshang的家目录,亦即 /home/qianziqianshang

  • [root@www qianziqianshang]# cd ~

    表示回到自己的家目录root ,不是qianziqianshang的home,亦即是 /root 这个目录

  • [root@www ~]# cd

    没有加上任何路径,也还是代表回到自己家目录/root 的意思

  • [root@www ~]# cd ..

    表示去到目前的上一级目录,亦即是 /root 的上一级目录的意思

  • [root@www /]# cd -

    表示回到刚刚的那个目录,也就是 /root

  • [root@www ~]# cd /var/spool/mail

    这个就是绝对路径的写法!直接指定要去的完整路径名称!

  • [root@www mail]# cd ../mqueue

    这个是相对路径的写法,我们由/var/spool/mail 去到/var/spool/mqueue 就这样写

cd是Change Directory的缩写,这是用来变换工作目录的命令。注意,目录名称与cd命令之间存在一个空格。一登陆Linux系统后,root会在root的家目录!qianziqianshang会在home!也就是我们看到命令行里的‘~’

重命名mv

  • mv data extra

    data被重命名为extra(extra不存在)

移动mv

  • mv /home/harley/data
    /home/harley/storage

    • 如果工作目录是/home/harely

      直接mv data storage

      此时,data在–/home/harely/storage/data

    data被移动(extra存在)

综上,mv三个功能:重命名,移动,移动整个目录树。

目录栈:pushd popd dirs

pushd 把目录名称压入目录栈

popd 弹出目录名称

dirs 显示栈的内容

dir使用的时候,dir -l -v 。(lv不能连一起)

任何时候,栈顶,存放的都是—当前工作目录的名称(改变工作目录时,栈顶!元素也改变)。

  • 例如:

    压入三个新目录,之后dirs显示栈的内容。
    1
    2
    3
    4
    pushd /lib
    pushd /var
    pushd /etc
    dirs -v

输出为

1
2
3
4
0 /etc
1 /var
2 /lib
3 /usr

显示当前目录

1
pwd

输出为

1
/etc

之后popd弹出一个栈顶

1
2
popd
dirs -v

输出为

1
2
3
0 /var
1 /lib
2 /usr

显示工作目录

1
pwd

输出为

1
/var

  • 而这样子,不会显示空的目录,而是当前工作目录。

    1
    2
    dirs -c
    dirs -v
  • 为何不用cd 而是用目录栈呐??

    1
    2
    3
    4
    5
    6
    cd
    dirs -c
    pushd /lib
    pushd /var
    pushd /etc
    dirs -v

注意新压入三个之前,有个home。所以-v显示为

1
2
3
4
0 /etc
1 /var
2 /lib
3 ~

在etc工作了许久,要切换到lib目录

1
pushd +2

这是告诉shell把#2移动到#0

1
dirs -v

输出为

1
2
3
4
0 /lib
1 ~
2 /etc
3 /var

看得出来,在众多目录中切换比较方便。删除就是popd,压入就是pushd。

  • 在bash里,c-shell里 可以创建别名
    1
    2
    3
    4
    alias d='dirs -v'
    alias p=pushd
    alias d 'dirs -v'
    alais p pushd



d
p /usr/lib
p +4
超级方便啦w