实现一个自适应网页用到的css知识
1 div导致父级高度没有变化是应该子元素设置了float:left等
2 div元素居中 text-align:center; margin-left: auto;margin-right:
3 大小随窗体变化一定要设置成百分比(width:98% )且用到 @media screen and (min-width: 280px) and (max-width: 380px){}
4 网页两变一定要留一定(固定)距离可以设置 左右各15像素( padding:0 15px; ) ,padding是向内占位,margin是向外占位,设置的宽度不包括margin
5 div脱离文档设置 position:relative/absolute
6 设置边框 border-style:solid; border-width:1px; border-color:#000;
7 背景透明度和背景颜色 background-color:#000;opacity:0.5;
8 背景图片background:url('/images4/bg.jpg');
9 opacity会被继承,会影响后面子元素的透明度,解决方案 建一个同级别的div,然后定位到上面,看似一样。
这个问题解决可以参考https://www.janecc.com/css3-opacity-inherit-resolve.html和https://my.oschina.net/xiangduole8/blog/291146
10 after真的很有用
这个来源:http://www.cnblogs.com/losesea/archive/2012/12/20/2825763.html
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等。
除了它们,还有一些不被常使用的伪类,有:focus,:first-child,:lang等。
而且CSS里不光有伪类,还有伪元素,比如::first-letter,:first-line,:before和:after。
?本文中其它伪元素暂且不表,单说:after伪元素。
after顾名思义是在元素后面的意思,实质是在元素之后添加内容。
这个伪元素允许制作人员在元素内容的最后面插入生成内容,需要和content属性一起使用,设置在对象后发生的内容。默认地,这个伪元素是inline行内元素,不过可以使用属性 display 改变这一点。
所有主流浏览器都支持 :after 伪元素,但对于IE来说,只有IE8以上版本支持。
下面举个例子,在CSS代码中插入:
<style type="text/css">
h1:after {content:url(logo.gif)}
</style>
Html:
<h1>标题内容</h1>
在显示时,标题内容后会插入一张图片。这就是伪元素:after的作用。
伪元素:after另外一个常用的作用在原来的文章中曾经提到过,有些同学可能还记得,那就是清除浮动。
在CSS中加入带有CSS伪类:after的内容:
.clear:after {
height:0;
content:".";
clear:both;
display:block;
visibility:hidden;
}
然后在外面的Div容器box中引用这个class,比如:
<div id="box" class="clear">
……
……
</div>
自我小结
/*这个效果很好,设置了元素高度,要借鉴*/
.check-main:after, .f-cbli li:after {
display: block;
clear: both;
visibility: hidden;
height: 0;
overflow: hidden;
content: ".";
}
11 zoom
zoom这个特性是IE特有的属性。
.triangledown
{
height:0px; width:0px;
border:10px solid #000; border-color:#f00 transparent transparent transparent;
border:10px solid #000; border-color:#f00 transparent transparent; border-style:solid solid dashed dashed;
line-height:0px;
}
.triangleup
{padding-bottom: 5px;
height:0px; width:0px;
border:10px solid #000; border-color:transparent transparent #f00 transparent ;
border:10px solid #000; border-color: transparent transparent #f00; border-style:solid solid dashed dashed;
line-height:0px;
}
/*间隔*/四周空隙
.searchmargin
{
padding:10px 10px 10px 20px;
}
实现一个自适应网页用到的css知识的更多相关文章
- 【转】手机web——自适应网页设计(html/css控制)
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 手机web——自适应网页设计(html/css控制)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- 手机web——自适应网页设计(html/css控制)【转】
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- 手机web——自适应网页设计(html/css控制)http://mobile.51cto.com/ahot-409516.htm
http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的 ...
- 手机web——自适应网页设计(html/css控制)(转)
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- 网页制作常用的CSS知识
在制作网页中,我们会用到很多CSS的知识,在这里我简单的总结了一些. div 划分区块 ul,li 无序列表(配合划分区块) ol,li 有序列表 a 超链接标签 p 段落标签 h 标题标签 i ...
- 如何去设计一个自适应的网页设计或HTMl5
如何去设计一个自适应的网页设计或HTMl5 如今移动互联网随着3G的普及,越来越火爆,更多需求跟随而来!APP应用市场和APP应用数量成倍成倍的增长!从而给移动互联网带来新的挑战! 移动设备正超过桌面 ...
- 如何制作一个自适应手机、电脑、ipad的网页方法总结
进入2015年,手机上网的用户已经越来越多,已经赶超PC端.随着2G.3G.4G.免费WIFI和无线基站的不断普及,越来越多的人开始使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. ...
随机推荐
- iOS 模仿一个小项目,总结一下里边的模块
ManoBoo: 参考链接:http://www.jianshu.com/p/fd4c46c31508 这个小的项目是参考ManoBoo的简书的,链接在上方,自己在仿做的过程中,也离不开Man ...
- Oracle EBS - AOL
AOL: (Path: /u43/dev6/interface/aol) 1. Goto system administrator response 2. View -> Request (Sa ...
- 将博客从jekyll迁移到了hexo
关于hexo和jekyll hexo和jekyll一样都是个静态网站生成工具,hexo是一个台湾小伙使用nodejs开发的,jekyll则是用ruby开发,github内置了jekyll,可以直接将j ...
- JavaScript:Location
读取.设置url 在url中输入:http://www.cnpiont.com:8090/index.html?user=like&pwd=123#title Console输入: docum ...
- 72. 求m到n之和
求m到n之和 int sum(int m, int n) { int i, result = 0; for (i=m; i<=n; i++) result = result+i; return ...
- opencv支持的机器学习算法
CXCORE库: Mahalanobis距离: K均值: CV库: 人脸检测/Haar分类器 ML库: 正态朴素贝叶斯分类器: 决策树: Boosting: 随机森林: EM算法: K近邻(KNN): ...
- 启动Hive时出现的问题
Caused by: org.apache.hadoop.hive.ql.metadata.HiveException: java.lang.RuntimeException: Unable to i ...
- Python开发【十一章】:数据库操作Memcache、Redis
一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...
- jenkins配置邮件
1.安装 Email Extension Plugin 插件 2.进入系统管理--系统设置 3.按照如下图设置 首先找到 Extended E-mail Notification
- ASP.NET MVC EF 中使用异步控制器
最近悟出来一个道理,在这儿分享给大家:学历代表你的过去,能力代表你的现在,学习代表你的将来. 十年河东十年河西,莫欺少年穷 学无止境,精益求精 为什么使用异步操作/线程池 ASP.NET MVC ...