| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- /* https://www.bilibili.com/video/BV14J4114768?p=404&vd_source=f1f283d1bc4b954943a9148eb6f545f9 */
- body{
- /* 页面宽度占满手机 100% */
- width: 100%;
- /* 最小页面缩放,手机分辨率小于这个值,页面就不再缩放了 */
- min-width: 320px;
- /* 最大页面不超过 */
- max-width: 640px;
- margin: 0 auto;
- font-size: 20px;
- line-height: 2;
- color: #000;
- }
- ul{
- margin: 0;
- padding: 0;
- list-style: none;
- text-align: center;
- }
- ul li h1{
- color: #9e8201;
- }
- ul li.blank{
- border: #020202;
- margin: 50% 10%;
- }
- /* 后代元素选择器
- 语法: 祖先 后代 后代
- */
- /* .app ul li{
- // 靠左浮动,这样他们才可以并排一行
- float: left;
- height: 45px;
- background-color: #333333;
- // 文本居中
- text-align: center;
- line-height: 45px;
- } */
- /* 伪类选择器,根据相同类型元素选择
- :first-of-type 同类型第一个子元素
- :nth-of-type(n) 同类型第n个子元素
- :nth-last-of-type(n) 同类型倒数第n个子元素
- */
- /* .app ul li:nth-child(1){
- height: 45%;
- } */
- /* .app ul li:nth-child(2){
- width: 10%;
- }
- .app ul li:nth-child(3){
- width: 57%;
- }
- .app ul li:nth-child(4){
- width: 25%;
- } */
|