4.网页实战常用知识

一、中国服务商(水平垂直居中)

1、水平垂直居中

父元素相对定位,该元素使用绝对定位;

然后给该元素设置:

top:50%;     (50%为相对于父元素的高度)

left:50%;     (50%为相对于父元素的宽度)

margin-left:-(width/2);(该元素宽度的负一半)

margin-top:-(height/2); (该元素高度的负一半)

2、APP、webAPP、Android、iOS中用的较多的为弹窗

二、Z-index层级。

在使用了(绝对定位和固定定位)定位的元素中,层级z-index高的,显示在前面。

三、背景定位场景(中国商业服务商)。

加上padding-left,再用使用background。

四、Css 精灵(css sprite,雪碧图)应用场景(中国商业服务商)

1、  在线制作工具: https://www.toptal.com/developers/css/sprite-generator

(将多张图片合并为一张图片使用,并且会设有background-position的值,引用时合成背景图片公用)

2、减少http请求,提升网页加载速度.

3、合成的大图的大小小于多张小图,减少字节数,节省服务器流量.

五、Overflow隐藏溢出场景(运达集团 )。

a)        Visiable默认值,内容不裁剪。

b)        Hidden,内容会被裁剪,隐藏溢出的元素。

c)        scroll,内容被裁剪,浏览器以滚动条的形式显示其他内容。

d)        auto,浏览器根据内容自动判断是否需要添加滚动条来显示溢出内容.

六、伪类场景(中国商业服务商)。

a)        鼠标移动到链接上的样式a:hover。

 a:link {color:springgreen;/* 未被访问的链接 */}

 a:visited {color:red;/* 已访问的链接 */}

 a:hover {color:orange;/* 鼠标移动到链接上 */}

 a:active {color:blue;/* 选中的链接 */}

顺序一定不能错不然会不生效(l v h a

七、固定定位场景(启梦科技)。

b)        固定定位一种特殊的绝对定位,相对于可视区域定位。

八、锚链接

c)        在a标签的href中使用#再加上某一个元素的id值,点击a标签跳到相应的模块。

d)        只有id锚链接才生效

九、透明度场景(启梦科技)。

e)        opacity,数值范围0~1.

f)         半透明背景影响文字显示,将背景和文字分离.

十、两栏自适应布局场景(后台管理系统)。

g)        Html的高度为100%,高度为浏览器可视区域高度。

h)       Width为auto(不设宽度,margin值会影响元素的宽度:width+margin=父元素宽度),width为100%(设宽度为100%,margin值不会影响宽度,本身的宽度=父元素的宽度).

<!DOCTYPE html>

<htmllang="en">

<head>

    <metacharset="UTF-8">

    <metaname="viewport"content="width=device-width, initial-scale=1.0">

    <metahttp-equiv="X-UA-Compatible"content="ie=edge">

    <title>后台管理系统左右栏布局</title>

    <style>

        *{ margin:0px;padding:0px;}

        html,body{width:100%;height:100%;}

        /* 和可视区域一样高,所以先要将父元素设为和可视区域一样高 */

        .left{

            width:300px;

            height:100%;

            float:left;

            background: #0a1f2f;

            position: fixed;

        }

        .right{

            /* 不设置宽度,宽度默认值为auto

            设置100%即为父元素的宽度 */

            height:2000px;

            background: red;

            width:100%;

        }

    </style>

</head>

<body>

    <!-- 两栏自适应布局 -->

    <divclass="left">

    </div>

    <divclass="right">

    </div>

</body>

</html>

十一、单行文本溢出:

1、overflow: hidden;隐藏溢出   

      text-overflow: ellipsis;文本溢出使用省略号显示  

      white-space: nowrap;强制文本不换行

2、内联元素设置行高不起作用,必须给块级元素或者内联块元素设置行高.

十二、H1加上文本缩进 text-indent:xxxpx,隐藏网站名。

侧重于网站知名度的网站一般给网页的logo加h1,且h1需要写文字,为了让文字不出现在网页中一般使用文本缩进属性text-indent:-99999px;隐藏文字

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值