0
私はPHP連想配列のリストを持っています。リスト内の各連想配列は色です。それは、16進コード、ラベル、および家族を持っています。家族は基本的な色(青、赤、緑など)になり、ラベルはより特定の色になります。青い家庭のためには、水中海洋、靑炭、空色があります。PHPでHTMLコンテナを区切っています。連想配列キー
私のテンプレートでは、基本的な2つの部分からなるコンテナを作成し、上半分は16進色、下半分は16進数のコードとラベル名で記述します。私は各アイテムを家族のために1つの大きな容器に入れておきたい。たとえば、海洋、淡水、および空の青はヘッダ「青」で1つの容器に入れられ、ライム、森、および黄緑がヘッダー「緑」のコンテナにも存在します。私は連想配列のリストを事前にファミリフィールドで並べるので、実際に見つけ出す必要があるのは、ファミリの値が変わったときに新しい 'ファミリコンテナ'を作成する方法をHTMLに伝えることです。
私はPython開発者であり、すべてのものPHPには新しいものです。家族による
PHP HTML
<?php
$allColors = array(
'0' => array(
"id"=> "1",
"family"=> "blue",
"name"=> "ariel blue",
"hex"=> "#339FFF"),
'3' => array(
"id"=> "3",
"family"=> "green",
"name"=> "forest",
"hex"=> "#FAFF33"),
'1' => array(
"id"=> "2",
"family"=> "blue",
"name"=> "aqua marine",
"hex"=> "#339FFF"),
'4' => array(
"id"=> "4",
"family"=> "green",
"name"=> "lime",
"hex"=> "#FAFF33"),
'2' => array(
"id"=> "5",
"family"=> "blue",
"name"=> "teal",
"hex"=> "#339FFF"),
'5' => array(
"id"=> "6",
"family"=> "green",
"name"=> "yellow-green",
"hex"=> "#FAFF33")
);
array_multisort(array_column($allColors, 'family') , SORT_DESC, $allColors);
$key_list = ["blue", "green"]
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<?php
$currFamily = $allColors[0]["family"]
?>
<?php foreach($allColors as $key => $value): ?>
if ($value["family"] != $currFamily) {
<div id="family-container" style="border: 1px solid <?php echo $value["family"]; ?>; background-color: $currFamily;">
}
<h2>Blue <?php echo $currFamily; ?></h2>
<div class="child-container" style="margin-right: 20px; width: 100px; height: 150px; border: 1px solid black; float: left;">
<div style="width: 100%; height: 100px; float: right; border-bottom: 1px solid black; background: <?php echo $value["hex"]; ?>;"></div>
<div style="width: 100%; height: 50px; float: right;">
<?php echo $value["name"]; ?>;
<?php echo $value["hex"]; ?>;
</div>
</div>
if ($value["family"] != $currFamily) {
</div>
$currFamily = $value["family"]
}
<?php endforeach; ?>
</body>
</html>