html-day08自适应

简介: html-day08自适应

html-day08自适应


1.透明度

opacity:0~1的数字;
filter:alpha(opacity=0~100的数字);
0代表完全透明,opacity属性1或者filter的100代表完全不透明;
说明:这是让元素整体都透明
如果只是让颜色透明,用rgba(R,G,B,透明度);

2.自适应

概念:能够根据设备类型和尺寸、自动调整页面效果,以达到显示一个比较正常的布局效果。
1.宽度自适应
    1.不设置宽度
    2.使用百分比
    3.使用最大最小宽度
        min-width:*px; 设置最小宽度   【版心外面的盒子】
        max-width:*px; 设置最大宽度   【响应式】
2.高度自适应
    1.不设置高度。
        注意:如果子元素浮动,会脱离文档流,造成高度塌陷,所以需要清除浮动,解决这个问题。
            清除浮动 | 解除塌陷的方式:
                方式1:
                    1.给浮动元素的最后面添加一个空的div,并给他一个类名clear    <div class='clear'></div>
                    2.给该元素设置唯一的样式 .clear{clear:both; }
                方式2:
                    1.给浮动元素的父亲添加类名clearfix
                    2.设置样式
                        .clearfix:after{           //在该元素的内容后面添加一个伪元素
                            display:block;          //伪元素的类型是块级元素
                            content:'';             //元素的内容为空的
                            clear:both;             //清除前面兄弟的浮动
                            height:0;               //处理低版本兼容的
                        }
                        .clearfix{  zoom:1;  }     //IE6清除浮动的
                方式3:
                    1.给浮动元素的父亲添加样式  overflow:hidden;  【有作弊嫌疑】
    2.使用百分比
        注意:如果要实现一屏页面,需要先加
            html,body{
                width:100%;
                height:100%;
            }
    3.使用最大最小高度
        min-height:*px; 设置最小高度  【响应式】
        max-height:*px; 设置最大高度  【响应式】

3.伪元素

e:after{ content:'内容' }    在元素e的内容后面添加内容
e:before{ content:'内容' }   在元素e的内容前面添加内容
伪类和伪元素的区别: 【面试题】
    伪类是一种临时状态,只有状态触发的时候生效。伪元素是一个假的元素,虚拟的dom节点。
    伪类使用单冒号,伪元素使用双冒号。
    :after和::after都是伪元素,只是是不同版本写法。
::selection{  }       鼠标选中的文字样式设置
::placeholder{   }    提示信息的样式设置 

4.兼容最小高度的写法

min-height:*px;
height:auto !important;
_height:*px; 【IE5识别】
相关文章
|
移动开发 前端开发 JavaScript
【值得收藏】HTML5使用多种方法实现移动页面自适应手机屏幕的方法总结
随机智能手机,平板等智能移动设备的普及。移动端是我们目前接触最多的页面展示终端,不管是对于开发者还是其他普通的使用者都是普遍的存在,而且移动终端的使用比电脑更广泛,更频繁,特别是当微信平台等变成我们日常使用工具之后。所以对于开发者来说,不管任何开发任何界面都需要着重考虑页面对移动设备的兼容以及自适应。才能让用户体验性更好。
1338 0
|
6天前
自适应窗口图片轮播HTML代码
自适应窗口图片轮播HTML代码
22 2
自适应窗口图片轮播HTML代码
|
6天前
|
API
超级炫酷个人引导页自适应HTML源码
超级炫酷个人引导页自适应HTML源码
33 3
超级炫酷个人引导页自适应HTML源码
|
6天前
|
移动开发 API HTML5
HTML5响应式自动采集API壁纸系统源码自适应手机端
HTML5响应式自动采集API壁纸系统源码自适应手机端
44 11
HTML5响应式自动采集API壁纸系统源码自适应手机端
|
6天前
|
前端开发
自适应APP下载页HTML源码
自适应APP下载页HTML源码
60 0
自适应APP下载页HTML源码
|
11月前
|
前端开发 容器
【HTML+CSS】grid自适应网站布局之服务项目展示
【HTML+CSS】grid自适应网站布局之服务项目展示
106 0
|
前端开发
一个注册页面的前端模板(html+css+javascript)可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用。
193 0
一个注册页面的前端模板(html+css+javascript)可自适应屏幕
|
前端开发
【web】一个自适应的导航栏前端设计(只含HTML+CSS)
【web】一个自适应的导航栏前端设计(只含HTML+CSS)
271 0
【web】一个自适应的导航栏前端设计(只含HTML+CSS)
|
前端开发
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
HTML+CSS制作可以自适应的数据表格
|
前端开发
html 三列布局(两列自适应,一列固定宽度)
原文:html 三列布局(两列自适应,一列固定宽度) 不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果。 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ***************...
842 0