码迷,mamicode.com
首页 > Web开发 > 详细

前端逼死强迫症之css续集

时间:2017-07-08 11:25:47      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:pci   sub   action   home   eth   strong   pac   get   image   

上节内容回顾

如果点击图片调转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框。

因为a标签默认字体颜色就是蓝色,img标签继承了父级标签,而IE浏览器默认给边框加了宽度。解决:

<head>
    <style>
        img {
            border: 0;
        }
    </style>
</head>
<body>
    <a href="http://blog.csdn.net/fgf00" target="_blank">
        <img src="作业--效果图.png" style="width: 300px; height: 200px" />
    </a>
</body>

回顾

1、块级和行内
    2、form标签 提交表单
            <form action=‘http://sssss‘ methed=‘GET‘ enctype="multipart/form-data">
                <div>asdfasdf</div>
                <input type=‘text‘ name=‘q‘ />
                # 上传文件
                <input type=‘file‘ name=‘f‘ />  <!--依赖form表单属性 enctype-->
                <input type=‘submit‘ />
            </form>

            GET: http://sssss?q=用户输入的值&b=用户输入的内容
            POST:
                请求头
                请求内容
    3、display: block;inline;inline-block
    4、float:
        <div>
            <div style=‘float:left;‘>f</div>
            <div style=‘clear:both;‘></div>
        </div>

    5、margin: 0 auto;  <!--整个页面居中-->
    6、padding, ---> 内边距。自身发生变化

一、css之position分层

1.position:fixed 永远固定位置

返回顶部和上方的菜单,永远固定在一个位置

网页有好几屏,不管怎么拉,右下角都有个返回顶部,网页的菜单也一直固定在上方。

前边的内容,所有的页面都是在一层上的。实现返回顶部,就需要position:fixed分层了。

CSS全称:层叠样式表

  • 返回顶部

position:fixed ==> 固定在页面某个位置

<div onclick="GoTop();" style="width: 40px; height: 40px; background-color: #0000cc; color: white;
    position: fixed;
    bottom: 20px;
    right: 20px;
    ">返回顶部</div>
<div style="height: 5000px; background-color: #dddddd;">FGFGF</div>
<script>
    function GoTop(){
        document.body.scrollTop = 0;
    }
</script>
  • 菜单永远在顶部

菜单position固定,内容margin设定外边距

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height:48px;  background-color:#2459a2;  color: #dddddd;
            position:fixed;
            top:0;  right:10px;  left:10px;
        }
        .pg-body{
            background-color: #dddddd;  height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>

2.position:relative+absolute相对定位

posttion: absolute :一次性固定在网页某个位置,再移动滑轮跟着动

posttion: relative :单独使用没有任何变化。

组合(relative + absolute) :固定在父类标签的某个位置。

<div style="position: relative; width:500px;height:200px; background-color: #b3b3b3; margin:auto;">
    <div style="position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background-color: blue;"></div>
</div>

3.多层展示

  • opcity: 0.5 透明度
  • z-index: 层级顺序 ,值大在上面
<!--z-index:值大的在上面; display:none;-->
<div style="z-index:10; position:fixed;
top:50%; left:50%;margin-left:-250px; margin-top:-200px;  /*居中*/
background-color:white; height:400px; width:500px;">
    <input type="text" />
</div>

<!--opacity:0.5 透明度;上右下左:0:全遮住-->
<div style="z-index:9; position:fixed; opacity:0.5;
top:0; bottom:0; right:0; left:0; background-color:black;"></div>

<div style="height:5000px; background-color: greenyellow">FGFFGF</div>

二、css之overflow 图片显示方式

当图片大小超过了父级标签,就把父级标签撑开了。

  • overflow: auto:图片滚动条显示
  • overflow: hidden:图片只显示父级标签大小
<!--图片出现滚动条-->
<div style="height:200px; width:300px; overflow: auto">
    <img src="1.png" />
</div>
<!--图片只显示父级大小-->
<div style="height:200px; width:300px; overflow: hidden">
    <img src="1.png" />
    <!--<img src="1.png" style="height:200px; width:300px;"/>-->
</div>

三、css之hover鼠标移动过去样式

网站上,鼠标移动过去,变颜色

样式后加上hover :当鼠标移动到当前标签上时,才生效的css属性

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;  left: 0;  top: 0;  height: 48px;
            background-color: #2459a2;  line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;  /*上 右 下 左 加上内边距*/
            color: white;
        }
        /*当鼠标移动到当前标签上时,以下CSS属性才生效*/
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">LOGO</a>
            <a class="menu">全部</a>
            <a class="menu">42区</a>
            <a class="menu">段子</a>
            <a class="menu">1024</a>
        </div>
    </div>

    <div class="pg-body">
        <div class="w">a</div>
    </div>
</body>

四、css之background背景

  • background-color :背景颜色
  • background-image:背景图片

设置了背景图片,当图片很小,父级div很大,图片会堆叠重复放。水平垂直方向都会帮你重复增加。

<div style="height:790px; width:980px; border: 1px solid red;">
    <div style="background-image: url(http://www.autohome.com.cn/images/error/bg.png); height: 100%; "></div>
</div>

background-repeat(no-repeat;repeat-x;repeat-y):指定方向堆叠

  • no-repeat:不堆叠
<div style="background-image:url(‘4.gif‘); height: 80px;background-repeat:no-repeat"></div>
  • repeat-x:只水平堆叠

  • repeat-y:只垂直堆叠

background-position :指定背景显示位置 
如图:icon.png 
技术分享

<div style="background-image: url(icon.png);
             background-repeat:no-repeat;
             height: 20px;width:20px;
             border: 1px solid red;
             background-position-x: 0;    <!--水平方向位置-->
             background-position-y: -78px;<!--垂直方向位置-->
             "></div>

这样指定位置有点麻烦,下面说下几种指定x、y值的方式

<!--第一种:直接x、y写-->
background-position-x:
background-position-y:
<!--第二种:background-position(直接跟x、y值)-->
background-position: 10px 10px  
<!--第三种: 简写的方式:-->
<div style="background: #f8f8f8 url(icon.png) 0 -78px no-repeat;
        height: 20px;width:20px;
        border: 1px solid red;
        "></div>

六、总结

CSS补充
    position:
        a. fiexd => 固定在页面的某个位置

        b. relative + absolute

            <div style=‘position:relative;‘>
                <div style=‘position:absolute;top:0;left:0;‘></div>
            </div>

    opcity: 0.5 透明度
    z-index: 层级顺序   
    overflow: hidden,auto
    hover

    background-image:url(‘image/4.gif‘); # 默认,div大,图片重复访
    background-repeat: repeat-y;
    background-position-x:
    background-position-y:

    示例:输入框右边放置图标

 

前端逼死强迫症之css续集

标签:pci   sub   action   home   eth   strong   pac   get   image   

原文地址:http://www.cnblogs.com/lixiaoliuer/p/7136035.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!