（五）移动端前端开发-页面布局案例

最新推荐文章于 2024-04-07 09:05:27 发布

孤傲倾城

最新推荐文章于 2024-04-07 09:05:27 发布

阅读量285

点赞数

分类专栏：移动端前端开发文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_56517198/article/details/128993870

版权

移动端前端开发专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS3来实现移动端页面布局，特别是针对不同屏幕尺寸的当当书香节导航部分的设计。通过index.htm、reset.css和style.css文件，实现了在屏幕宽度超过1200px时展示5个按钮，768px至1199px之间展示4个，480px至767px显示4个，以及479px以下显示3个按钮的响应式布局策略。

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

文章目录

制作当当书香节导航部分

制作当当书香节导航部分

1.需求说明：

屏幕宽度大于1200px，按钮一行显示5个
屏幕宽度大于768px小于1199px时，按钮一行显示4个
屏幕宽度大于480px小于767px，按钮一行显示4个；
屏幕宽度小于479px，按钮一行显示3个。
请添加图片描述

2.index.htm;

<! DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<title>当当书香节导航部分</title>
<link rel = "stylesheet" href = "css/reset.css">
<link rel = "stylesheet" href = "css/style.css">
</ head>
<body>
     <!-- 1、引入meta标签
          2、创建导航结构
          3、添加CSs样式
          4、制作响应式-->
	<div class=""box">
		<ul>
			<li><div>小说<span>></span></div></li>
			<li><div>青春动漫<span>></span></div></li>
			<li><div>经济管理<span>></span></div></li>
			<li><div>历史文化<span>></span></div></li>
			<li><div>人文社科<span>></span></div></li>
			<li><div>孕产育儿<span>></span></div></li>
			<li><div>旅游美食<span>></ span></div></li>
			<li><div>中小学教辅<span>></ span></div></li>
			<li><div>外语考试<span>></span></div></li>
			<li><div>文学艺术<span>></span></div></li>
			<li><div>成功励志<span>></span></div></li>
			<li><div>传记<span>></span></div></li>
			<li><div>哲学心理<span>></span></div></li>
			<li><div>亲子家教<span>></span></div></li>
			<li><div>保健养生<span>></span></div></li>
			<li><div>科技<span>></span></div></li>
			<li><div>童书<span>></span></div></li>
			<li><div>教材<span>></span></div></li>
		</ul>
	</div>
</ body>
</ html>

3.reset.css

/* css reset  重置样式*/
body,button,dd,dt,fieldset,form,
hl,h2,h3,h4,h5,h6,
input,legend,li,ol,P,
select,table,td,textarea,th,ul{
	margin: 0;
	padding : 0
}
 
body{
	min-width: 320px;
	font-family: 'microsoft yaahel', Verdana, Arial, Helvetica, sans8-serif;
	color: #000;
	-webkit-text-size-adjust:none;
}

fieldest,
img{
	border:0
}

ol,
ul{
	list-style: none;
}
 
address,
em{
	font-style: normal
}

a
{
	color: #000;
	text-decoration: none
}

 .box:after
{
	clear:both;
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	xisibility: hidden
}

4.style.css

/*style.css*/
.box{
	width: 100%;
	height: 300px;
	background: #011957;
}
.box ul li{
	float: left;
	width: 20%;
	margin-top: 17px;
}
.box ui li div{
	margin-left: 10px;
	height: 53px;
	background: #6745b5;
	border-radius: 10px;
	box-shadow: 0px 8px 0px #3e13a0;
	text-align: center;
	line-height: 53px;
}
.box ul li div a{
	color: #fff;
	display: block;
	width: 100%;
	font-size: 26px;
}
.box ul li div span{
	display: block;
	width: 26px;
	height: 26px;
	background: #011957;
	position: absolute;
	right: 10px;
	top: 28%;
	border-radius: 5px;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	line-align: 26px;
}

/*响应式部分，根据不同的宽度，去做对应的操作。*/
/*屏幕小于479px*/
@media screen and (max-width: 479px){
	/*改变每个li的宽度*/
	.box ul li{
		width: 33%;
	}
	/*改变每个div的样式 */
	.box ul li div{
		height: 30px;
		text-align: left;
		line-height: 30px;
		padding-left: 5px;
		border-radius: 6px;
		box-shadow: 0px 5px 0px #3e13a0;
	}
	/*设置字体大小*/
	.box ui li div a{
		font-size: 16px;
	}
	/*设置span样式*/
	.box ul li div span{
		width: 14px;
		height: 14px;
		font-size: 14px;
		line-height: 14px;
		right: 5px;
	}
}
/*屏幕宽度大于768px小于1199px，按钮一行显示4个；
@media screen and (min-width: 768px) and(max-width: 1199px){  
	改变对应样式
}
*/