HTML,及CSS完成小网页练习

于 2021-06-06 20:35:19 发布
阅读量279 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： css html
版权声明：本文为优快云博主小智RE0-李智青-原创文章,转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MrTumnus/article/details/117636175
本文详细展示了如何运用HTML、CSS和JavaScript创建一个美观的网页，包括顶部线条设计、LOGO区的三栏布局、导航栏动态效果和内容模块的有序组织。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 首先清除默认样式 */
			*{
				margin: 0px;
				padding: 0px;
				}
				/* 顶部栏的属性 */
				.top_line{
					width:1200px;
					height: 5px;
					background-color: pink;
					margin: auto;
					}
					/* 给主体部分加背景颜色 */
				body{
					background-color: #A9A9A9;
				}
				/* LOGO部分的属性 */
				.logo{
					width: 1200px;
					margin: 10px auto;
					}
				.logo_left,.logo_center,.logo_right
					{
						float: left;
					}
				.logo>.logo_left
				{
					width: 160px;
					height: 60px;
					padding: 10px 45px;
					background-color: white;
				}
				img{ display: block;}
				.logo>.logo_center{
					width: 700px;
					height: 80px;
				}
				.logo>.logo_right
				{
					width: 250px;
					height: 80px;
					background-color: aliceblue;
					text-align: center;
					line-height: 80px;
				}
				.logo>.logo_right a{
				    text-decoration: none;
					font-size: 18px;
					color: pink;
					font-weight: bold;
				}
				
				/* 导航栏的属性 */
				.dva_box{
					width:1200px;
					height: 60px;
					margin: 0px auto 10px auto;
					background-color: pink;
				}
				.dva_box>.dva{
					float: left;
					width:171px;
					height: 40px;
					text-align: center;
					line-height: 40px;
					margin: 10px 0;
				}
				.dva_box>.dva a{
					color: white;
					font-size: 18px;
					font-weight: bold;
					text-decoration: none;
				}
				/* 广告位的属性 */
				.adv{
					width: 1200px;
					margin: 0px auto 20px auto;
				}
				/* 中间的属性 */
				.middle_box1,.middle_box2
				{
					width: 1200px;
					height:220px;
					margin: 0px auto 16px auto;
				}
				/* 第一个框的属性 */
				.case{
					width: 390px;
					height: 220px;
					margin: 0px 10px 0px 0px;
					float: left;
					position: relative;
					background-color: #FFFFFF;
				}
				/* 唐诗修饰 */
				.label1
				{
					width: 80px;
					height: 50px;
					color: white;
					background-color: pink;
					text-align: center;
					line-height: 50px;
				}
				/* 唐诗下的线 */
				.case_line{
					width: 390px;
					height: 5px;
					background-color: pink;
				}
				/* 静夜思属性 */
				.label3
				{
					width: 380px;
					height: 50px;
					font-size: 15px;
					font-weight: bold;
					line-height: 50px;
					margin: 0px  10px 0px 10px;
					border-bottom: 1px black dashed;
				}
				/* 给"更多"这个链接绝对定位 */
				.label2>a
				{
					text-decoration: none;
					position: absolute;
					right: 10px;
					top:15px;
					color: pink;
				}
				/* 静夜思的a标签属性 */
				.label3>a
				{
					text-decoration: none;
					color: #000000;
				}
				/* 开始写底部栏的属性 */
				.btn_box{
					width: 1200px;
					height: 100px;
					background-color: white;
					margin: 0px auto 10px auto;
				}
				.btn_box>.btn_top
				{
				 width: 100px;
				 height: 40px;
				 background-color: pink;
				 color: white;
				 text-align: center;
				 line-height: 40px;
				 font-size: 15px;
				 font-weight: bold;
				}
				.btn_box>.btn_center
				{
					width: 1200px;
					height: 5px;
					background-color: pink;
				}
				.btn_box>.btn_btm
				{
					width: 100px;
					height: 55px;
					text-align: center;
					font-size: 15px;
					font-weight: bold;
					color: black;
				}
				.btn_box>.btn_btm>a
				{
					text-decoration: none;
					color: #FFFF00;
				}
		</style>
	</head>
	<body>
		<!-- 开始写顶部栏 -->
		<div class="top_line"></div>
		<!-- 开始写LOGO部分 -->
		<div class="logo">
			<div class="logo_left">
			    <img src="img/地球.png" />	
			</div>
			<div class="logo_center">
				<img src="img/timg.jpg" />
			</div>
			<div class="logo_right">
				<a href="">登 录</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="">注 册</a>
			</div>
			<div style="clear: left;"></div>
		   <!-- 删除浮动 -->
		</div>
		<!-- 开始写导航栏 -->
		<div class="dva_box">
			<div class="dva"><a href="">首页</a></div>
			<div class="dva"><a href="">唐诗</a></div>
			<div class="dva"><a href="">宋词</a></div>
			<div class="dva"><a href="">古代小说</a></div>
			<div class="dva"><a href="">现代诗歌</a></div>
			<div class="dva"><a href="">散文</a></div>
			<div class="dva"><a href="">诗歌</a></div>
			<div style="clear: left;"></div><!-- 删除浮动 -->
		</div>
	    <!-- 开始写广告位 -->
		<div class="adv">
			<img src="img/timg.gif" />
		</div>
		<!-- 开始写中间的部分 -->
		<!-- 先写第一行的三个框 -->
		<div class="middle_box1">
			<!-- 第一个框 -->
			<div class="case">
			    <div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div >
			<!-- 第二个框 -->
			<div class="case">
				<div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div>
			<!-- 第三个框 -->
			<div class="case">
				<div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div>
			<div style="clear:left;"></div> <!-- 关闭第一个框的浮动 -->
		</div>
		<div class="middle_box2">
			<div class="case">
				<div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div>
			<div class="case">
				<div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div>
			<div class="case">
				<div class="label1">唐诗</div>
				<div class="label2"><a href="">更多&gt;&gt;</a></div>
				<div class="case_line"></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
				<div class="label3"><a href="">静夜思</a></div>
			</div>
			<div style="clear: left;"></div>
		</div>
		<!-- 开始写底部框 -->
		<div class="btn_box">
			<div class="btn_top">友情链接</div>
			<div class="btn_center"></div>
			<div class="btn_btm"><a href="https://baidu.com/">百度</a></div>
		</div>
	</body>
</html>

效果图:

在这里插入图片描述

2021/9/3日;重新排版

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页案例</title>
		<style type="text/css">
			/* 清除浏览器默认 */
			*{
				margin: 0px;
				padding: 0px;
			}
			/* 所有图片均变为块级标签 */
			img{
				display: block;
			}
			/* 所有超链接取消下划线 */
			a{
				text-decoration: none;
			}
			/* 整体 */
			body{
				background-color: #E3E3E3;
			}
			/* 顶部线条修饰 */
			#top_line{
				width: 1200px;
				height: 3px;
				background-color: #00A9F8;
				margin: auto;
			}
			/* 顶部广告区域修饰 */
			#logo_area{
				width: 1200px;
				margin: 5px auto;
			}
			/* 广告区域三部分开启浮动 */
			#logo_area_left,#logo_area_center,#logo_area_right{
				height: 80px;
				float: left;
			}
			/* 广告区域左部分 */
			#logo_area_left{
				width: 250px;
				background-color: #F5F5F5;
				margin: auto;
			}
			/* 广告区域中部 */
			#logo_area_center{
				width: 700px;
				background-color: #00A9F8;
			}
			/* 广告区域右部分 */
			#logo_area_right{
				width: 250px;
				background-color: #F5F5F5;
				text-align: center;
				line-height: 80px;
			}
			/* 登录注册超链接修饰 */
			.logo_area_right_a{
				font-size: 20px;
				font-weight: bold;
			}
			/* 登录注册超链接移入修饰 */
			.logo_area_right_a:hover{
				color: #00FFFF;
			}
			/* 导航栏 */
			#dh_box{
				width: 1200px;
				background-color: #00A9F8;
				margin: auto;
			}
			/* 导航栏格子开启浮动 */
			.dh_box_area{
				float: left;
				width: 171.42px;
				text-align: center;
				line-height: 60px;
			}
			/* 导航栏格子移入事件 */
			.dh_box_area:hover{
				background-color: #7FFF00;
			}
			/* 导航栏区域格子超链接 */
			.dh_box_area_a{
				color: white;
				font-size: 20px;
				font-weight: bold;
			}
			/* 导航栏区域超链接的移入事件 */
			.dh_box_area_a:hover{
				color: red ;
			}
			/* 轮播动图区域 */
			#gif_area{
				width: 1200px;
				height: 120px;
				margin: 10px auto;
			}
			/* 文章区域盒子 */
			#article_box{
				width: 1200px;
				height: 400px;
				margin: auto;
			}
			/* 文章区域左边和中间的右 外边距 */
			.article_box_left,.article_box_center{
				margin-right: 30px;
			}
			/* 文章区域 左 中 右三部分 尺寸一致 */
			.article_box_left,.article_box_center,.article_box_right{
				width: 380px;
				height: 400px;
				float: left;
			}
			
			/* 文章区域的 左中右三部分 的上半部分的下外边距  */
			.article_box_left_top,.article_box_center_top,
			.article_box_right_top{
				margin-bottom: 20px;
			}
			/* 文章区域的 左中右三部分 的上半部分,下半部分区域 尺寸一致  */
			.article_box_left_top,.article_box_left_bottom,
			.article_box_center_top,.article_box_center_bottom,
			.article_box_right_top,.article_box_right_bottom{
				width: 380px;
				height: 190px;
				background-color: white;
			}
			/* 每个小格子的几行是一样的尺寸 */
			.article_box_top_firstline,.article_box_top_otherline{
			  width: 380px;
			  height: 44.49px;
			  /* 边框尺寸一致 */
			}
			/* 每个小格子的其余几行*/
			.article_box_top_otherline{
				width: 360px;
				/* 注意外边距 */
				margin: 0px 10px;
			  /* 其余几行均为虚线 */
			  border-bottom: dashed 1px #000000;
			  text-align: left;
			  
			}
			/* 每个小格子的其余线条为虚线边框 */
			/* 每个小格子的第一行; */
			.article_box_top_firstline{
				/* 第一行均为实线 */
				border-bottom:solid 3px #00A9F8;
				/* 每个小格子的第一行均开启相对定位; */
				position: relative;
			}
			/* 每个小格子的第一行的左边一致 */
			.article_box_top_firstline_left{
				width: 100px;
				text-align: center;
				line-height: 47.49px;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: #00A9F8;
			}
			/* 每个小格子的第一行的左边部分移入事件 */
			.article_box_top_firstline_left:hover{
				color: #00FFFF;
			}
			/* 每个小格子的第一行的第二个标签要开启绝对定位 */
			.article_box_top_firstline_right{
				width: 60px;
				position:absolute ;
				top: 11px;
				right: 5px;
			}
			/* 每个小格子的第一行的超链接 */
			.article_box_top_firstline_right_a{
				color: #00A9F8;
				font-size: 15px;
				font-weight: bold;
			}
			/* 每个小格子的第一行的超链接 的移入事件 */
			.article_box_top_firstline_right_a:hover{
				color: #00FFFF;
			}
			/* 每个小格子的第一行的超链接 的点击事件 */
			.article_box_top_firstline_right_a:active{
				color: coral;
			}
			
			/* 友情链接栏 */
			#friendlylink_box{
				width: 1200px;
				height: 120px;
				background-color: white;
				margin: 10px auto;
			}
			/* 友情链接第一行 */
			#friendlylink_box_first{
			   width: 1200px;
			   height: 50px;
			   /* 下边框为蓝色实线*/
			   border-bottom: #00A9F8 3px solid;
			}
			/* 友情链接第一行的标题文本布置 */
			#friendlylink_box_first_left{
				width: 100px;
				line-height: 53px;
				text-align: center;
				font-size: 20px;
				font-weight: bold;
				color: white;
				background-color: #00A9F8;
			}
			#friendlylink_box_alllink{
				width: 1200px;
				height: 70px;
			}
			/* 包含超链接的盒子 */
			.friendlylink_box_alllink_content{
				width: 70px;
				height: 35px;
				text-align: center;
				line-height: 35px;
				/* 需要开启浮动 */
				float: left;
			}
			/* 友情链接 的超连接修饰 */
			.friendlylink_box_alllink_content_a{
				font-size: 15px;
				font-weight: bold;
			}
			
			/* 底部实线修饰 */
			#bottom_line{
			   width: 1200px;
			   height: 5px;
			   background-color: #00A9F8;
			   margin: auto;
			}
			
			/* 底部栏 */
			#bottom_box{
				width: 1200px;
				height: 20px;
				margin: auto;
				text-align: center;
				line-height: 20px;
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<!-- 顶部线条 -->
		<div id="top_line"></div>
		<!-- 顶部广告区域 -->
		<div id="logo_area">
			<div id="logo_area_left">
				<img src="img/logo.png" style="margin: 10px auto;">
			</div>
			<div id="logo_area_center">
				<img src="img/timg.jpg" />
			</div>
			<div id="logo_area_right">
				<a href="login.html" class="logo_area_right_a">登录</a>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<a href="" class="logo_area_right_a">注册</a>
			</div>
			<!-- 关闭左浮动 -->
			<div style="clear: left;"></div>
		</div>
		<!-- 导航栏区域 -->
		<div id="dh_box">
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">首页</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">唐诗</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">宋词</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">古代小说</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">现代小说</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">散文</a>
			</div>
			<div class="dh_box_area">
				<a href="" class="dh_box_area_a">诗歌</a>
			</div>
			<!-- 关闭左浮动 -->
			<div style="clear: left;"></div>
		</div>
		<!-- 轮播动图区域 -->
		<div id="gif_area">
			<img src="img/timg.gif"> 
		</div>
		<!-- 诗词文本简略区域 -->
		<div id="article_box">
			<!-- 诗词文本的左边两个区域 -->
			<div class="article_box_left">
				<div class="article_box_left_top">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">唐诗</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
				
				<div class="article_box_left_bottom">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">现代小说</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
			</div>
			<!-- 诗词文本的中间两块区域 -->
			<div class="article_box_center">
				<div class="article_box_center_top">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">宋词</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
				<div class="article_box_center_bottom">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">散文</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
			</div>
			<!-- 诗词文本的右边两块区域 -->
			<div class="article_box_right">
				<div class="article_box_right_top">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">古代小说</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
				<div class="article_box_right_bottom">
					<!-- 每个小格子区域包含着几行块级标签 -->
					<div class="article_box_top_firstline">
						<!-- 第一行包含两部分;一个指定标签;一个跳转按钮 -->
						<div class="article_box_top_firstline_left">诗歌</div>
						<div class="article_box_top_firstline_right">
							<a class="article_box_top_firstline_right_a" href="">更多>></a>
						</div>
					</div>
					<!-- 其余行内的内容-->
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
					<div class="article_box_top_otherline">
						<div>唐诗</div>
					</div>
				</div>
			</div>
			<!-- 关闭左浮动 -->
			<div style="clear: left;"></div>
		</div>
		
		<!-- 友情链接栏 -->
		<div id="friendlylink_box">
			<!-- 友情链接的第一行-->
			<div id="friendlylink_box_first">
				<div id="friendlylink_box_first_left">友情链接</div>
			</div>
			<!-- 链接存放处 -->
			<div id="friendlylink_box_alllink">
				<div class="friendlylink_box_alllink_content">
					<a href="" class="friendlylink_box_alllink_content_a">百度</a>
				</div>
				<div class="friendlylink_box_alllink_content">
					<a href="" class="friendlylink_box_alllink_content_a">百度</a>
				</div>
				<div class="friendlylink_box_alllink_content">
					<a href="" class="friendlylink_box_alllink_content_a">百度</a>
				</div>
				<div class="friendlylink_box_alllink_content">
					<a href="" class="friendlylink_box_alllink_content_a">百度</a>
				</div>
				<div class="friendlylink_box_alllink_content">
					<a href="" class="friendlylink_box_alllink_content_a">百度</a>
				</div>
				<!-- 关闭浮动 -->
				<div style="clear: left;"></div>
			</div>
		</div>
		<!-- 底部实线 -->
		<div id="bottom_line"></div>
		<!-- 底部栏 -->
		<div id="bottom_box">
			Prowered By 陕ICP备123456789号
		</div>
	</body>
</html>

效果:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小智RE0-走在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值