第32章项目实战-移动端流体布局5

关键词：

第32 章项目实战-移动端流体布局[5] 学习要点： 1.导航固顶 2.三个栏目 3.公司简介 本章主要开始如果通过第一个PC 端项目进行重构，设计成移动端可访问的页面，这个 项目采用的是流体布局。 一．导航固定 由于移动设备屏幕高度较低，没有滚动条操作的便利性。一般来说，栏目的导航部分总 是固定在移动设备的某一个方位。我们这里将头部的导航永远固定在头部，不会随着页面向 下滑动而更改。 //固顶定位 #header { position: fixed; top: 0; z-index: 9999; } //相应的向下便宜45px #adver { padding: .45rem 0 0 0; } 三．三个栏目 和固定布局一样，栏目都有一个图片背景以及大小标题。 //HTML 部分

票务订购

各种飞机票、火车票、汽车票和轮渡票的订购服务

公司简介

公司的发展历程、获得荣誉以及联系方式

//CSS #headline { max-width: 6.4rem; margin: 0 auto; padding: 0.45rem 0 0 0; position: relative; } #headline hgroup { position: absolute; top: 50%; left: 10%; } #headline h2 { color: #eee; letter-spacing: 0.01rem; font-size: .22rem; } #headline h3 { color: #eee; letter-spacing: 0.01rem; font-size: .14rem; } 三．公司简介 这个栏目最简单，我们最优先完成。 //html //CSS .list { max-width: 6.4rem; margin: .15rem auto; font-size: .16rem; padding: 0 .1rem; color: #666; } .list h2 { font-size: .20rem; border-bottom: 1px dashed #999; padding: 0 0 .15rem 0; } .about p { line-height: 2; margin: .2rem 0; } .about address { font-style: normal; margin: .2rem 0; line-height: 1.6; } //响应式部分 /*媒体查询，大于480px 小于640px*/ @media (min-width: 480px) and (max-width: 640px) { #tour h3, #footer, #tour figcaption, #tour .info,.list { font-size: .16rem; } #headline h2 { font-size: .22rem; } #headline h3 { font-size: .14rem; } .list h2 { font-size: .20rem; } } /*媒体查询，小于480px*/ @media (max-width: 480px) { #tour h3, #tour figcaption, #tour .info,.list { font-size: .14rem; } #headline h2 { font-size: .18rem; } #headline h3 { font-size: .12rem; } .list h2 { font-size: .17rem; } } 代码：

第32章项目实战-移动端流体布局6

第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情

第32章项目实战-移动端流体布局4

第32章项目实战-移动端流体布局[4]学习要点：1.旅游图片部分本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游图片部分//HTML部分<divclass="container"><figure>... 查看详情

第33章项目实战-兼容式响应布局6

第32章项目实战-移动端流体布局[6]学习要点：1.旅游资讯2.机票预定本章主要开始如果通过第一个PC端项目进行重构，设计成移动端可访问的页面，这个项目采用的是流体布局。一．旅游资讯这个如果做成移动端，那么一切从简，... 查看详情

第33章项目实战-兼容式响应布局1

第33章项目实战-兼容响应式布局[1]学习要点：1.响应式初探2.起始部分本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使用... 查看详情

第33章项目实战-兼容式响应布局2

第33章项目实战-兼容响应式布局[2]学习要点：1.搜索响应式2.底部响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情

第31章项目实战-pc端固定布局5

第31章项目实战-PC端固定布局[5]学习要点：1.底部区域2.说明区域3.版权及证件区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．底部区域本节课，我们将探讨一下首页中最底部的区域... 查看详情

第33章项目实战-兼容式响应布局3

第33章项目实战-兼容响应式布局[3]学习要点：1.标题响应式2.图片响应式本章主要开始如果将前两个项目再进行重构，设计成既可以在PC端正常显示，又可以在PAD上浏览，还可以在移动端有良好的体验。这些都必须兼容，那只有使... 查看详情

第31章项目实战-pc端固定布局9

第31章项目实战-PC端固定布局[8]学习要点：1.资讯内容2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．资讯内容和首页一样，只不过这里，布局方式有所不同，具体如下：二... 查看详情

第31章项目实战-pc端固定布局10

第31章项目实战-PC端固定布局[10]学习要点：1.机票预定2.代码详解本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．机票预定机票预定页面，具体如下：二．代码详解//全部代码<formactio... 查看详情

第31章项目实战-pc端固定布局4

第31章项目实战-PC端固定布局[4]学习要点：1.热门旅游区2.标题介绍区3.旅游项目区本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．热门旅游区本节课，我们将探讨一下首页最核心的部... 查看详情

第31章项目实战-pc端固定布局8

第31章项目实战-PC端固定布局[8]学习要点：1.归类合并2.子导航本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．归类合并在前面几节课中，有一部分HTML代码比较松散，没有统一到一个类... 查看详情

第31章项目实战-pc端固定布局3

第31章项目实战-PC端固定布局[3]学习要点：1.搜索区2.插入大图3.搜索框本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．搜索区本节课，我们接着header头部往下，来设计一块搜索区。这... 查看详情

第31章项目实战-pc端固定布局6

第31章项目实战-PC端固定布局[6]学习要点：1.分离CSS2.头部区域3.内容区域本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．分离CSS本节课，我们将要创建一个新的页面：旅游资讯。那么... 查看详情

第31章项目实战-pc端固定布局7

第31章项目实战-PC端固定布局[7]学习要点：1.侧栏制作2.详细代码本章主要开始使用学习用HTML5和CSS3来构建Web页面，第一个项目采用PC端固定布局来实现。一．侧栏制作本节课，主要设计一下内容页面的侧栏部分，分三个小块。经... 查看详情

javassm开发大众点评后端项目实战教程javassm项目实战教程共9章

第1章课程概览  介绍课程目标、开发内容、功能划分、开发顺序，开发所需要的前置知识及环境准备，并且介绍了与课程相关的前后端分离的思想，架构演进过程。第2章开发准备  演示前端工程环境搭建以及启动... 查看详情

移动端appui设计入门与实战

...介绍本章为课程导学，帮助同学们初步了解UI设计，介绍实战课程安排，并熟悉产品设计、开发流程，了解如何与其它岗位配合。1-1导学视频1-2产品开发流程第2章产品需求解析本章将针对产品需求进行解析，通过草图、流程图形... 查看详情

web开发需要学习啥？

...件的运用、BootStrap源码分析。能够熟练使用less、sass完成项目开发，深入了解BootStrap。4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。第二阶段：... 查看详情

《移动平台开发实践》第7周学习总结(代码片段)

...用场景想要解决的问题提出解决方案筛选和验证方案软件项目需求分析收集需求分析需求：表层需求→深层需求→底层需求需求评价需求设计验证需求产品经理常用软件AxureRP墨刀石墨文档第27章主要介绍了5种控件布局方法：Linea... 查看详情