网站布局中响应式布局

Posted 2020-09-29 务必抓紧

在页面大小发生变化的时候，让页面显示产生变化，可以使用响应式布局的方式。

例如：在html标签<div class = ‘c1‘>页面布局</div>中，想让其在大小变化达到某个值的时候，背景颜色也同时发生变化。

在css文件中添加

<style>

　　.c1{

              background-color:grep;

        }
　　//@media 意思是，在宽度大于700px的时候，应用@media 中的设置，当小于700px的时候，div标签应用c1效果。
      @media  (min-width:700px){

　　　　background-color:red;
       }

</style>

在导入第三方模板后，比如bookstrap模板，想要对第三方模板的样式做修改的话，自己写的css应该放在第三方样式的下面，这样自己写的css才可生效。

如果自己写的CSS放在第三方样式的上面的话，如何让自己的样式生效呢，应该在自己写的样式后加上 !important

<link rel="stylesheet" href="bootstrap3.3.0-dist/css/bootstrap.css"/>
    <style>
        .no-radius{
            border-radius: 0;  !important;
        }
        
    </style>