Fatal编程技术网
  • html/
  • Html 交错柱效应

Html 交错柱效应

html css

Html 交错柱效应,html,css,Html,Css,因此，我试图实现以下列的效果： 使用下面的代码，我已经能够实现图像的左侧。左边的三个盒子位置很好我不知道如何添加右列/框而不影响所有左侧。（请注意，右侧的白色补丁正好是图像的位置，不要担心这一点） HTML: 我确实尝试过添加浮动和显示，但都不起作用，至少就我的操作方式而言。我注释掉了右边栏的CSS和HTML，以生成左边栏 通过最少的编辑，我让它看起来非常接近你的图像 步骤： 未注释右列的代码（HTML和CSS） 修复了关闭.gen_infodiv标记 将.genu info移动到.wrap的

因此，我试图实现以下列的效果：

使用下面的代码，我已经能够实现图像的左侧。左边的三个盒子位置很好我不知道如何添加右列/框而不影响所有左侧。（请注意，右侧的白色补丁正好是图像的位置，不要担心这一点）

HTML:

我确实尝试过添加浮动和显示，但都不起作用，至少就我的操作方式而言。我注释掉了右边栏的CSS和HTML，以生成左边栏

通过最少的编辑，我让它看起来非常接近你的图像

步骤：

  • 未注释右列的代码（HTML和CSS）
  • 修复了关闭
    .gen_info
    div标记
  • 将
    .genu info
    移动到
    .wrap
    的顶部
    • .wrap{
宽度：900px；
高度：700px；
边框：1px纯黑；
}
/*左上角用户部分*/
.user_con{
宽度：430px；
高度：150像素；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*右栏（信息概述）*/
.gen_信息{
宽度：430px；
高度：650px；
利润率：10px；
显示：内联；
浮动：对；
背景色：rgba（23,23,23,1.0）；
}
/*左列（规则）*/
.规则{
宽度：430px；
高度：350px；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*左下栏（音乐和连接信息）*/
宋先生{
宽度：430px；
高度：125px；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*状态栏（下载栏）*/
.状态栏{
宽度：880px；
高度：5px；
利润率：10px；
背景色：rgba（44,44,44,1.0）；
}
    通过最少的编辑，我让它看起来非常接近您的图像

    步骤：

  • 未注释右列的代码（HTML和CSS）
  • 修复了关闭
    .gen_info
    div标记
  • 将
    .genu info
    移动到
    .wrap
    的顶部
    • .wrap{
宽度：900px；
高度：700px；
边框：1px纯黑；
}
/*左上角用户部分*/
.user_con{
宽度：430px；
高度：150像素；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*右栏（信息概述）*/
.gen_信息{
宽度：430px；
高度：650px；
利润率：10px；
显示：内联；
浮动：对；
背景色：rgba（23,23,23,1.0）；
}
/*左列（规则）*/
.规则{
宽度：430px；
高度：350px；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*左下栏（音乐和连接信息）*/
宋先生{
宽度：430px；
高度：125px；
利润率：10px；
背景色：rgba（23,23,23,1.0）；
}
/*状态栏（下载栏）*/
.状态栏{
宽度：880px；
高度：5px；
利润率：10px；
背景色：rgba（44,44,44,1.0）；
}
    

    <html>
<head>
<title>Exodus - Testing</title>
<link rel=StyleSheet href="main.css" type="text/css" media=screen>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
        <div class="wrap">
            <div class="user_con">

            </div>
            <!-- <div class="gen_info">

            <div> -->
            <div class="rules">

            </div>
            <div class="song_con">

            </div>
            <div class="status_bar">

            </div>
        </div>
</body>

    .wrap {
width: 900px;
height: 700px;
border: 1px solid black;
}

/* TOP LEFT USER SECTION */
.user_con {
width: 430px; 
height: 150px;
margin: 10px;
background-color: rgba( 23,23,23,1.0);
}

/* RIGHT COLUMN (INFORMATION GENERAL) */
/* .gen_info {
width: 430px;
height: 650px;
margin: 10px;
display: inline;
float: right;
background-color: rgba( 23,23,23,1.0);
} */

/* LEFT COLUMN (RULES) */
.rules {
width: 430px; 
height: 350px;
margin: 10px;
background-color: rgba( 23,23,23,1.0);
}

/* BOTTOM LEFT COLUMN (MUSIC AND CONNECTION INFO) */
.song_con {
width: 430px;
height: 125px;
margin: 10px; 
background-color: rgba( 23,23,23,1.0);
}

/* STATUS BAR (DOWNLOAD BAR) */
.status_bar {
width: 880px;
height: 5px;
margin: 10px;
background-color: rgba( 44,44,44,1.0);
}