From 229193df0c01cb9503ec8cdf7bc41fa2cfa5ce4a Mon Sep 17 00:00:00 2001
From: nijianhao654 <2197024383@qq.com>
Date: Fri, 26 Nov 2021 16:26:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80-=E9=AA=B0=E5=AD=90=E5=92=8C?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86=E6=94=B9=E6=A0=B7=E5=BC=8F=E5=80=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo.html"                                | 247 ++++++++++
 .../demo2.html"                               | 441 ++++++++++++++++++
 2 files changed, 688 insertions(+)
 create mode 100644 "\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo.html"
 create mode 100644 "\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo2.html"
diff --git "a/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo.html" "b/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo.html"
new file mode 100644
index 0000000..6093dba
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo.html"
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        div{
+            width: 100px;
+            height: 100px;
+            background-color: #eee;
+            /* border: 2px orange solid; */
+        }
+        /* #one{
+            justify-content: flex-end;
+        } */
+        .a,.b,.c,.e,.f,.g{
+            display: flex;
+            /* width: 100px; */
+            /* flex-wrap: wrap; */
+            box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.534);
+            border-radius: 5px;
+        }
+        .d{
+            box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.534);
+            border-radius: 5px;
+        }
+        .a{
+            justify-content: center;
+            /* align-content: center; */
+            align-items: center;
+            /* display: flex; */
+        }
+        .one,.two,.three{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+        }
+       .a .one{
+           
+           
+            
+            /* justify-content: center; */
+           
+        }
+        .b{
+            justify-content: space-between;/*两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。。*/
+            /* display: flex; */
+        }
+        .b .two{
+           align-self: flex-end;
+        }
+        .c{
+            justify-content: space-between;
+        }
+        .c .two{
+            /* flex-direction: column-reverse; */
+            /* background-color: aqua; */
+            /* justify-content: center; */
+            align-self: center;
+        }
+        .c .three{
+            align-self: flex-end;
+        }
+        .d .maxOne{
+            /* display: block; */
+            height: 50px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+        /* .maxOne .one{
+            align-self: flex-end;
+        }
+        .maxOne .two{
+            align-self: flex-end;
+        } */
+        .d .maxTwo{
+            /* display: flex; */
+            /* display: block; */
+            /* justify-content: flex-end; */
+            /* flex-direction: row-reverse; */
+            /* align-items: flex-start; */
+            height: 50px;
+           justify-content: space-between;
+           flex-direction: row;
+            display: flex;
+        }
+        .maxTwo .two{
+            align-self: flex-end;
+        }
+        .maxTwo .one{
+            align-self: flex-end;
+        }
+        /* .maxTwo,.maxOne{
+            display: flex;
+            /* justify-content: space-between; */
+        /* } */ 
+        .maxFour,.maxFive,.maxSix{
+            /* height: 30px; */
+            /* width: 100px; */
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .maxSix{
+            align-items: flex-end;
+        }
+        .maxFive{
+            justify-content: center;
+        }
+        .maxFive .one{
+            align-self: center;
+        }
+        .maxSeven,.maxEight{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            
+        }
+        .maxEight{
+            
+            align-items: flex-end;
+        }
+        .maxNine,.maxTen,.maxEleven{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .maxTen{
+            align-items: center;
+        }
+        .maxEleven{
+            align-items: flex-end;
+        }
+        .con,.conOne{
+            display: flex;
+            flex-direction: row;
+            /* flex-wrap: wrap; */
+            width: 550px;
+            justify-content: space-evenly;
+            background-color: white;
+        }
+        .Big{
+            display: flex;
+            /* width: 400px; */
+            flex-direction: column;
+            justify-content: space-evenly;
+            width: 500px;
+            height: 500px;
+            background-color: white;
+        }
+        .con{
+           
+        }
+    </style>
+</head>
+<body>
+    <div class="Big">
+
+    
+
+    <div class="con">
+        <!-- 骰子一 -->
+    <div class="a">
+        <div class="one" ></div>
+        <!-- <div class="yuan" id="one"></div> -->
+    </div>
+    <!-- 骰子二 -->
+    <div class="b">
+        <div class="one"></div>
+        <div class="two"></div>
+    </div>
+    <!-- 骰子三 -->
+    <div class="c">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+    
+    </div>
+    <!-- 骰子四 -->
+    <div class="d">
+        <div class="maxOne">
+            <div class="one"></div>
+            <div class="two"></div>
+        </div>
+        <div class="maxTwo">
+            <div class="one"></div>
+            <div class="two"></div>
+        </div>
+    </div>
+
+</div>
+
+<div class="conOne"> 
+    <!-- 骰子五 -->
+    <div class="e">
+        <div class="maxFour">
+            <div class="one"></div>
+            <div class="two"></div>
+        </div>
+        <div class="maxFive">
+            <div class="one"></div>
+        </div>
+        <div class="maxSix">
+            <div class="one"></div>
+            <div class="two"></div>
+        </div>
+    </div>
+    <!-- 骰子六 -->
+    <div class="f">
+        <div class="maxSeven">
+            <div class="one"></div>
+            <div class="two"></div>
+            <div class="three"></div>
+        </div>
+        <div class="maxEight">
+            <div class="one"></div>
+            <div class="two"></div>
+            <div class="three"></div>
+        </div>
+    </div>
+    <!-- 骰子九 -->
+    <div class="g">
+        <div class="maxNine">
+            <div class="one"></div>
+            <div class="two"></div>
+            <div class="three"></div>
+        </div>
+        <div class="maxTen">
+            <div class="one"></div>
+            <div class="two"></div>
+            <div class="three"></div>
+        </div>
+        <div class="maxEleven">
+            <div class="one"></div>
+            <div class="two"></div>
+            <div class="three"></div>
+        </div>
+    </div>
+</div>
+    
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo2.html" "b/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo2.html"
new file mode 100644
index 0000000..327be63
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211124-CSS\344\275\234\344\270\232-\345\270\203\345\261\200-\351\252\260\345\255\220\345\222\214\344\270\213\346\213\211\346\241\206/demo2.html"
@@ -0,0 +1,441 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+
+    .warppe{
+        background-color: rgb(243, 108, 18);
+    }
+    .container{
+        display: flex;
+        flex-flow: row wrap-reverse;
+        justify-content: space-evenly;
+       align-items: center;
+    background-color: bisque;
+    }
+    h1{
+        background-color: orange;
+    }
+    .container-flex{
+        display: flex;
+    }
+    .item{
+        width: 80px;
+        height: 40px;
+        background-color: rgb(182, 139, 124);
+        display: flex;
+
+    }
+</style>
+<body>
+      <div class="warppe">
+        <div class="container">
+        <form action="" class="myForm">
+
+        </form>
+        </div>
+          <h1>非内联 flex</h1>
+          <div class="container-flex">
+            <div class="item">1</div>
+            <div class="item">2</div>
+            <div class="item">3</div>
+            <div class="item">4</div>
+            <div class="item">5</div>
+          </div>
+      </div>
+      
+
+      <script>
+          let container=document.getElementsByClassName('container')[0];
+          let myForm=document.getElementsByClassName('myForm')[0];
+          for(let i=0;i<6;i++){
+            let selets=document.createElement('select')//创建select元素
+            myForm.append(selets)//添加到container标签里面
+            selets.classList.add('contorler-select')
+            selets.setAttribute('size',2);
+            // selets.style.overflow='hidden';
+
+          }
+          let contorlerSelect=document.getElementsByClassName('contorler-select')//获取全部的下拉框
+        //   for(let i=0;i<contorlerSelect.length;i++){
+        //     //   console.log(i);
+           
+        //   }
+     
+            if(contorlerSelect[0]){
+                for(let i=0;i<5;i++){
+                    let option= document.createElement('option')
+                        contorlerSelect[0].append(option)
+                        option.classList.add('item0')
+                            // let options=document.getElementsByTagName('option')
+                            // options[0].className.add('item1')
+
+            }
+            contorlerSelect[0].classList.add('flexDirection')
+            // console.log(document.querySelector('contorler-select').innerHTML);
+
+            
+        }
+            if(contorlerSelect[1]){
+                for(let i=0;i<4;i++){
+                    let option= document.createElement('option')
+                        
+                        contorlerSelect[1].append(option)
+                        option.classList.add('item1')
+            }
+        }
+            if(contorlerSelect[2]){
+                for(let i=0;i<7;i++){
+                   let option= document.createElement('option')
+                        contorlerSelect[2].append(option)
+                        option.classList.add('item2')
+            }
+        }
+            if(contorlerSelect[3]){
+                for(let i=0;i<6;i++){
+                   let option= document.createElement('option')
+                        contorlerSelect[3].append(option)
+                        option.classList.add('item3')
+            }
+        }
+        if(contorlerSelect[4]){
+                for(let i=0;i<7;i++){
+                   let option= document.createElement('option')
+                        contorlerSelect[4].append(option)
+                        option.classList.add('item4')
+            }
+        }
+        if(contorlerSelect[5]){
+                for(let i=0;i<13;i++){
+                   let option= document.createElement('option')
+                        contorlerSelect[5].append(option)
+                        option.classList.add('item5')
+            }
+        }
+        console.log(contorlerSelect[0]);
+       
+        let item0=document.querySelectorAll('.item0');
+        for(let i=0;i<item0.length;i++){
+            if(item0[0]){
+                item0[0].setAttribute('disabled',"flex-direction")
+            }
+            if(item0[1]){
+                item0[1].setAttribute('value',"row")
+            }
+            if(item0[2]){
+                item0[2].setAttribute('value',"row-reverse")
+            }
+            if(item0[3]){
+                item0[3].setAttribute('value',"column")
+            }
+            if(item0[4]){
+                item0[4].setAttribute('value',"column-reverse")
+            }
+        }
+
+        let item1=document.querySelectorAll('.item1')
+        for(let i=0;i<item1.length;i++){
+            if(item1[0]){
+                item1[0].setAttribute('disabled',"flex-wrap")
+            }
+            if(item1[1]){
+                item1[1].setAttribute('value',"nowrap")
+            }
+            if(item1[2]){
+                item1[2].setAttribute('value',"wrap")
+            }
+            if(item1[3]){
+                item1[3].setAttribute('value',"wrap-reverse")
+            }
+           
+        }
+
+        let item2=document.querySelectorAll('.item2')
+        for(let i=0;i<item2.length;i++){
+            if(item2[0]){
+                item2[0].setAttribute('disabled',"justify-content")
+            }
+            if(item2[1]){
+                item2[1].setAttribute('value',"flex-start")
+            }
+            if(item2[2]){
+                item2[2].setAttribute('value',"flex-end")
+            }
+            if(item2[3]){
+                item2[3].setAttribute('value',"center")
+            }
+            if(item2[4]){
+                item2[4].setAttribute('value',"space-between")
+            }
+            if(item2[5]){
+                item2[5].setAttribute('value',"space-around")
+            }
+            if(item2[6]){
+                item2[6].setAttribute('value',"space-evenly")
+            }
+            
+        }
+
+        let item3=document.querySelectorAll('.item3')
+        for(let i=0;i<item3.length;i++){
+            if(item3[0]){
+                item3[0].setAttribute('disabled',"align-items")
+            }
+            if(item3[1]){
+                item3[1].setAttribute('value',"stretch")
+            }
+            if(item3[2]){
+                item3[2].setAttribute('value',"flex-start")
+            }
+            if(item3[3]){
+                item3[3].setAttribute('value',"flex-end")
+            }
+            if(item3[4]){
+                item3[4].setAttribute('value',"center")
+            }
+            if(item3[5]){
+                item3[5].setAttribute('value',"baseline")
+            }
+            
+            
+        }
+
+        let item4=document.querySelectorAll('.item4')
+        for(let i=0;i<item4.length;i++){
+            if(item4[0]){
+                item4[0].setAttribute('disabled',"align-content")
+            }
+            if(item4[1]){
+                item4[1].setAttribute('value',"flex-start")
+            }
+            if(item4[2]){
+                item4[2].setAttribute('value',"flex-end")
+            }
+            if(item4[3]){
+                item4[3].setAttribute('value',"center")
+            }
+            if(item4[4]){
+                item4[4].setAttribute('value',"space-between")
+            }
+            if(item4[5]){
+                item4[5].setAttribute('value',"space-around")
+            }
+            if(item4[6]){
+                item4[6].setAttribute('value',"stretch")
+            }
+            
+        }
+
+        let item5=document.querySelectorAll('.item5')
+        for(let i=0;i<item5.length;i++){
+            if(item5[0]){
+                item5[0].setAttribute('disabled',"flex-flow")
+            }
+            if(item5[1]){
+                item5[1].setAttribute('value',"row nowrap")
+            }
+            if(item5[2]){
+                item5[2].setAttribute('value',"row wrap")
+            }
+            if(item5[2]){
+                item5[3].setAttribute('value',"row wrap-reverse")
+            }
+            if(item5[4]){
+                item5[4].setAttribute('value',"row-reverse nowrap")
+            }
+            if(item5[5]){
+                item5[5].setAttribute('value',"row-reverse wrap")
+            }
+            if(item5[6]){
+                item5[6].setAttribute('value',"row-reverse wrap-reverse")
+            }
+            if(item5[7]){
+                item5[7].setAttribute('value',"column nowrap")
+            }
+            if(item5[8]){
+                item5[8].setAttribute('value',"column wrap")
+            }
+            if(item5[9]){
+                item5[9].setAttribute('value',"column wrap-reverse")
+            }
+            if(item5[10]){
+                item5[10].setAttribute('value',"column-reverse nowrap")
+            }
+            if(item5[11]){
+                item5[11].setAttribute('value',"column-reverse wrap")
+            }
+            if(item5[12]){
+                item5[12].setAttribute('value',"column-reverse wrap-reverse")
+            }
+            
+        }
+        console.log(item5[1].getAttribute('value'));
+        
+        setName(item0);
+        setFirstName(item0);
+        setName(item1);
+        setFirstName(item1);
+        setName(item2);
+        setFirstName(item2);
+        setName(item3);
+        setFirstName(item3);
+        setName(item4);
+        setFirstName(item4);
+        setName(item5);
+        setFirstName(item5);
+
+        //把value值加入下拉框的方法
+        function setName(elem){
+           
+            for(let i=0;i<elem.length;i++){
+              let elemValue= elem[i].getAttribute("value");
+            //   let elemDisabled=elem[i].getAttribute("disabled")
+            //   elem[i].innerText=`${elemDisabled}`
+              elem[i].innerText=`${elemValue}`
+              elem[i].setAttribute('onclick',"")
+            }
+            // let item0Disabled=elem[0].getAttribute('disabled')
+            //  elem[0].innerText=item0Disabled
+        }
+        //把disabled值加入下拉框方法
+        function setFirstName(elem){
+           let disValue= elem[0].getAttribute('disabled')
+           elem[0].innerText=`${disValue}`
+
+        }
+        // console.log(item0[0].value);
+        // let item0Disabled=item0[0].getAttribute('disabled')
+        // item0[0].innerText=item0Disabled
+        console.log(item1.length);
+        // console.log(item1.length);          
+        //   console.log(container);
+        //   container.style.width='200px';
+        //   container.style.height="200px";
+        //   container.style.backgroundColor='red'
+        // selectClick(item0)
+
+        // let option=document.getElementsByTagName("option");
+        // option.setAttribute('onclick',`console.log("${this.value}")`)
+        // console.log(selects);
+        // for (const i of option) {
+        //     // console.log(i.value);
+        //     option.onclick=function(){
+        //        console.log(this.value); 
+        //     }
+        // }
+        // console.log(select.checked);
+        // selects.addEventListener('click',function(){
+        //     console.log(this.value);
+        // })
+        //    let item0click=document.querySelector('.item0')
+        //    item0click.onclick=function(){
+        //        console.log(.value);
+        //    }
+        // item0[1].addEventListener('click',function(){
+        //     console.log(this.value);
+        // })
+        
+        // item0.onclick=function(){
+        //     console.log(this.value);
+        // }
+        // for(let i=0;i<item0.length;i++){
+        //     item0[i].onclick=function(){
+                
+        //         console.log(this.value);
+        //     }
+        // }
+        // function get(){}
+        // let h1=document.getElementsByTagName('h1')[0];
+        // console.log(h1);
+        // h1.onclick=function(){
+        //     alert('点击')
+        // }
+        // item0[1].onclick=function(){
+        //     alert('add')
+        //     console.log('1');
+        // }
+        // console.log(contorlerSelect[0]);
+        // console.log(item0[1]);
+
+        let options=document.querySelectorAll('.item0') //获取options
+        let items=document.querySelectorAll('.container-flex');//获取盒子
+        console.log(items);
+        console.log(options);
+
+        getSelectName(item0)
+        getSelectName(item1)
+        getSelectName(item2)
+        getSelectName(item3)
+        getSelectName(item4)
+        getSelectName(item5)
+           
+            // items[0].style.='
+            // items.setAttribute('sty')
+            // items[0].style.flexDirection="column"
+
+
+        //   console.log(item0[0].getAttribute("disabled"));  
+
+        //修改样式方法
+            function getSelectName(elems){
+                for(let i=0;i<elems.length;i++){
+            elems[i].addEventListener('click',function(){
+            // console.log(elems[i].dataset.attr);
+                let value = this.value;
+                let prop=elems[0].getAttribute("disabled")
+                let newprop=newStr(prop)
+                items[0].style[newprop]=value;
+                // let prop = newStr(value);
+                // elems[0].style.color='red'
+                // items[0].style.color='red'
+                // items.style[props]=value
+                // let prop = this.attr(disabled);
+            //    let prop= this.getAttribute('disabled')
+                console.log(value);
+                console.log(newprop);
+        })
+        }
+
+            }
+            
+            //修改字符串方法，去-、改大写
+            function newStr(elem){
+                if (elem.includes('-')) {
+                    let num=elem.indexOf('-')
+                    let a=elem.split('-')
+                    let b=a.join("")
+                    let c=b.split("")
+
+                    for(let i=0;i<c.length;i++){
+                        c[num]=c[num].toLocaleUpperCase()
+                    }
+                    let e=c.join('')
+                    
+                    return e;
+                }else{
+                    return elem
+                }
+            }
+
+
+        // let inputs = document.querySelectorAll('input[name=option]');
+        // let box = document.querySelector('.item2');
+        // console.log(inputs);
+        // console.log(box);
+        // Array.from(options).forEach((ele, i) => {
+        //     ele.onchange= function() {
+        //         let value = this.value;
+        //         let prop = this.dataset.attr;
+        //         console.log(prop);
+        //         items[1].style[prop] = value;
+        //     }
+        // })
+        
+      </script>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

