第09章 HTML&CSS实战-【好程序员成长】HTML5从入门到精通

元素屏幕居中 分页展示 三角形图标 漂亮的上传按钮 标签切换页 Photoshop切图 Photoshop切图流程 Photoshop切图实例 第9章 HTML&CSS实战 元素屏幕居中 分页展示 三角形图标 漂亮的上次按钮 标签切换页 Photoshop切图 Photoshop切图流程 Photoshop切图实例 目 录 CATALOUGUE 01 02 04 05 03 06 07 08 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 掌握如何解决实际开发需求 了解问题 理解解决问题方案 熟悉Photoshop切图 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 9.1 元素屏幕居中 9.1.1 问题 9.1.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 图中明显的特点就是无论浏览器的分辨率是多少，它都能够居中显示。那么问题来了，如何使元素在不同的浏览器分辨率下居中显示？ 在浏览网页时，经常会看到一些网站的整体是在浏览器中，进行居中显示的，如百度首页居中显示。 9.1 元素屏幕居中 9.1.1 问题 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 通过CSS样式中的margin外边距可以解决居中的问题。前面章节提及过auto值，表示自适应。当给元素添加margin-left值为auto时，元素左边距为自适应，左边能自适应多少空间就会产生多少左边距。同样当设置margin-right值为auto时，元素右边距为自适应，元素右边能自适应多少空间就会产生多少右边距。如果左右边距都设置成auto自适应值，则元素左右空间都需要自适应，就会平均分配边距，从而使元素在不同的浏览器分辨率下都能够居中显示。当然可以把margin整合成复合写法。 9.1 元素屏幕居中 9.1.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 这种居中的方式只是针对块类型元素的标签。对于内联类型元素的标签，需要采用给父容器设置text-align值为center的方式进行居中处理。 9.1 元素屏幕居中 9.1.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 这种居中的方式只是针对块类型元素的标签。对于内联类型元素的标签，需要采用给父容器设置text-align值为center的方式进行居中处理。 9.1 元素屏幕居中 9.1.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 解决内联类型元素的标签居中问题 9.1 元素屏幕居中 9.1.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 9.2 分页展示 9.2.1 问题 9.2.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 分页展示是网页中常见的布局效果，当数据量比较多的情况下，就会用分页进行展示，如百度搜索页，如图所示。 9.2 分页展示 9.2.1 问题 接下来通过基本结构来实现分页效果。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 11 9.2 分页展示 9.2.1 问题 例中实现了分页效果，<li>列表项采用浮动处理，无法通过margin值为auto的方式进行居中，而且<li>标签也不是内联类型的元素，因此也无法通过设置父元素的text-algin值为center的方式进行居中。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 12 9.2 分页展示 9.2.2 解决方案 元素既支持宽高和左右排列，并且可以在父容器中居中展示。因此，可以通过设置display值为inline-block方式进行处理，让元素既具备块类型的特点，同时也具备内联类型的特点。这样就可以让分页展示在父容器中居中显示。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 13 9.3 三角形图标 9.3.1 问题 9.3.2 解决方案 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 9.3 三角形图标 9.3.1 问题 在很多导航效果中，通常会添加一个三角形的图标，例如天猫官网的导航条，如图所示。 盒子模型只能设置宽高属性的矩形框出来，而三角形图标可以使用图片来实现，但这种方式比较麻烦，可以通过CSS中的border边框属性来实现三角形效果。 初心至善 匠心育人 锋云智慧官网 www.fengyunedu.cn 15 9.3 三角形图标 9.3.2 解决方案 首先给一个盒子