任务七：实现常见的技术产品官网的页面架构及样式布局

面向人群：: 初学者
难度：: 简单

重要说明

百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计。我们尽力保证课程内容的质量以及学习难度的合理性，但即使如此，真正决定课程效果的，还是你的每一次思考和实践。

课程多数题目的解决方案都不是唯一的，这和我们在实际工作中的情况也是一致的。因此，我们的要求不仅仅是实现设计稿的效果，更是要多去思考不同的解决方案，评估不同方案的优劣，然后使用在该场景下最优雅的方式去实现。那些最终没有被我们采纳的方案，同样也可以帮助我们学到很多知识。所以，我们列出的参考资料未必是实现需求所必须的。有的时候，实现题目的要求很简单，甚至参考资料里就有，但是背后的思考和亲手去实践却是任务最关键的一部分。在学习这些资料时，要多思考，多提问，多质疑。相信通过和小伙伴们的交流，能让你的学习事半功倍。

任务目的

通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力
学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变

任务描述

通过HTML及CSS实现设计稿设计稿PSD文件（点击下载），效果如效果图（点击打开）
设计稿是有一定宽度的，这个宽度为页面的最小宽度，也就是说，当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面部分内容的宽度应该保持和浏览器窗口宽度一致，具体哪些部分题目不做具体指明，看看大家的判断如何。

任务注意事项

只需要完成HTML，CSS代码编写，不需要写JavaScript
设计稿中的图片、文案均可自行设定
在Chrome中完美实现与设计稿的各项字体、布局、内外边距等样式
有能力的同学可以尝试跨浏览器的兼容性
有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次

任务协作建议

团队集中讨论，明确题目要求，保证队伍各自对题目要求认知一致
可以各自完成任务实践，也可以按照以下分模块然后各自分工完成
1. 从顶部到下一直到关于新世界（包含）
2. 查找新世界这一部分
3. 从各城市活动（包含）到新时代（包含）
4. 剩余部分
交叉互相Review其他人的代码，建议每个人至少看一个同组队友的代码
相互讨论，最后合成一份组内最佳代码进行提交

在线学习参考资料

MDN HTML入门
MDN CSS入门教程

转载于:https://www.cnblogs.com/dirks/p/6067378.html

任务七：实现常见的技术产品官网的页面架构及样式布局相关推荐

HTML5无人机产品官网专题模板
简介: HTML5无人机产品官网专题模板是一款bootstrap制作的响应式网站模板下载.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www.byt ...
大气美观的互联网产品官网HTML单页+超好看
正文: 超级好看的大气美观的互联网产品官网HTML单页,有兴趣的自行体验吧. 程序: wwegwg.lanzout.com/inxnc0aqc0yd 图片:
仿淘宝电商官网静态页面（HTML+CSS+JS）+ 常见布局解析，学会如果做是关键！
仿淘宝电商官网静态页面作为一个前端开发,布局+样式已经成为了必备的技能,你做得好是应该的,做的不好可以原谅,但当你意识到不足时,补足它这是我刚"入坑"的时候写的Demo,因为当 ...
【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）
项目源码已上传至码云仓库:云南农业职业技术学院/HTML响应式成人教育官网前端页面(HTML+CSS+JS实现) 项目演示地址:成人教育网 AAP端下载地址:成人教育网APP端.apk-互联网文档类资 ...
小米官网前端页面还原
小米官网前端页面还原网页效果图片 HTML css 初始化样式外部样式文件网页效果图片 HTML <!DOCTYPE html> <html lang="en&quo ...
微软在.NET官网上线.NET 架构指南频道
微软在Visual Studio 2017 正式发布的时候也上线了一个参考应用https://github.com/dotnet/eShopOnContainers , 最近微软给这个参考应用写了完善 ...
实战小米官网静态页面1：导航栏部分
小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距图片原 ...
仿猫眼官网静态页面（纯HTML）
仿猫眼官网静态页面(纯HTML) 准备工作正文 HTML CSS 小结准备工作用到的图片如下,具体可以去官网下面截取(这里就不上传图片了,供参考) 界面效果正文 HTML <!DOCTY ...
宽屏html5网络科技有限公司官网单页面响应式模板
宽屏html5网络科技有限公司官网单页面响应式模板文章目录项目介绍主要用途包含模块页面浏览获取方式项目介绍本项目主要由html5,css样式,原生js构成的宽屏单页面响应式模板.整体结构 ...