搜索到
146
篇与
的结果
-
3、内嵌 <!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> <script> // 弹出对话框helloworld alert("HelloWorld") document.write("helloworld") // console.log("helloworld222") </script> </head> <body> </body> </html> -
2、行内 <!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> <body> <button onclick="alert('helloworld')">点我</button> <a href="javascript:alert('hello')">点我</a> </body> </html>
-
1、helloworld <!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> <script> // 弹出对话框helloworld alert("HelloWorld") document.write("helloworld") // console.log("helloworld222") </script> </head> <body> </body> </html>
-
50、响应式布局 1、媒体查询—媒体类型 <!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> h1{ width: 600px; height: 400px; line-height: 400px; background-image: linear-gradient(30deg,red,yellow,green); margin: 0 auto; text-align: center; font-size: 100px; color: white; text-shadow: 0 0 10px black; } /* 只有打印机或打印预览才应用的样式 */ @media print{ h1{ background: transparent; } } /* 只有在屏幕上才应用的样式 */ @media screen{ h1{ font-family: "翩翩体-简"; } } /* 一直应用的样式 */ @media all{ h1{ color: red; } } </style> </head> <body> <h1>新年快乐</h1> </body> </html>2、媒体特征 <!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> *{ margin: 0; padding: 0; } h1{ height: 200px; background-color: gray; line-height: 200px; text-align: center; font-size: 100px; } /* 等于 */ @media(width:800px){ h1{ background-color: antiquewhite; } } /* 小于等于700px时 */ @media (max-width:700px){ h1{background-color: green;} } /* 大于等于900 */ @media(min-width:900px){ h1{ background-color: orange; } } /* 根据屏幕大小 */ /* @media(device-width){ } */ </style> </head> <body> <h1>你好啊</h1> </body> </html>3、运算符 <!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> *{ margin: 0; padding: 0; } h1{ height: 200px; background-color: gray; line-height: 200px; text-align: center; font-size: 100px; } /* 且运算符 */ /* @media(min-wdith:700px) and (max-width:800px){ h1{ background-color: orange; } } */ /* 或运算符 */ @media screen and (min-width:700px) and (max-width:800px){ h1{ background-color: orange; } } /* 否定运算符 */ @media not screen{ h1{ background-color: orange; } } /* 肯定运算符 */ @media only screen{ h1{ background-color: orange; } } </style> </head> <body> <h1>你好啊</h1> </body> </html>
-
49、伸缩盒模型 1、伸缩容器-伸缩项目 <!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>1、伸缩容器-伸缩项目</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner3{ display: flex; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner inner3"> <div>a</div> <div>b</div> <div>c</div> </div> </div> </body> </html>2、主轴方向<!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>2、主轴方向</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 调整主轴方向 水平从右侧到左，默认 */ /* flex-direction: row-reverse; */ /* 调整主轴方向，垂直从上到下 */ /* flex-direction: column; */ /* 调整主轴方向，垂直从下到上 */ flex-direction: column-reverse; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </div> </body> </html3、主轴换行方式 <!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>3、主轴换行方式</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式,不换行，默认值 */ /* flex-wrap: nowrap; */ /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴换行方式，反向换行 */ /* flex-wrap: wrap-reverse; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> </body> </html>4、flex-flow <!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>4、flex-flow</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ /* flex-direction: row; */ /* 主轴换行方式，换行 */ /* flex-wrap: wrap; */ flex-flow: row wrap; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> </body> </html>5、主轴对齐方式<!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>5、主轴对齐方式</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ /* justify-content: flex-start; */ /* 主轴的对齐方式,主轴的结束位置 */ /* justify-content: flex-end; */ /* 主轴的对齐方式,主轴的中间位置 */ /* justify-content: center; */ /* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是项目距离边缘的二倍 */ /* justify-content: space-around; */ /* 主轴的对齐方式：项目均匀的分布在一行中，项目与项目的距离是相等的，项目距离边缘没有距离 */ /* justify-content: space-between; */ /* 主轴的对齐方式，项目均匀分布在一行 */ /* justify-content: space-evenly; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner">2</div> <div class="inner">3</div> </body> </html>6、侧轴对齐 <!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>6、侧轴对齐</title> <style> .outer{ width: 1000px; height: 600px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式 侧轴的起始位置对齐*/ /* align-items: flex-start; */ /* 侧轴的对齐方式 侧轴的结束位置对齐*/ /* align-items: flex-end; */ /* 侧轴的对齐方式 侧轴的中间位置对齐*/ /* align-items: center; */ /* 侧轴的对齐方式 侧轴的中间位置对齐(字体基线对齐)*/ /* align-items: baseline; */ /* 侧轴的对齐方式，拉伸到父容器（前提：伸缩项目不能给高度），默认*/ align-items: stretch; } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2{ height: 300px; } .inner3{ height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> </body> </html>7、侧轴对齐方式-多行<!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>7、侧轴对齐方式-多行</title> <style> .outer{ width: 1000px; height: 900px; background-color: #888; margin: 0 auto; /* 伸缩盒模型相关属性-start */ /* 将该元素变为了伸缩容器（开启了flex布局） */ display: flex; /* 调整主轴方向 水平从左到右 默认 */ flex-direction: row; /* 主轴换行方式，换行 */ flex-wrap: wrap; /* 主轴的对齐方式,主轴的起始位置 */ justify-content: flex-start; /* 侧轴的对齐方式（多行）侧轴的起始位置对齐 */ /* align-content: flex-start; */ /* 侧轴的对齐方式（多行）侧轴的结束位置对齐 */ /* align-content: flex-end; */ /* 侧轴的对齐方式（多行） 侧轴中间位置*/ /* align-content: center; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且是边缘距离的2倍*/ /* align-content: space-around; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的，且边缘没有距离*/ /* align-content: space-between; */ /* 侧轴的对齐方式（多行） 伸缩项目之间的距离是相等的*/ /* align-content: space-evenly; */ /* 侧轴的对齐方式（多行）拉伸（别给高）默认 */ /* align-content: stretch; */ } .inner{ width: 200px; height: 200px; background-color: skyblue; border: 1px solid black; box-sizing: border-box; } .inner2{ height: 300px; } .inner3{ height: 100px; } </style> </head> <body> <div class="outer"> <div class="inner">1</div> <div class="inner inner2">2</div> <div class="inner inner3">3</div> <div class="inner">2</div> <div class="inner">3</div> <div class="inner">4</div> <div class="inner">5</div> <div class="inner">6</div> <div class="inner">7</div> <div class="inner">8</div> <div class="inner">9</div> <div class="inner">10</div> <div class="inner">11</div> </body> </html>
