1.css重用

 <style>

     .cl{

         ...

     }

     .c2{

         ...

     }

     .c{

         ...

     }

 </style>

 <div class='c c2'></div>

 <div class='c c2'></div>

可以把c1，c2共有的style属性单独做出一个c来，可以加强css的重用性。
2.自适应 和 改变大小变形
左右滚动条的出现
宽度，百分比

如果页面全部使用百分比，就会出现网页变形；
解决方案：页面的最外层给网页设置像素的宽度，即最外层设置绝对宽度。

 <body>

     <div class='pg-header'>

         <div style='width:980px;'>

         <!--头部数据(在这里就可以用百分比了，这里面的层都是占980px的百分比，百分百的内部的宽度=980px)-->

         </div>

     </div>

     <div class='pg-body'>

         <div style='width:980px;'>

         中间内容

         </div>

     </div>

     <div class='pg-footer'>

         <div style='width:980px;'>

         底部菜单

         </div>

     </div>

 </body>

自适应：CSS的media属性
使用css的特殊方法,伪代码实现：

 <style>

 如果整个页面的宽度>900px时，

 下面的写的触发器的设置才会生效。

     {

     .cl{

     ...

         }

     }

 </style>

实例：www.bootcss.com

CSS样式2的更多相关文章

  1. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  2. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  4. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  5. 脚本工具（获取某个文件夹下的所有图片属性批量生成css样式）

    问题描述: 由于有一次工作原因,就是将某个文件夹下的所有图片,通过CSS描述他们的属性,用的时候就可以直接引用.但是我觉得那个文件夹下的图片太多,而且CSS文件的格式又有一定的规律,所有想通过脚本来生 ...

  6. jQuery所支持的css样式

    jQuery所支持的css样式 backgroundPosition borderWidth borderBottomWidth borderLeftWidth borderRightWidth bo ...

  7. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  8. 获取元素计算后的css样式封装

    获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...

  9. JS实战 · 仿css样式选择器

    代码如下: <html> <head>     <meta http-equiv="Content-Type" content="text/ ...

  10. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

随机推荐

  1. iOS开发 - 开发版+企业版无线发布一键打包

    背景:项目进入快速迭代期,需要快速地交付出AdHoc版本和企业无线发布版本.每次打包都要来回切换bundle identifier和code signing,浪费很多时间. 示例项目名称名称为Test ...

  2. 如何查看网页的header

    1.例如打开要爬取的网页:https://www.zhihu.com/explore 2.按下F12,点击Network 3.刷新页面,点击explore 4.选取request headers,us ...

  3. JS中this指向问题和改变this指向

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然 ...

  4. CentOS8中安装maven

    下载maven,具体目录可根据实际情况而定 # wget http://mirrors.cnnic.cn/apache/maven/maven-3/3.3.9/binaries/apache-mave ...

  5. HDU1087：Super Jumping! Jumping! Jumping!（DP水题）

    Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...

  6. 选择排序(C++，Java，Python实现）

    排序算法之选择排序,选择排序,选择排序的基本思想描述为:每一趟在n-i+1(i=1,2,-,n-1)个记录中选取关键字最小的记录作为有序序列中第i个记录.具体来说,假设长度为n的数组arr,要按照从小 ...

  7. "字符反向拼接"组件:<reverse> —— 快应用组件库H-UI

     <import name="reverse" src="../Common/ui/h-ui/text/c_text_reverse"></ ...

  8. Dijkstra学习总结

    啥叫堆 可以看一下这个 https://www.cnblogs.com/xiugeng/p/9645972.html#_label0普通Dijkstra可以看一下 https://blog.csdn. ...

  9. go1.13errors的用法

    go1.13errors的用法 前言 基本用法 fmt.Errorf Unwrap errors.Is As 扩展 参考 go1.13errors的用法 前言 go 1.13发布了error的一些新的 ...

  10. 自己总结 ：并发队列ConcurrentLinkedQueue、阻塞队列AraayBlockingQueue、阻塞队列LinkedBlockingQueue 区别 和 使用场景总结

    并发队列ConcurrentLinkedQueue.阻塞队列AraayBlockingQueue.阻塞队列LinkedBlockingQueue 区别 和  使用场景总结 分类: Java2013-0 ...