HTML、响应式网页

最新推荐文章于 2024-04-22 11:05:21 发布

Renaissance&复活

最新推荐文章于 2024-04-22 11:05:21 发布

阅读量513

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_62659797/article/details/124362853

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,
			minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>响应式网页</title>
		
		<style type="text/css">
			* {box-sizing: border-box;} /* 盒子宽度包含内边距和边框 */
			
			body {
				font-family: "arial, helvetica, sans-serif";
				padding: 10px;
				background-color: #F1F1F1;
			}
			
			/* 页眉  */
			header {
				padding: 30px;
				text-align: center;
				background-color: white;
				border-radius: 10px 10px 0px 0px;
			}
			
			/* 页眉标题  */
			header h1 {font-size: 3em;}
			
			/* 导航栏  */
			nav {
				overflow: hidden;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 0px 0px 10px 10px;
			}
			
			/* 导航栏链接  */
			nav a {
				float: left;
				display: block;
				padding: 14px 16px;
				color: white;
				text-align: center;
                transition: .3s;
				text-decoration: none;
			}
			
			/* 导航栏最后一个子元素  */
			nav a:last-child {float: right;}
			
			/* 导航栏链接悬停时  */
			nav a:hover {
				background-color: #ddd;
				color: black;
			}
			
			/* 文章 */
			article {
				float: left;
				width: 75%;
			}
			
			/* 侧边栏  */
			aside {
				float: left;
				width: 25%;
				background-color: #F1F1F1;
				padding-left: 20px;
			}
			
			/* 假图像	*/
			.fakeimg {
				background-color: #aaa;
				width: 100%;
				padding: 20px;
			}
			
			/* 卡片 */
			.card {
				background-color: white;
				padding: 20px;
				margin-top: 20px;
				border-radius: 10px;
			}
			
			/* 清除浮动  */
			.clearfix::after {
				content: "";
				clear: both;
				display: table;
			}
			
			/* 页脚  */
			footer {
				padding: 20px;
				text-align: center;
				margin-top: 20px;
				border-radius: 10px;
				background-color: #DDDDDD;
			}
			
			/* 媒体查询（小于等于800像素） */
			@media only screen and (max-width: 800px) {
				article, aside {
					width: 100%;
					padding: 0;
				}
			}
			
			/* 媒体查询（小于等于600像素）*/
			@media only screen and (max-width: 600px) {
				nav a {
					float: none;
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		
		<!-- 页眉  -->
		<header>
			<h1>My Website</h1>
			<p>Resize the browser window to see the effect.</p>
		</header>
		
		<!-- 导航栏  -->
		<nav>
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
			<a href="#">Link</a>
		</nav>
		
		<!-- 节  -->
		<section class="clearfix">
			
			<!-- 章节  -->
			<article>
				<div class="card">
					<h2>TITLE HEADING</h2>
					<h5>Title description, Dec 7, 2017</h5>
					<div class="fakeimg" style="height: 200px;">Image</div>
					<p>Some text..</p>
					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum 
						consectetur adipiscing elit, sed do eiusmod tempor incididunt 
						ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
						nostrud exercitation ullamco.</p>
				</div>
				<div class="card">
					<h2>TITLE HEADING</h2>
					<h5>Title description, Dec 7, 2017</h5>
					<div class="fakeimg" style="height: 200px;">Image</div>
					<p>Some text..</p>
					<p>Sunt in culpa qui officia deserunt mollit anim id est laborum 
						consectetur adipiscing elit, sed do eiusmod tempor incididunt 
						ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
						nostrud exercitation ullamco.</p>
				</div>
			</article>
			
			<!-- 侧边栏  -->
			<aside>
				<div class="card">
					<h3>About Me</h3>
					<div class="fakeimg" style="height: 100px;">Image</div>
					<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
				</div>
				<div class="card">
					<h3>Popular Post</h3>
					<div class="fakeimg"><p>Image</p></div>
					<div class="fakeimg"><p>Image</p></div>
					<div class="fakeimg"><p>Image</p></div>
				</div>
				<div class="card">
					<h3>Follow Me</h3>
     				<p>Some text..</p>
				</div>
			</aside>
		</section>
		
		<!-- 页脚  -->
		<footer><h2>Footer</h2></footer>
	</body>
</html>

Renaissance&复活

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML、响应式网页

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>响应式网页</title> <.
复制链接

扫一扫