实现一个自适应网页用到的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和无线基站的不断普及,越来越多的人开始使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端. ...
随机推荐
- POST在发送数据的时候使用的是HTTP命令
防止SQL注入 SQL(结构化查询语言)是基于美国国家标准学会(ANSI)标准,并作为共同的语言与数据库通信.每个数据库系统增加了一些专有功能到基本的ANSI SQL. SQL注入是一门将制作好的SQ ...
- C语言中static的作用
(1)在函数体内,局部的static变量.生存周期为程序的整个生命周期:作用域却在定义了的函数体内.一个被声明为静态的变量在这个函数被调用过程中维持其值不变.因为它分配在静态存储区域,函数调用结束以后 ...
- win 10 常见问题
Microsoft Edge Can't Open Local Domains IE Edge浏览器打不开本地站点 解决方法:解决方法
- 使用 Swift 在 iOS 10 中集成 Siri —— SiriKit 教程
下载 Xcode 8,配置 iOS 10 和 Swift 3 (可选)通过命令行编译 除 非你想使用命令行编译,使用 Swift 3.0 的工具链并不需要对项目做任何改变.如果你想的话,打开 Xcod ...
- C#多线程环境下调用 HttpWebRequest 并发连接限制
C#多线程环境下调用 HttpWebRequest 并发连接限制 .net 的 HttpWebRequest 或者 WebClient 在多线程情况下存在并发连接限制,这个限制在桌面操作系统如 win ...
- mongoperf
官方文档 mongoperf is a utility to check disk I/O performance independently of MongoDB. It times tests o ...
- 2.Linux如何学习
Linux的应用: 企业应用 个人应用 平行运算:所谓的平行运算指的是将原本的工作分成多份然后交给多台主机去运算,最终再将结果收集起来的一种方式.由于通过高速网络使用到多台主机(集群),将原本需要很长 ...
- DWR实现扫一扫登录功能
前言 <DWR实现后台推送消息到Web页面>一文中已对DWR作了简介,并列出了集成步骤.本文中再一次使用到DWR,用以实现扫一扫登录功能. 业务场景 web端首页点击"登陆&qu ...
- Python开发【杂货铺】:模块logging
logging模块 很多程序都有记录日志的需求,并且日志中包含的信息即有正常的程序访问日志,还可能有错误.警告等信息输出,python的logging模块提供了标准的日志接口,你可以通过它存储各种格式 ...
- java实现删除文件以及文件夹
首先,需要明确的是File类中的delete()方法适用于删除空目录,或者单个文件. 然后,对于二级目录以上的文件夹的删除,需要分两步进行删除. 1.删除最底层目录下面的文件,或者空目录 当有多个文件 ...