学习笔记 CSS JavaScript html

﹏ヽ暗。殇╰゛Y 2023-03-13 15:27 114阅读 0赞

[学习笔记 CSS JavaScript html][CSS JavaScript html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luSmF2YVdlVHJ1c3Q_size_16_color_FFFFFF_t_70][]

<html>
    	<head>
    		<style>
    			#app {
    				position: absolute;
    				top: 50px;
    				left: 80px;
    				height: 200px;
    				width: 300px;	
    				border: solid 1px;
    				border-color: pink
    			}
    			#red    { background-color: red }
    			#blue   { background-color: blue }
    			#yellow { background-color: yellow }
    			#grey   { background-color: grey }
    			li {
    				list-style: none;
    				float: left;
    				margin: 0px;
    				padding: 5px	
    			}
    			li p {
    				margin: 0;
    				padding: 0 
    			}
    			li p:hover {
    				cursor: pointer;
    				box-shadow: 2px 2px 3px #888888;
    			}
    			
    			#list {
    				width: 100%;
    				height: 50px;
    				background-color: #0F6;
    				overflow: hidden; 
    			}
    			#info {
    				width: 100%;
    				height: 150px;
    				background-color: #C93;
    				display: flex;           /*任何一个容器都可以指定为Flex布局*/
    				justify-content: center; /*主轴（横轴）方向上的对齐方式*/
    				align-items: center      /*侧轴（纵轴）方向上的对齐方式*/
    			}
    			#msg {
    				margin: 0;
    				padding: 0;
    				text-align: center
    			}
    			ul {
    				margin:0px;
    				padding:0px;
    				width: 100%;
    				height: 50px;	
    				display: flex;           /*任何一个容器都可以指定为Flex布局*/
    				justify-content: center; /*主轴（横轴）方向上的对齐方式*/
    				align-items: center      /*侧轴（纵轴）方向上的对齐方式*/
    			}
    		</style>
    		<script>
    			window.onload = function() {
    				var ulEle = document.getElementsByTagName("ul")[0];
    				var liList = ulEle.getElementsByTagName("li");
    				for (var i = 0; i < liList.length; i++) {
    					liList[i].firstChild.onclick = function() {
    						var divInfo = document.getElementById("info");
    						divInfo.style.backgroundColor = this.innerHTML;
    						divInfo.firstElementChild.innerHTML = this.innerHTML;
    						divInfo.firstElementChild.style.color = "white";
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id="app">
    			<div id="list">
    				<ul>
    					<li><p id="red">RED</p></li>
    					<li><p id="blue">BLUE</p></li>
    					<li><p id="yellow">YELLOW</p></li>
    					<li><p id="grey">GREY</p></li>
    				</ul>
    			</div>
    			<div id="info">
    				<p id="msg">Select a color!!!</p>
    			</div>
    		</div>
    		
    	</body>
    </html>

[CSS JavaScript html]: https://blog.csdn.net/InJavaWeTrust/article/details/106145814
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0luSmF2YVdlVHJ1c3Q_size_16_color_FFFFFF_t_70]: /images/20230312/5f547870a1eb4057b59b0cb6b78f8caf.png