老师这样可以吗

来源:3-12 编程练习

慕田峪8130438

2021-03-15 14:17:08

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

<title></title>

<style>

*{

    margin:0;

    padding:0;

}

    div{

        width:100%;

        height:100%;

    }

    [alt] {

        width:200px;

        height:300px;

        position:fixed;

    }

    [alt="left"]{

        top:50%;

        right:0;

        margin-top:-150px;

    }

    [alt="right"]{

        top:50%;

        margin-top:-150px;

        

    }

    

</style>

</head>

<body>

<div>

    <img src="http://climg.mukewang.com/59c9f7ce0001839219034033.png">

</div>

<div>

    <img src="http://climg.mukewang.com/5a3383c70001f1b702240364.png" alt="left">

</div>

<div>

    <img src="http://climg.mukewang.com/5a3383d00001a3dd02240364.png" alt="right">

</div>


</body>

</html>


写回答

1回答

好帮手慕慕子

2021-03-15

同学你好,由于没有给第一张图片设置宽度,图片默认会以自身宽度显示,导致在其他电脑下打开页面,水平方向出现滚动条,如下图所示:

http://img.mukewang.com/climg/604efe9e09ca3e1f06110523.jpg

建议:可以给图片添加类名,通过类选择器给图片设置百分百宽度

http://img.mukewang.com/climg/604efee9094c660911970488.jpg

代码中存在其他的问题,可以参考如下解答:

1、可以去掉给div设置的宽高样式,让其由里面的图片撑开宽高即可,简化代码书写

http://img.mukewang.com/climg/604eff5c091a6ed802710106.jpg

2、可以将样式相同的代码全部书写在一起,然后只需要单独给图片设置left和right属性即可,简化书写,示例:

http://img.mukewang.com/climg/604efffc0940c5ee05220465.jpg

祝学习愉快~

0

0 学习 · 15276 问题

查看课程