练习：红色十字架

最新推荐文章于 2023-10-10 16:43:47 发布

魈傩

最新推荐文章于 2023-10-10 16:43:47 发布

阅读量992

点赞数 1

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42077503/article/details/88370972

版权

前端学习专栏收录该内容

31 篇文章 2 订阅

订阅专栏

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。
在这里插入图片描述
十字架

要求：

1.使用2个div完成

2.使用3个div完成

3.使用5个div完成

答案：
1个div：

      <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>2个DIV</title>
            <meta charset="UTF-8">
            <style type="text/css">
               #heng,#shu{
               left:50%;
               top:50%;
               position:
               absolute; 
               background-color:#f00;
               }  
			   #shu{
 			   width:50px;
			   height:150px;
			   margin-left:-25px;
               margin-top:-75px;
}  
			   #heng{
			   width:150px;
			   height:50px;
			   margin-left:-75px;
			   margin-top:-25px;
			   background-color:#f00;
			   }  
            </style>
        </head>
        <body>
         <div id="heng"></div> 
 		 <div id="shu"></div> 
        </body>
        </html>

3个div：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>2个DIV</title>
        <meta charset="UTF-8">
        <style type="text/css">
    .main{
    width:150px; 
    height:150px; 
    top:50%; 
    left:50%; 
    position:absolute; 
    margin:-75px 0 0 -75px; 
    border:2px #F00 solid;
    }  
    .heng{
    width:150px; 
    height:50px; 
    background:#F00; 
    margin-top:50px;
    }  
    .shu{
    width:50px; 
    height:150px; 
    background:#F00; 
    margin-left:50px; 
    margin-top:-100px;/*margin上边界叠加*/}  
        </style>
    </head>
    <body>
   <div class="main"> 
         <div class="heng"></div> 
         <div class="shu"></div> 
</div> 
    </body>
    </html>

5个div：
方法1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>5个DIV(www.hemin.cn)</title> 
<style type="text/css"> 
#top,#middle,#left,#right,#bottom{
height:50px;
width:50px;
position:absolute;
top:50%;
left:50%;}  
#top{
margin:-75px 0 0 -25px;
background:#F00;
}  
#middle{
margin:-25px 0 0 -25px;
background:#000;
}  
#left{
margin:-25px 0 0 -75px;
background:#00F;
}  
#right{
margin:-25px 0 0 25px;
background:#0F0;
}  
#bottom{
margin:25px 0 0 -25px;
background:#FF0;
}  
</style> 
</head> 
<body> 
<div id="top"></div> 
<div id="middle"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="bottom"></div> 
</body> 
</html>

方法2：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>2个DIV</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .main{width:150px;
            height:150px;
            top:50%; left:50%;
            position:absolute;
            margin:-75px 0 0 -75px;
            background-color: #FF0000;}
        .lefttop{width:50px;
            height:50px;
            background: #ffffff;
            position: relative;
        }
        .righttop{width:50px;
            height:50px;
            background:#ffffff;
            position: relative;
            left: 100px;
            bottom: 100px;

        }
        .leftbottom{
            width:50px;
            height:50px;
            background:#ffffff;
            position: relative;
            top: 50px;
        }
        .rightbottom{
            width:50px;
            height:50px;
            background:#ffffff;
            position: relative;
            left: 100px;
            bottom: 50px;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="lefttop"></div>
    <div class="leftbottom"></div>
    <div class="righttop"></div>
    <div class="rightbottom"></div>
</div>
</body>
</html>

魈傩

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
练习：红色十字架

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。十字架要求：1.使用2个div完成2.使用3个div完成3.使用5个div完成答案：1个div： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
复制链接

扫一扫