前端基础实战 8_第1页
前端基础实战 8_第2页
前端基础实战 8_第3页
前端基础实战 8_第4页
前端基础实战 8_第5页
已阅读5页，还剩36页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

布局项目实战课件目录01在线计算器布局02蜗牛学苑宣传页布局03响应式布局04蜗牛笔记布局在线计算器布局项目介绍本实战项目主要结合第2章完成的在线计算器的布局，对第2章的基于表格完成的布局利用盒模型+CSS进行改造，基本需求描述如下。（1）全部使用盒模型标签完成，不得使用其他标签。（2）3个小圆点使用盒模型完成，利用盒模型的圆角属性完成圆形设计。（3）结果框为红色边框加白色背景，计算器的四周为圆角。在线计算器界面如图5-1所示。在线计算器布局开发思路先从总体上对在线计算器进行布局分析，其需要一个完整的父容器，即最外面的那一层容器，其大小和宽度可以参考第2章的设置。将背景色铺满整个容器，背景色为灰色。再从上而下来分析在线计算器的布局，需要在第1行盒模型中实现3个小圆点，如果盒模型是一个正方形，且圆角足够圆，圆到其半径是正方形边长的一半，则可以将一个正方形变成一个圆形，结合第一行盒模型的容器对距离进行控制，即可模拟出圆点。接下来设计结果框，要求是白色背景加黑色边框，所以在此只需要设置一个盒模型，并保持其相对于父容器水平居中（margin:0auto）即可。最后设计在线计算器的按键部分，按键部分完全可以由单个盒模型构成，只需要为所有按键设置一个父容器，并为各按键设置向左浮动即可。在线计算器布局代码实现具体的实现代码如下，请关注代码的注释部分。蜗牛学苑宣传页布局项目介绍利用盒模型+CSS的布局方式实现的蜗牛学苑Java培训宣传页如图5-2所示。该宣传页顶部导航菜单栏是固定且半透明的，同时页面两边有两个页面内导航工具栏，无论页面如何移动，该工具栏始终存在且一直在固定位置出现。蜗牛学苑宣传页布局项目介绍其次，根据线框图对该页面进行拆分和编号，主要包括顶部导航栏、中上部提问栏、中下部回答栏、底部超链接栏、左右两边的工具栏。下述分析将基于这个线框图和对应位置区域的编号进行。①

整个页面的文字颜色都是白色，字体都是“微软雅黑”，在这种情况下，可以直接针对<body>标签设置这两个全页面的公共属性。②

顶部导航栏是1行N列的样式，只需要设置一个父容器，并相对于浏览器窗口水平居中，在其内部再放置N个盒模型并设置为浮动或使用弹性布局即可。③

中上部提问栏的内容（即“开发者们为何喜欢Java？”）相对简单，需要两个盒模型，只需要设置好其高度、宽度、大小和padding属性即可。④

关于中下部回答栏的内容，即3行4列的格子组合，可以通过表格来实现，即先绘制一个3行4列的表格，并设置相同的宽度和不同的高度，再设置一定的padding属性保持内容之间的距离即可。蜗牛学苑宣传页布局项目介绍⑤

底部的两个超链接按钮实现了一个圆角、一个超链接、一个背景色，这些都是相对简单的处理，此处不再分析，直接看代码实现部分即可。⑥

左、右两边的工具栏是固定于浏览器窗口中的，只需要为其设置position:fixed即可。左边的工具栏只是一张图像，利用一个盒模型进行放置即可；右边的工具栏是导航工具栏，有9行1列，也可以利用盒模型来实现，这里利用列表项来实现，只需让列表项不显示前面的数字或小圆点之类的风格即可。蜗牛学苑宣传页布局代码实现1．页面顶部代码实现蜗牛学苑宣传页布局代码实现2．页面主体部分代码实现2．页面主体部分代码实现蜗牛学苑宣传页布局代码实现2．页面主体部分代码实现蜗牛学苑宣传页布局代码实现3．实现左、右工具栏实现左、右工具栏的界面绘制及固定定位，实现代码如下。蜗牛学苑宣传页布局代码实现响应式布局响应式布局简介响应式布局是伊桑·马科特在2010年5月提出的一个概念，其是指一个网站能够兼容多个终端，而不是为每个终端制作一个特定的版本。响应式布局可以为不同终端的用户提供舒适的界面和良好的用户体验，随着目前大屏幕移动设备的普及，其发展与应用已是“大势所趋”。随着越来越多的设计师采用这种技术，不仅出现了很多创新，还出现了一些成形的模式。响应式布局的优点如下。（1）面对不同分辨率的设备有较高的灵活性。（2）能够快捷地解决多设备显示适应问题。响应式布局的缺点如下。（1）兼容各种设备导致工作量增加，效率低。（2）代码累赘，会出现隐藏的、无用的元素，页面加载时间加长。响应式布局响应式布局简介其实响应式布局是一种折中性质的设计解决方案，受多方面因素影响而达不到最佳效果，且其在一定程度上改变了页面原有的布局结构，会影响用户体验。例如，蜗牛笔记采用响应式布局实现的PC端页面效果如图5-7所示，移动端页面效果如图5-8所示。响应式布局媒体查询1．什么是媒体查询媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color等。使用媒体查询，可以让开发者根据设备显示器的特性（如视口宽度、屏幕比例、设备方向）为其设定CSS，可以在不改变页面内容的情况下，为一些特定的显示设备定制显示效果。媒体查询通过不同的媒体类型和条件定义样式表规则，使CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。响应式布局媒体查询2．媒体查询能够获取的值（1）width：浏览器可视宽度。（2）height：浏览器可视高度。（3）device-width：设备屏幕分辨率的宽度。（4）device-height：设备屏幕分辨率的高度。（5）orientation：检测设备目前处于横向还是纵向状态。（6）aspect-ratio：检测浏览器可视宽度和可视高度的比例。（7）device-aspect-ratio：检测设备的宽度和高度的比例。（8）color：检测颜色的位数。（9）color-index：检查设备颜色索引表中的颜色，值不能是负数。（10）monochrome：检测单色帧缓冲区域中的每个像素的位数。（11）resolution：检测屏幕或打印机的分辨率。（12）grid：检测输出设备是网络设备还是位图设备。响应式布局媒体查询3．语法结构及示例媒体查询的基本语法结构如下。@media设备一only（选取条件）not（选取条件）and（设备选取条件），设备二{声明块}示例1：在<link>标签中使用@media，代码如下。<linkrel="stylesheet"type="text/css"media="onlyscreenand(max-width:800px),onlyscreenand(max-device-width:800px)"href="link.css"/>上述代码表示当浏览器可视最大宽度和设备屏幕分辨率的最大宽度为800像素时，导入link.css文件。响应式布局媒体查询示例2：在样式表中内嵌@media，代码如下。<style>@mediascreenand(min-width:720px){div{border:solid5pxred;font-size:20px;}}</style>参数解释如下。①only：可省略。②max-width：浏览器可视最大宽度。③max-device-width：设备屏幕分辨率的最大宽度。响应式布局媒体查询4．综合运用PC端的显示器是横向布局的，即屏幕分辨率的宽度要大于高度，如分辨率为1600像素×900像素时，1600像素是宽度，900像素是高度。而在移动端刚好相反，即宽度要小于高度，如分辨率为1920像素×1080像素时，1920像素是高度，而1080像素是宽度。所以，同一个页面中，在移动端和PC端需要实现不同的布局以更好地适应屏幕。以下示例演示了一个简单的PC端和移动端自适应的响应式布局。PC端显示器一行显示了4格，是横向布局；当屏幕分辨率的宽度低于1080像素时，认为是在移动端访问，将1行4列调整为2行2列。示例代码如下。响应式布局媒体查询响应式布局Bootstrap框架1．栅格系统栅格系统通过一系列的行与列的组合来创建页面布局。其核心思想是先设置一个网页的固定宽度，再对其进行12等分。同时，针对不同分辨率的屏幕进行单独的设定，可以在不同分辨率的情况下，为每一列设置不同的宽度，进而实现响应式布局。表5-1展示了Bootstrap4.x下的栅格系统对应分辨率。响应式布局Bootstrap框架2．综合运用响应式布局Bootstrap框架蜗牛笔记布局整体风格蜗牛笔记是一个博客网站，其界面设计的重点在于让用户快速地找到自己感兴趣的文章，所以在风格设计上不应过于复杂，也不宜设计过多的功能。本书将其整体界面设计为3个部分：顶部导航栏、中部内容栏和底部附加栏。读者可以使用Windows操作系统自带的画图软件绘制图5-15所展现的界面布局。蜗牛笔记布局整体风格为了更好地适配移动端，可以将放置Logo的行缩小，将用户菜单和文章分类折叠为分类导航折叠按钮，使内容呈现的主要区域（主内容区域）占满移动端屏幕，将搜索框和文章推荐栏放置于主内容区域的下面，底部的网站附加功能可以隐藏，也可以直接收缩显示。蜗牛笔记移动端页面布局大致类似于图5-16。蜗牛笔记布局顶部设计顶部的设计主要分为两个区域：Logo区域和导航栏区域。1．Logo区域Logo区域由一张图像和一条文字标语组成，只需要设计1300像素的宽度，并实现水平居中，同时确保Logo和标语垂直居中即可，基础代码如下。蜗牛笔记布局顶部设计2．导航栏区域导航栏的设计本身比较简单，但是考虑到需要适配移动端，所以仍然需要借助Bootstrap的响应式布局。同时，移动端由于宽度不够，无法正常显示所有菜单，因此必须通过折叠的方式对菜单进行隐藏，并将横向菜单变成竖向菜单。示例代码及其注释如下。蜗牛笔记布局顶部设计蜗牛笔记布局中部设计中部页面分为左、右两栏，PC端设计为左边9列、右边3列的宽度，而在移动端设计为全部12列的宽度以迫使元素竖向布局。通常在设计静态页面时，由于静态页面没有从数据库中获取数据进行填充的能力，因此可以直接使用一些固定在HTML页面中的图像和文字进行填充，待最后进行前后端整合的时候再进行替换。通过这样的方式能够看到完整的页面设计效果蜗牛笔记布局中部设计上述框架图并没有使用画图软件进行绘制，而是通过在HTML代码中添加盒模型并设置边框来实现的，这样后续只需要向其中填充内容即可。示例代码如下。蜗牛笔记布局中部设计线框图设计完成后，可以开始填充静态内容，以实现最终的页面效果，具体步骤如下。（1）在放置轮播图的位置，准备大约3张图像，并使用Bootstrap的轮播组件实现轮播效果。（2）在文章摘要部分，准备一张图像用于显示文章缩略图。文章缩略图放置于该部分的最左侧，并设置为在移动端环境下隐藏，以让出位置显示文章标题和正文摘要。同时，为了使首页能够显示一样大小的缩略图，建议通过CSS属性强制设置该图像的宽度和高度。文章摘要部分的正文部分可以使用3行显示内容的样式，即第1行显示文章标题，第2行显示文章信息，第3行显示正文摘要。（3）文章搜索栏只需要显示一个用于输入关键字的文本框，以及一个用于搜索的搜索按钮即可。（4）文章推荐栏部分设置为两行，第1行显示标题，第2行显示文章列表，并使用<ul>标签进行设置。蜗牛笔记布局中部设计下述代码为完整的中部区域的HTML代码，请根据代码注释进行理解。蜗牛笔记布局利用AI生成轮播图轮播效果需要JavaScript的支持，在Bootstrap中需要加载JavaScript组件库才能完成。如果读者想要为页面添加轮播图，则可以借助Cline或Continue进行处理。新建一个HTML源文件并交给Cline或Continue进行处理。提示词如下。请基于Bootstrap4.X框架，生成3张轮播图像，图像路径为../image，图像文件名称为banner-1.jpg、banner-2.jpg和banner-3.jpg。此处编者使用Continue结合Claude3.7模型生成轮播图，代码如下。弹性布局弹性布局简介1．什么是弹性布局弹性布局可以很好地解决盒模型+CSS布局中存在的居中调整不方便、浮动重叠，以及细节调整过多等问题，也能够更好地适配移动端。弹性布局在针对移动端的页面布局中具有举足轻重的地位。2．弹性布局的原理弹性布局的核心概念有两个：弹性容器和弹性项目。弄懂这两个概念后，掌握弹性布局就简单多了。

3．弹性项目的排列方式弹性项目在弹性容器中的排列是分主轴和侧轴的，且主轴和侧轴是相互垂直的。无论是主轴还是侧轴，在页面中都是在水平或垂直方向进行选择的。弹性布局弹性布局相关属性弹性布局提供了非常多的CSS属性，根据使用的标签不同，可以将这些CSS属性分为两种：弹性容器专属属性和弹性项目专属属性。弹性布局弹性布局相关属性弹性布局弹性布局相关属性同时，在弹性布局中，如果将弹性项目（即#boxdiv）的每个盒模型的宽度都设置为1000像素，则可以看到浏览器会正常显示每个盒模型，且宽度进行了自适应调整，不会出现水平滚动条，其效果如图4-28所示。但是在非弹性布局中，由于浏览器宽度的限制，是无法对4个盒模型全部进行

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论