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

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

孤傲倾城

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

阅读量221

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

文章目录

制作当当书香节导航部分

制作当当书香节导航部分

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></l