前端开发做得不多,最近又要搞一个小网站,静态页面,自适应,所以作为一个前端入门人员,免不了又踩了坑,简单记录一些知识点。
现在我用的是bootstrap4,head部分一般如下:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<title>音乐</title>
</head>
这里声明字符集utf-8,有时候还有声明lang的,如en,我没太研究这个有多少影响,这里也没有写,好像不会出问题。
接着是视口,一般就按照上面的写即可,初始宽度为设备宽度,缩放比例为1。
然后是bootstrap的css文件,以前还下载放在自己的服务器,现在习惯用cdn了。后面的css文件是我自己写的,除此之外,要在</body>之前放js:
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
一般就这三个。
对于bootstrap4,col变化了一些,原来写xs的现在变成了直接col了,否则还按照版本3中的写自适应会出问题:
接着,一个新手问题,bootstrap不换行,参考:
https://blog.csdn.net/u013288190/article/details/52745166
就是我测试的时候一不小心打了一大串字符,没有空格,调试了半天没有效果,才发现不换行是因为没有空格则认为是一个单词,添加一些空格再进行调试即可。
如果使用了非12格占满的宽度,如col-md-8,还想要其居中,可以用下面的方法:
.col-centered{
float: none;
margin: 0 auto;
}
接着关于margin-bottom或者padding-left之类的变量调节,在浏览器中实时看效果,然后抄到代码中即可。经过学习,发现用rem是很好的选择,r表示的root,这样相对根大小调节能更好进行自适应。
对于网页背景,设置代码如下:
body{
background-color: rgba(39, 40, 52, 1);
font-family: 'HYQiHei-50S';
}
这里的rgba指定颜色,其中rgb都是0-255的整数,而透明通道则是0-1的浮点数。如果透明度设置为0则是纯白的页面背景,设置为1完全覆盖默认白色背景。这里面出现的字体的配置是我自定义的,如下:
@font-face {
font-family: 'HYQiHei-50S';
src: url('../fonts/HYQiHei-50S.otf');
}
我设置了字体名称也就是font-family,接着给出其路径即可。根据测试,只需要这两项即可正常工作,otf格式也被较多的浏览器支持,我用chrome测试的没有问题。
接着,可以对div单独设置一个背景色:
.device-div-color{
background: rgba(64, 67, 81, 0.16);
}
这里根据测试结果,body的背景颜色设置后,再设置div的颜色,实际上二者不会叠加,也就是,body在下,div在上,div设置多少rgba就是多少,而不会与body叠加得到新的颜色结果再显示出来。
然后还有对bootstrap的按钮自定义颜色:
.btn-primary-my{
background-color: rgb(85, 153, 221);
border-color:rgb(85, 153, 221);
}
暂时就记录这些。