HTML+CSS笔记--1

Posted 2020-07-03

（初接触html+css时一些笔记）

1、父盒子的高可以不用给，让里面的内容撑起来就好。

2、对于外边距合并问题，解决方法overflow : hidden;,或者是另外加一个边框可以下来。

3、对于网站的logo，我们要给它设置关键字，写在a元素里，

1 .logo a{
2         display: block;
3         height: 40px;
4         text-indent: -2000em;/*首行缩进 em是一个字的大小，rem是以一个根的大小 这个字是给搜索引擎看的*/
5     }

 

4、我们可以将具有相同特性的css样式放在common.css中，减少了代码的缩写。

5、

 1     .register{
 2         width: 49px;
 3         height: 30px;
 4         background-color: #ff6400;
 5         float: left;
 6         text-align: center;
 7         line-height: 30px;
 8         color: white;
 9         /*元素加了浮动就转为行内快元素了，*/
10         /*display: inline-block;*/
11         /*转为行内快元素，就有了大小，但是位置不精确，所以我们用float*/
12     }

7、 写样式的时候尽量用class，少用id因为id的权重太高了，以后写就是时候不好提权

命名 chass="stie-nav"
id = "stie_nav"

版心，可视区：1200px;

8、浮动：要么都浮动，要么都不 一个盒子有三子盒子，有一个浮动，其余的都要。

9、logo优化

1 <div class="logo">
2     <h1>写h1是为提权
3         <a href="http://">奔跑吧，云课堂</a>
4     </h1>    
5 </div>

 

 10、网页上的小图标

比特虫 能够将png》icon图片的网站；
16*16

在《/head》的上方写上 这图一般放在根目录下
http://www.bitbug.net/favicon.ico 可以直接在网址中输入这个地址，找到网页网页上的图标

在head里面插入

<link rel="shortcut icon" href=favicon.ico" />

 

 即可显示

11、nav部分，

为什么导航栏一般是用li来做，而不是用a直接做？？
最核心的原因是为了优化，因为a是非常重要的关键词，如果把所有的非常重要关键词都有堆砌在一起，搜索引擎会认为是在作弊（更容易搜索到） ，我们用li隔开，

不要给li宽度，因为每个列表中字数不一样，给了宽度会排列不好看,因此我们要给a的padding值，这样可以实现不同列表的有相同的间隔，中间的竖线可以用border-right来设置，最后一个的要去掉即：

1 .nav li:last-child{
2     border: 0;  /*最后一项的边框要隐藏*/
3 }

12、a span em b ui ims 是行内元素，是没有宽度和高度的， 盒子宽度=A+B+C;

13、现在的电脑的分辨率一般还是少于2000px;

14、元素的定位，

/*定位的口诀：子绝父相，即父：relative;zi :absolute;*/

15、对于有padding的盒子，会给盒子的width加减

16、让一个盒子居中显示的一种方法

.circle{
        padding-left:11px; 
        width: 100px;
    /*    、有paddingd的要学会给width加减*/
        height: 28px;
        background-color: blue;
        position: absolute;
        bottom: 12px;
        overflow: hidden;
        left: 50%;
        /*先走外边快的50%；*/
        margin-left: -55px;
        /*再回走自己大小的一半，这样就能精准定位*/
        background:rgba(0,0,0,.3);
        /*css3的透明背景，不影响盒子里面的内容*/
        border-radius: 15px; /*圆角半径*/
    }

 17、定位：1.1 margin: 0 auto; 只能让标准流的盒子居中对齐，必须是块级元素，还要有宽度，   加了定位的盒子想要居中对齐，只有定位；

18、清除浮动的方法：

clear:both;
        
        overflow:hidden;
        
        以下这个方法更好,没有多加额外的标签，利用伪类来清除浮动
        .clearfix:after{
            content:".";       "."可放可不放
            display:block;
            height:0;
            visibility:hidden;
            clear:both;
        }
        这是兼顾ie6;
        .clearfix{
            zoom:1;
        }
        新浪 网易

        另一种比上一种还好
        .clearfix:before,clearfix:after{
            display:table;
            content:"";
            line-height:0;
        }
        .clearfix:after{
            clear:both;
        }
        这是兼顾ie6;
        .clearfix{
            zoom:1;
        }

        <div class="father clearfix">
        小米官网
     */