20180207遗留问题1

完成网页的初步搭建，各种美好一点没有，次过程中有几点学习所得

导航的图标引用： https://fontawesome.com/

1. 引入 <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script> 网址为icon的缓存地址
2. <i class="fas fa-bars"></i>

快捷键

1. 网页预览 Preview包 control+shift+h
2. 自动格式化/美化代码 atom-beatify control+alt+b
3. atom自动换行 settings--editor--soft wrap

遗留问题：

1.li怎么去掉黑点？

<style>

.div-inline {

list-style: none;

}

</style>

其他属性：

1. disc实心圆，默认值  
2. circle空心圆  
3. square实心方块  
4. decimal阿拉伯数字  
5. lower-roman小写罗马数字  
6. upper-roman大写罗马数字  
7. lower-alpha小写英文字母  
8. upper-alpha大写英文字母  

A).运用CSS格式化列表符： ul li{  

list-style-type:none;  

}  

B).如果你想将列表符换成图像，则： ul li{  

list-style-type:none;  

list-style-image: url(images/icon.gif);  

}  

C).为了左对齐，可以用如下代码： ul{  

list-style-type:none;  

margin:0px;  

}  

D).如果想给列表加背景色，可以用如下代码： ul{  

list-style-type: none;  

margin:0px;  

}  

ul li{  

background:#CCC;  

}  

E).如果想给列表加MOUSEOVER背景变色效果，可以用如下代码： ul{ list-style-type: none; margin:0px; }  

ul li a{ display:block; width: 100%; background:#ccc; }  

ul li a:hover{ background:#999; }说明：display:block;这一行必须要加的，这样才能块状显示！  

  

F).LI中的元素水平排列,关键FLOAT:LEFT： ul{  

list-style-type:none;  

width:100%;  

}  

2.占位图片资源怎么使用？

如果只是使用相同的网址，例如 https://picsum.photos/200/300/?random，显示出来的图片都是一样的

改成 https://picsum.photos/400/300?image=328 然后改变image的数字就可以得到不一样的图片

3.字体怎么引用？

谷歌字体中国 http://www.googlefonts.cn/，找到合适的字体，然后点击“加入字体库”--生成代码--link--CSS文件中定义

遇到的问题，link引入时 <link rel="stylesheet" href="./style.css">带上CSS后缀，网页样式没有变化，去掉CSS后缀网页发生变化， 如 <link rel="stylesheet" href="./style">。why？但是在谷歌浏览器上没有区别

原来是atom保存文件的时候没有后缀名，所以不识别，当我手动保存成style.CSS时，就没有这个问题了，现阶段我无法解决这个问题，网上也没有类似的问题，所以为了不浪费时间，止损，我决定换工具，vscode.

4.div怎么并列排布？

<style>

.div-inline {

display: inline-block;

}

</style>

<div class="div-inline"></div>

经测试后发现随着网页大小的变化，不能明显的变成3列

style>

.column {

list-style: none;

}

.zong{

display: inline-flex;

justify-content: space-between;

}

</style>

<div class="zong"></div>

<div class="column></div>

<div class="column></div>

<div class="column></div> 结局，具体参见 http://blog.csdn.net/zmhawk/article/details/73293366 里面有对display: inline-block缺点的具体解释

5.链接如何引用？

<a href="https://github.com/hopedwj">DWJ</a>

6.atom新建文件如何改为HTML格式？