HTML学习记录2021.05.22_@media only screen and(max-width:768px)-CSDN博客

本文链接：https://blog.csdn.net/Stan_lu/article/details/117171552

1.多个标签

(1) <iframe>

iframe

<!DOCTYPE html>
<html lang="en">
<head>
<title>Iframe Example</title>
<meta charset="utf-8">      
</head>
<body>
<h1>Iframe Example</h1>
<iframe width="640" height="385" src="http://www.youtube.com/embed/1QkisJHztHI">
<a href="http://www.youtube.com/embed/1QkisJHztHI">YouTube Video</a>
</iframe>
</body>
</html>

(2) <link media>

设置不同场景下的css文件，media="screen" 代表显示在电子设备屏幕上时，media="print" 代表界面打印时。

<link rel="stylesheet" href="bistro.css" media="screen">
<link rel="stylesheet" href="bistroprint.css" media="print">

(3) transform

transform: rotate(15deg);
transform: scale(2);

rotate 表示将标签进行旋转，scale 表示将标签缩放

(4) transition

nav a { text-decoration: none; 
        display: block;
		padding: 15px;
		transition: background-color 5s linear;
}

背景颜色改变，时间五秒，linear是随时间变化的曲线，变化的结果可以由 hover决定

2. <input>多功能标签

(1) type="color"

color

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Choose A Color</h1>
<form method="get">
<label for="myChoice">Choose a color:</label>
<input type="color" name="myChoice" id="myChoice"> 
 <br><br>
<input type="submit" value="Send"> <input type="reset">
</form>
</body>
</html>

(2) type="date"

date

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Choose A Date</h1>
<form method="get">
<label for="myDate">Choose a Date</label>
<input type="date" name="myDate" id="myDate"> 
 <br><br>
<input type="submit" value="Send"> <input type="reset">
</form>
</body>
</html>

(3) type="email"

type="email"

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Join Our Newsletter</h1>
<form method="get">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" >
<br>
<br>
<input type="submit" value="Sign Me Up!"> <input type="reset">
</form>
</body>
</html>

(4) <fieldset>

fieldset

<!DOCTYPE html>
<html lang="en">
<head>
<title>Brochure Form</title>
<meta charset="utf-8">
<style>
form {font-family: Arial, sans-serif; }
fieldset { width: 500px;
	       border: 2px ridge #ff0000;
	       padding: 10px;}
legend { font-family: Georgia, "Times New Roman", serif;
	      font-weight: bold; }
label { padding-left: 10px; }
</style>
</head>
<body>
<h1>Order Brochure</h1>
<form method="get">
<label>First Name: <input type="text" name="fmail" id="fmail"></label><br><br>
<label>Last Name: <input type="text" name="lmail" id="lmail"></label><br><br>
<label>E-mail: <input type="text" name="email" id="email"></label><br><br>
<fieldset>
<legend>Billing Address</legend>
<label>Street: <input type="text" name="street" id="street" size="54"></label>
<br><br>
<label>City: <input type="text" name="city" id="city"></label>
<label>State: <input type="text" name="state" id="state" maxlength="2" size="5">
</label>
<label>Zip: <input type="text" name="zip" id="zip" maxlength="5" size="5">
</label>
</fieldset>
<br>
<input type="submit" value="Contact"> <input type="reset">
</form>
</body>
</html>

(5) type="list"

list

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Choose Your Favorite Color</h1>
<form method="get">
Favorite Color: <input type="text" name="color" id="color" list="colors">
<datalist id="colors">
<option value="black">
<option value="red">
<option value="green">
<option value="blue">
<option value="yellow">
<option value="pink">
<option value="cyan">
</datalist>
<input type="submit" value="Send"> <input type="reset">
</form>
</body>
</html>

(6) type="range"

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Choose A Number</h1>
<form method="get">
<label for="myChoice">Choose a number between 1 and 100:</label><br>
 Low <input type="range" min="1" max="100" name="myChoice" id="myChoice"> High
 <br><br>
<input type="submit" value="Send"> <input type="reset">
</form>
</body>
</html>

(7) type="search"

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Search</h1>
<form method="get">
<label for="keyword">Search:</label> 
<input type="search" name="keyword" id="keyword" >
<br>
<br>
<input type="submit" value="Go"> <input type="reset">
</form>
</body>
</html>

(8) type="number"

spinner

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Choose A Number</h1>
<form method="get">
<label for="myChoice">Choose a number between 1 and 10:</label>
<input type="number" name="myChoice" id="myChoice" min="1" max="10"> 
 <br><br>
<input type="submit" value="Send"> <input type="reset">
</form>
</body>
</html>

(9) <textarea >

textarea

<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<style>

</style>
</head>
<body>
<h1>Contact Us</h1>
<form method="get">
<form>
<label for="myName">Name:</label>
<input type="text" name="myName" id="myName">
<label for="myEmail">E-mail:</label>
<input type="text" name="myEmail" id="myEmail">
<label for="myComments">Comments:</label>
<textarea name="myComments" id="myComments" rows="2" cols="20"></textarea>
<input id="mySubmit" type="submit" value="Submit">
</form>
</form>
</body>
</html>

(10) type="tel"

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Sign Up for Text Messages</h1>
<form method="get">
<label for="mobile">Mobile Number:</label>
<input type="tel" name="mobile" id="mobile" >
<br>
<br>
<input type="submit" value="Text Me"> <input type="reset">
</form>
</body>
</html>

(11) type="url"

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Share and Collaborate</h1>
<form method="get">
<label for="myWebsite">Suggest a Website:</label>
<input type="url" name="myWebsite" id="myWebsite" >
<br>
<br>
<input type="submit" value="Send Form!"> <input type="reset">
</form>
</body>
</html>

3. 根据不同设备的屏幕尺寸改变界面样式

屏幕宽度大于768px

屏幕尺寸大于768px

屏幕宽度小于768px，大于480px

屏幕宽度小于768px，大于480px

屏幕宽度小于480px

屏幕宽度小于480px

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
<title>Casita Sedona</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {font-family: Verdana, Arial, sans-serif;
      background-color: #330000;
}
#wrapper {  background-color: #F4E8BC; 
	        width: 90%;
			margin: auto;
            color: #330000;
} 
h1, h2 { color: #003300; }
header { background-image: url(header.jpg);
         background-repeat: no-repeat; 
		 background-size: cover;
}
h1 { text-align: center;
     font-size: 300%;
	 padding: 5% 0;
     text-shadow: 3px 3px 3px #F4E8BC;	
	 }
nav { float: left;
      width: 20%;
	  font-size: 120%;
}	  
nav ul { list-style-type: none; }
nav a { text-decoration: none;}
nav a:link { color: #330000; }
nav a:visited { color: #003300; }
nav a:hover { color: #996600; }
aside { float: right; 
        width: 25%;
		padding: 0 2.5%;
}
main { width: 50%;
           padding-right: 2%;
           margin-left: 20%;
}
footer { text-align: center;
         font-size: 80%;
		 font-style: italic;
		 color: #003300;
		 padding: 2.5%;
	     clear: both; 
}
img { max-width: 100%;
      height: auto;
}
@media only screen and (max-width: 768px) {
          nav { float: none;
                width: auto;
                margin-top: 0;	
                text-align: center;	  }
          main { width: 60%;
                     margin-left: 5%; }
           aside { width: 30%;  
            }
           nav ul { padding-left: 0;
                }
         nav li { display: inline;
         margin: 0 2%; 
		 }

}
@media only screen and (max-width: 480px) {
            #wrapper { width: auto; }
		    h1 { margin-bottom: 0; }
			main { margin: 0 5%;      
                       width: auto;	}
		    nav { width: auto;	  }
			nav ul { padding-left: 0; 
			         text-align: center;}
			nav li {display: inline-block;
			        width: 5em;
			        font-size: 120%;
					text-align: center;
					box-shadow: 2px 2px 2px #330000;
					background-color: #FFFFCC; 
					margin: 1%;
					padding: 2.5%; }
			aside { display: none; }		
}
header, main, nav, footer, figure, figcaption { display: block; }
</style>
</head>
<body>
<div id="wrapper">
  <header>
    <h1>AAAAAAAAAAAAAAA</h1>
  </header>  
  <nav>
    <ul>
	 <li><a href="index.html">Home</a></li>
     <li><a href="#">AAAAAA</a></li>
     <li><a href="#">BBBBBB</a></li>
     <li><a href="#">CCCCCC</a></li>
	</ul> 
   </nav>
   <aside>
     <img src="pools.jpg" alt="Pools of water in the rock">
	 <h2>AAAAAAAAAAAAAAAAAAAAAA</h2>
	 <p>aaaaaaaaaaaaaaaaaaaaaaaaaa</p>
   </aside>
<main>   
	<h2>BBBBBBBBBBBBBBBBBBBBBBBBBBBB</h2>
    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
    <h2>CCCCCCCCCCCCCCCCCCCCCCCCCC</h2>
    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
  	<h2>DDDDDDDDDDDDDDDDDDD</h2>
    <p>dddddddddddddddddddddddddddddddddddddddddd</p>
	<h2>EEEEEEEEEEEEEEEEEE</h2>
	<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
   </main> 
   <footer>Copyright &copy; 2021
   </footer>
</div>
</body>
</html>

代码分析

@media only screen and (max-width: 768px) @media 表示动态获取当前状态。 only 表示只在这种情况下才会是这样的属性。 screen 是关注电子设备的屏幕尺寸。 max-width 定义输出设备中的页面最大可见区域宽度