<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画的散开</title> <style> *{ position: relative; width: 100px; height: 100px; } .live img{ width: 400px; height: 400px; z-index: 0; margin: auto; } @keyframes living { 0%{ transform: scale(10); opacity: 0.6; } 50%{ transform: scale(9); opacity: 0; } 100%{ transform: scale(8); opacity: 0.5; } } .live span{ position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: red; border-radius: 50%; -webkit-animation: living 3s linear infinite; z-index: -1; } .live span:nth-child(4){ animation-iteration-count: 10; -webkit-animation-duration: 10s; } </style> </head> <body> <div class="live" style="margin: auto"> <img src="like/a%20(4).jpg" style="margin: auto"> <span></span> <span></span> <span></span> <span></span> </div> <div class="live" style="margin: auto"> <img src="like/a%20(4).jpg" style="margin: auto"> <span></span> <span></span> <span></span> <span></span> </div> <div class="live" style="margin: auto"> <img src="like/a%20(4).jpg" style="margin: auto"> <span></span> <span></span> <span></span> <span></span> </div> <div class="live" style="margin: auto"> <img src="like/a%20(4).jpg" style="margin: auto"> <span></span> <span></span> <span></span> <span></span> </div> <hr> <li><a href="CSS学习内容二.html"></a></li> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img{ height: 300px; width: 300px; /* margin: auto;*/ } * { background-color: #1E90FF; padding: 0px; margin: 0px; list-style: none; font-size: 30px; } /*css������*/ body { font-size: 23px; } ul, li { list-style: none; margin: 0px; padding: 0px; } li { border: 2px solid #D4D4D4; text-align: center; border-radius: 20px; } li p { text-align: center; } /*css3*/ li:first-child { background-color: rgba(199, 166, 4, 0.1); } /*定义do动画*/ @keyframes anima { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @font-face { font-family: Bahnschrift; } li:first-child img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } li img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } li:last-child img:hover { animation-name: anima; animation-duration: 2s; animation-iteration-count: infinite; } ul { display: flex; } li { flex-grow: 1; } </style> <title>阴天晴天雨天案例一</title> </head> <body> <!--html部分--> <ul> <li> <p>今天是</p> <img src="like/a%20(3).jpg" > <p>晴天</p> </li> <li> <p>明天是</p> <img src="like/a%20(4).jpg" > <p>阴天</p> </li> <li> <p>后天是</p> <img src="like/a%20(5).jpg" > <p>雨天</p> </li> </ul> <div id="new" > <div>今天天气晴<br>气温35℃<br>出门注意防晒</div> <div>明天阴天<br>气温28℃<br>适合室外活动</div> <div>后天雨天<br>气温27℃<br>出门记得拿伞</div> </div> <hr> <li><a href="CSS学习内容二.html"></a></li> <footer id="footer" style="font-size: 40px;color: cyan;"> 作者：A202020895 时间 2021/11/2 </footer> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆角属性</title> <style type="text/css"> #rcorners7 { border-radius: 50px/15px; background: darkred; padding: 20px; width: 200px; height: 150px; } #rcorners8 { border-radius: 15px/50px; background: green; padding: 20px; width: 200px; height: 150px; } #rcorners9 { border-radius: 50%; background: cornflowerblue; padding: 20px; width: 200px; height: 150px; } </style> <!--属性 描述 border-radius 所有四个边角 border-*-*-radius 属性的缩写 border-top-left-radius 定义了左上角的弧度 border-top-right-radius 定义了右上角的弧度 border-bottom-right-radius 定义了右下角的弧度 border-bottom-left-radius 定义了左下角的弧度--> </head> <body> <p>椭圆边框 - border-radius: 50px/15px:</p> <p id="rcorners7"></p> <p> 椭圆边框 - border-radius: 15px/50px:</p> <p id="rcorners8"></p> <p>椭圆边框 - border-radius: 50%:</p> <p id="rcorners9"></p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>圆角边框 </title> <style type="text/css"> .mnu { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; /*圆角*/ border-radius:25px; /*阴影*/ box-shadow: 10px 10px 5px #888888; text-shadow: 5px 5px 5px #FF0000; } div{ border: 5px solid; width: 100px; height:100px; margin: 5px; float: left; } .qw{ border: 3px solid; padding: 10px 30px; width: 300px; overflow: auto; } </style> </head> <body> <!--圆角边框--> <div style="border-top-left-radius: 10px; border-bottom-left-radius:50% 20px; color: yellow" >11</div> <div style="border-radius:2em 1em 4em / 0.5em 3em; color: red">22</div> <div style="border-radius:1em 10em 4em / 1em 10em; color: deepskyblue">33</div> <div style="border-top-left-radius: 10px; border-bottom-left-radius:30% 15px; color: seagreen" >11</div> <div style="border-radius:2em 1em 2em / 4em 3em; color: lightcoral">22</div> <div style="border-radius:1em 10em 4em / 1em 8em; color: navajowhite">33</div> <!--box-shadow shezhi box yingying--> <div style="box-shadow:10px 10px ; ">4</div> <div style="box-shadow:10px 10px 20px; ">5</div> <div style="box-shadow:10px 10px 20px 5px ">6</div> <div style="box-shadow:10px 10px 20px 5px red ">7</div> <div style="box-shadow:10px 10px 20px 5px darkred inset">8</div> <br style="clear: both" /> <div style="border-radius: 10px 10px/10px 10px ;box-shadow: 10px 10px cadetblue ">元</div> <div style="border-radius: 9px 5px/8px 6px ;box-shadow: 10px 10px forestgreen ">元二</div> <div style="border-radius: 50px 50px/50px 50px; box-shadow: 100px 0px 5px red,200px 0px 10px yellow ,300px 0px 15px green">12</div> <div style="border-radius: 40px 30px/40px 30px; box-shadow: 80px 0px 5px darkgreen,200px 0px 10px saddlebrown , 300px 0px 15px dodgerblue">34</div> <h14>resize属性</h14> <div class="qw">该窗体不能调整width height</div> <div style="resize: both" class="qw">该窗体可以调width height </div> <br> <div style="resize: horizontal" class="qw">该窗体可调width</div> <br> <div style="resize: vertical" class="qw">该窗体可调height</div> <br> <div class="mnu">我是圆角的新属性</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .father { width: 500px; background-color: lightskyblue; position: absolute; top: 50%; margin-left: 250px; /* overflow: hidden; overflow: auto; overflow: scroll; 方法二*/ z-index: 2345; } .one{ float: left; width: 200px; height: 200px; background-color: #FF99CC; z-index: 34; } .two{ float: left; width: 200px; height: 200px; z-index: 1094; } .tree{ width: 200px; height: 200px; background-color: #0099FF; z-index: 67; } .four{ width: 200px; height: 200px; background-color: lawngreen; z-index: 1000; } /*方法三*/ .clearfix:after { content: 'one'; display: block; height: 0; visibility: hidden; lear: both; } .clearfix{ *zoom: 1; } p{ /*l行的个数*/ column-count: 4; /*两行之间的空隙*/ column-gap: 10px; /*宽度与色彩*/ column-rule: 3px solid red; /*横越几行*/ column-span: all; text-align :justify; text-indent: 2em; } </style> <title>浮动四</title> </head> <body> <div style="clear: both"></div> <div class="father clearfix"> <div class="one">你好我的世界今天气晴朗</div> <div class="tree">我的世界我最爱</div> <div class="two">ness to mee you see you me </div> <div class="four">ness to mee you see you me </div> </div> <!--<div style="clear: both"></div>--> <article> <p> 经过十多年的努力，电子竞技逐渐从体育赛事的边缘走向主流。 2016年，国家发改委发布《关于印发促进消费带动转型升级行动方案的通知》，明确表示支持开展电竞赛事活动。 ▲2022杭州亚运会电子竞技项目图标。图/杭州2022年亚运会官方微信公众号▲2022杭州亚运会电子竞技项目图标。图/杭州2022年亚运会官方微信公众号 据报道，11月5日，2022杭州亚运会电子竞技小项设置正式公布，经亚洲电子竞技联合会、亚奥理事会、国家体育总局多方商议，英雄联盟等8个项目入选。 此前，在2020年12月16日亚奥理事会第39次全体代表大会上，确认杭州2022年亚运会将增设电子竞技、霹雳舞两个项目 对电子竞技游戏的认识误 人们对识，曾经有很多不佳印象。 电子游戏曾被认为要为中国儿童高近视率负责，但这可能存在一些刻板印象。 2020年世界卫生组织发布的《世界视力报告》专门对中美儿童近视做出了比较，数据显示美国儿童的近视率仅为中国儿童的1/7。 美国儿童的近视率低，是因为美国儿童使用电子设备、玩游戏远比中国儿童少吗？恰恰不是。美国一项调查结果显示，年龄低于8岁的美国儿童中，70%曾经使用移动电子设备，数量在 两年间翻了一番。调查显示，美国儿童使用移动电子设备主要为玩游戏、使用教育软件和观看视频。 儿童的近视率高，主要原因可能还是在于繁重的课业负担等。 </p> </article> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *{ margin: 100px; padding: 0px; font-weight: bold; font-size: 30px; font-size: 30px; } div:nth-child(1){ width: 500px; height: 500px; background-color: #0099FF; /*绝对定位*/ position: absolute; top: 50px; right: 50px; } div:nth-child(2){ width: 400px; height: 200px; background-color:red; /*相对定位*/ position: relative; left: 100px; top: 100px; } div:nth-child(3){ width: 300px; height: 300px; background-color: khaki; position: absolute; bottom: 375px; } div:nth-child(4){ width: 500px; height: 200px; background-color: lightpink; position: relative; left: -63px; top: 150px; } </style> <title>Title</title> </head> <body> <!--<h2> position: absolute;/ position: relative;</h2>--> <div>绝对定位 position: absolute; top: 50px; right: 50px;</div> <div>相对定位 position: relative; left: 100px; top: 100px;</div> <div>绝对定位向上行375px</div> <div>相对定位 position: relative; left: -63px; top: 150px;</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> *{ overflow: auto; background-color: lightcyan; } .up{ position: relative; width: 1000px; height: 200px; background-color: #FF99CC; z-index: inherit; border: ridge 13px lightseagreen; } .a{ overflow: hidden; position: absolute; top: 20px; width: 100px; height: 100px; border: outset 10px hotpink; background-color: #CCFFFF; } .b{ float: right; width: 100px; height: 100px; position: relative; top: 100px; background-color:lightcoral; border: dotted 10px firebrick; } .c { position: relative; width: 1000px; height: 160px; background-color: lightskyblue; border: 10px deepskyblue inset; } /*固定定位*/ .d { border: solid 2px peachpuff; position: fixed; bottom: 100px; width: 1000px; height: 160px; background-color: lawngreen; } /*绝对定位*/ .e { border: solid 4px red; position: absolute; bottom: -68px; width: 1000px; height: 160px; background-color: lightseagreen; } .f { border: solid 5px peachpuff; position: relative; bottom: 20px; width: 1000px; height: 160px; background-color: deeppink; } </style> <title>定位三</title> </head> <body> <div class="up"> <div class="a"></div> <div class="b"></div> </div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> </body>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <style> *{ background: #00BFFF; font-size: 50px; } /* 1.直接写属性 */ input[type] { color: pink; } /* 2.属性等于值 */ input[type='button'] { background-color: #55A532; } /* 3.以某个值开头的 属性值 */ div[class^='ic'] { color: yellow; } /* 4.以某个值结尾的 属性值 */ div[class$='on'] { background-color: pink; } /* 5.包含某个值 */ div[class*='ic'] { color: green; } </style> </head> <body> <input type="button" value="按钮"> <input type="text" value="文本框"> <input type="password" value="密码框"> <input type="search" value="搜索框"> <div class="icon1">图标1</div> <div class="icon2">图标2</div> <div class="icon3">图标3</div> <div class="btnicon">图标4</div> <div class="iicon">图标5</div> <hr> <li><a href="CSS学习内容二.html"></a></li> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div{ height: 600px; width: 1000px; background: #923922; display:flex; flex-wrap: wrap; flex-direction: column; flex-direction: column-reverse; flex-direction: inherit; flex-direction: unset; align-content: space-around; align-items: flex-start; align-items: flex-end; align-items: stretch; align-items: center; align-items: flex-end; flex-wrap: wrap; align-content: space-around; align-content: space-between; } span{ height: 100px; display: block; width: 200px; background: cyan; border: solid 3px red; } .one div{ height: 100px; display: block; width: 100px; background: red; } </style> <title>弹性布局在Y轴中布局</title> </head> <body> <div> <span class="one">@1</span> <span>向y轴方向布局@110111</span> <span>向y轴方向布局@110112</span> <span>向y轴方向布局@110113</span> <span>向y轴方向布局@110114</span> <span>向y轴方向布局@110115</span> <span>向y轴方向布局@110116</span> <span>向y轴方向布局@110113</span> <span>向y轴方向布局@110114</span> <span>向y轴方向布局@110115</span> <span>向y轴方向布局@110116</span> </div> <hr> <li><a href="CSS学习内容二.html"></a></li> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> div{ height: 600px; width: 1000px; background: #FF99CC; display:flex; /*主 x*/ flex-direction: row; flex-direction: row-reverse; /*则*/ /*flex-direction: column; flex-direction: column-reverse;*/ justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between; flex-wrap: wrap; } span{ height: 100px; display: block; width: 200px; background: red; border: 4px solid; } .one div{ /*//隐藏*/ overflow: hidden; overflow: auto; overflow: scroll; height: 100px; display: block; width: 100px; background: red; } </style> <title>弹性布局</title> </head> <body> <!--清除浮动一--> <div style="clear: both"></div> <div> <span>向X轴方向布局@110111</span> <span>向X轴方向布局@110112</span> <span>向X轴方向布局@110113</span> <span>向X轴方向布局@110114</span> <span>向X轴方向布局@110115</span> <span>向X轴方向布局@110116</span> <span>向X轴方向布局@110113</span> <span>向X轴方向布局@110114</span> <span>向X轴方向布局@110115</span> <span>向X轴方向布局@110116</span> </div> <hr> <li><a href="CSS学习内容二.html"></a></li> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> *{ font-weight: bold; } section{ display: flex; width: 900px; height: 150px; background-color: pink; margin: 0 auto; border: 5px solid paleturquoise; } strong{ display: flex; width: 900px; height: 150px; background-color: pink; margin: 0 auto; border: 5px solid red; } samp{ display: flex; width: 900px; height: 150px; background-color: pink; margin: 0 auto; border: 4px solid gray; } samp div:nth-last-child(1){ flex-grow: 1; background: lavender; } samp div:nth-last-child(2){ flex-grow: 2; background: chartreuse; } samp div:nth-last-child(3){ flex-grow: 3; background: darkcyan; } strong div:nth-last-child(1){ flex-grow: 1; background: cyan; } strong div:nth-last-child(2){ flex-grow: 2; background: lavender; } strong div:nth-last-child(3){ flex-grow: 1; background: magenta; } section div:nth-last-child(1){ flex: 1; background: palevioletred; } section div:nth-last-child(2){ flex: 2; background: cornflowerblue; } section div:nth-last-child(3){ flex: 1; background: gray; } section div:nth-last-child(4){ flex: 1; background: goldenrod; } p{ display: flex; width: 900px; height: 150px; background-color: pink; margin: 0 auto; } span{ flex: 1; background: hotpink; border: 2px solid black; } p span:nth-last-child(1){ flex: 1; background: red; } p span:nth-last-child(2){ flex: 2; background: paleturquoise; } p span:nth-last-child(3){ flex: 1; background: cadetblue; } p span:nth-last-child(4){ flex: 1; background: red; } p span:nth-last-child(5){ flex: 2; background: green; } p span:nth-last-child(6){ flex: 1; background: navy; } </style> <title>案例</title> </head> <body> <section>第一模块 <div></div> <div></div> <div></div> <div></div> </section> <strong>第二模块 <div>100px</div> <div>100px</div> <div>100px</div> </strong> <samp>第三模块 <div>100px</div> <div>100px</div> <div>100px</div> </samp> <p>第四模块 <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </p> <hr> <li><a href="CSS学习内容二.html"></a></li> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>案例</title> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 16px; background-color: #e6e6e6; } li { list-style: none; } .box { width: 1200px; height: 590px; /* background-color: pink; */ margin: 10px auto; } .left { display: flex; float: left; width: 240px; height: 590px; /* background-color: skyblue; */ } .left img { /* width: 240px; */ width: 100%; } .right { float: right; width: 960px; height: 590px; /* background-color: purple; */ } .right li { float: left; width: 230px; height: 290px; background-color: #fff; list-style: none; margin: 0 0 10px 10px; text-align: center; } .right img { width: 160px; margin: 12px; } .right a { text-decoration: none; color: #000; } .right .des { font-size: 14px; color: #ababab; margin: 5px 0 10px 0; } .right .price { color: orange; } .qw{ height: 200px; width: 1000px; background-color: #FF99CC; overflow: hidden; } </style> </head> <body> <!-- .box>.left+.right --> <div class="box"> <div class="left"> <img src="../Css/like/a%20(6).jpg"> </div> <div class="right"> <ul> <li> <img src="../Css/like/a%20(6).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(5).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> <li> <img src="../Css/like/a%20(6).jpg" alt=""> <a href="#"> <h4>Redmi Note 11 Pro系列</h4> <p class="des">Redmi Note 11 Pro系列</p> <p class="price">1799元起</p> </a> </li> </ul> </div> <div class="qw"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .father { width: 500px; background-color: forestgreen; /* overflow: hidden; overflow: auto; overflow: scroll; 方法二*/ overflow: scroll; } .one{ float: left; width: 150px; height: 100px; background-color: #FF99CC; } .two{ float: left; width: 150px; height: 100px; z-index: 456; } .tree{ width: 500px; height: 200px; background-color: #0099FF; } /*方法三* ***** / .clearfix:after { content: 'one'; display: block; height: 0; visibility: hidden; lear: both; } .clearfix{ *zoom: 1; } </style> <title>浮动四</title> </head> <body> <h1>清除浮动</h1> <div style="clear: both"></div> <div class="father clearfix"> <div class="one">你好我的世界今天气晴朗</div> <!--<div style="clear: both"></div> 方法一--> <div class="two">ness to mee you see you me </div> </div> <!--<div style="clear: both"></div>--> <div class="tree">我的世界我最爱</div> </body> </html>
