CSS 布局4（贴在下方、块之间的空格、显示图片一部分、练习）

最新推荐文章于 2023-11-09 16:34:56 发布

litengbin

最新推荐文章于 2023-11-09 16:34:56 发布

阅读量806

点赞数

分类专栏：前端-HTML、CSS、Javascript

前端-HTML、CSS、Javascript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一个DIV始终贴在下方

首先把蓝色div设置为相对定位
然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面

<style>
#div1
        {
            position: relative;
            height: 300px;
            width: 90%;
            background-color: skyblue;
        }
        #div2
        {
            position: absolute;
            bottom: 0;
            height: 30px;
            width: 100%;
            background-color: lightgreen;
        }
    </style>
 
<div id="div1">
    <div id="div2"> 无论蓝色div高度如何变化，绿色div都会贴在下面
    </div>
</div>

CSS 布局块之间的空格

1.如果多个span连续编写，像这样：

<span>连续的span</span><span>连续的span</span>

是不会有空格的
但是真正开发代码的时候，一般不会连续书写span,而是不同的span之间有回车换行，比如这样：

<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>

而这样编写代码，就会导致<span>之间出现空格

<style>
span{
border-bottom:2px solid lightgray;
}
</style>
 
<div class="continue">
<span>连续的span</span><span>连续的span</span><span>连续的span</span><span>连续的span</span>
</div>
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>

2.解决办法
使用float来解决。
float使用完毕之后，记得在下面加上 <div style="clear:both"></div> 用于使得后续的元素，不会和这些span重复在一起
因为浮动之后就会把<span>与<span>元素之间的回车换行“环绕” 掉

<style>
div.nocontinue span{
border-bottom:2px solid lightgray;
  float:left;
}
</style>
  
<div class="nocontinue">
<span>有换行的span</span>
<span>有换行的span</span>
<span>有换行的span</span>
</div>
 
<div style="clear:both"></div>
 
<div>后续的内容</div>

CSS 应用显示图片一部分

1.完整的图片

<img src="g.gif">

2.使用背景方式
第一种方式，使用背景的方式获取一部分图片
对div使用背景图片

background:transparent url(g.gif) no-repeat scroll -83px -0px ;

等同于

background-color:transparent;
background-image:url(g.gif);
background-repeat:no-repeat;
background-attachment:scroll;
background-position: -83px -0px;

设置scroll -83px -0px 把图片向左滚动83个像素，向上滚动0个像素。
再把div大小设置为和小图片大小一样，即可大小只显示部分图片的效果

<style>
div{
    width:25;
    height:25;
    background:transparent url(g.gif) no-repeat scroll -83px -0px ;
}
  
</style>
 
<div></div>

2.使用img方式
借助裁剪的方式只显示部分图片：

clip:rect(top, right, bottom, left)

裁剪之后，只显示被裁剪出来的图片，所以还需要把整个图片向左移动，才看上去像拿到了想要的那部分图片

img{
    position:absolute;
    left:-83px;
    clip:rect(0px 108px 25px 83px);
}

<style>
img{
    position:absolute;
    left:-83px;
    clip:rect(0px 108px 25px 83px);
}
</style>
 
<img src="g.gif">

练习

<!DOCTYPE html>


<html>
    <head>
        <meta charset="GB2312">
        <title>练习</title>
    <style>
        div.yidong{
            margin:auto;
            width:700px;
            height:600px;
            padding:20px
        }
        div.background{
            width:610px;
            height:480px;
            border:2px solid lightblue;
        }
        span.biaoti{
            display:block;
            background-color:lightblue;
            margin:2px;
            font-size:15px;
            font-weight:bold;
            color:steelblue;
        }
        .red{
            color:red;
        }
        table{
            /*border:1px solid red;*/
            width:100%;
            border-bottom:2px solid lightcyan;
            margin:1px;
            padding:1px;
        }
        td{
            height:70px;
            padding:6px;
            margin:2px;
        }
        .pt_ziti{
            font-size:12px;
            letter-spacing:1px;
        }
        a.lj_ziti{
            font-size:11px;
            letter-spacing:1.5px;
        }
        td.background{
            background-color:whitesmoke;
            width:330px;
        }
        input{
            width:120px;
        }
        tr
        td.one{
            width:20%
        }
        td.two{
            width:20%
        }
        td.thr{
            width:60%
        }
    </style>
    </head>
    <body>
        <div class="yidong">
        <span class="pt_ziti red">请注意：带有“*”的项目必须填写</span>
        <div class="background">
            <span class="biaoti">填写您的用户名：</span>
            <table class="a">
                <tr>
                    <td class="pt_ziti one"><font color="red">*</font>通行证用户名：</td>
                    <td class="two"><input type="text" value="请输入用户名" οnfοcus="if(value=='请输入用户名') {value=''}" οnblur="if (value=='') {value='请输入用户名'}" style="background-color:ghostwhite ; color:lightgray" /><br/><a class="lj_ziti" href="#";>查看用户名是否被占用</a></td>
                    <td class="pt_ziti background thr">用户名由a~z的英文字母（不区分大小写）、0~9的数字、<b>点、减号</b>或<b>下划线</b>组成，长度为3~18个字符，只能以数字或者字母开头和结尾，例如：kyzy_001.</td>
                </tr>
            </table>
            <span class="biaoti">请填写安全设置：<span style="font-size:small; font-weight:normal">（安全设置用于验证帐号和找回密码）</span></span>
            <span class="pt_ziti red">以下信息对保证您帐号的安全极为重要，请您务必认真填写.</span>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>输入登录密码：<br/><span class="red">*</span>登录密码确认：</td>
                    <td class="two"><input type="text"style=" background-color:ghostwhite";><br style="margin:5px"/><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">密码长度为6~16位，区分字母大小写，登录密码可以由字母、数字、特殊字符组成.【<a class="lj_ziti" href="#";>更多说明</a>】</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>密码提示问题：<br/><span class="red">*</span>密码提示答案：</td>
                    <td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">当您忘记密码时可以由找回密码.例如，问题是“我的哥哥是谁”，答案为“peter2”.问题长度<b>不大于36</b>个字符，一个汉子占两个字符，答案长度在6~30位之间，区分大小写.【<a class="lj_ziti" href="#">更多说明</a>】</td>
                </tr>
            </table>
            <table>
                <tr>
                    <td class="pt_ziti one"><span class="red">*</span>输入安全码：<br/><span class="red">*</span>安全码确认：</td>
                    <td class="two"><input type="text" style=" background-color:ghostwhite";><br/ style="margin:5px"><input type="text" style=" background-color:ghostwhite";></td>
                    <td class="pt_ziti background thr">安全码时您找回密码的重要途径，安全码长度为6~16位，区分字母大小写，由字母，数字特殊字符组成.<span class="red">特别提醒：安全码一旦设定，将不可自行修改.</span>【<a class="lj_ziti" href="#">更多说明</a>】</td>
                </tr>
            </table>
            <center></span><input style="margin:10px;" type="button" value="提 交 表 单"></center>
        </div>
        </div>
         
    </body>
</html>

litengbin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 布局4（贴在下方、块之间的空格、显示图片一部分、练习）

一个DIV始终贴在下方首先把蓝色div设置为相对定位然后把内部的绿色div设置为绝对定位， bottom: 0表示贴在下面#div1 { position: relative; height: 300px; width: 90%; background-color:
复制链接

扫一扫

专栏目录