实现常见的技术产品官网的页面架构及样式布局总结
任务目的
- 通过实现一个常见的技术产品官网，加深对于HTML，CSS的实战能力
- 学习掌握如何在没有标注的情况下实现设计稿到页面的精确转变
任务描述
- 通过HTML及CSS实现设计稿 设计稿PSD文件（点击下载），效果如 效果图（点击打开）
- 设计稿是有一定宽度的，这个宽度为页面的最小宽度，也就是说，当浏览器窗口宽度小于设计稿宽度时，允许出现横向滚动条，页面内容宽度保持不变，但是当浏览器窗口宽度大于设计稿宽度时，页面部分内容的宽度应该保持和浏览器窗口宽度一致，具体哪些部分题目不做具体指明，看看大家的判断如何。
任务注意事项
- 只需要完成HTML，CSS代码编写，不需要写JavaScript
- 设计稿中的图片、文案均可自行设定
- 在Chrome中完美实现与设计稿的各项字体、布局、内外边距等样式
- 有能力的同学可以尝试跨浏览器的兼容性
- 有能力的同学可以在实现一遍后尝试用less, sass或者stylus等再实现一次
在线学习参考资料
实现常见的技术产品官网的页面架构及样式布局总结
1、 CSS min-width属性
min-width属性用于设置一个元素的最小宽度，它防止元素宽度小于最小宽度。
注意：min-width属性值在max-width和width之间。
CSS语法：
min-width: length|initial|inherit;
属性值：
length：默认值为0，使用px，cm等定义最小宽度。
%：使用容器宽度的百分比定义最小宽度。
initial：设为默认值。
inherit：继承父元素属性值。
2、 HTML <button>标签和<input> type=button区别
（1）<button>元素内可以放很多内容，比如文本或图片，这是<button>与<input>元素产生的button之间的主要区别。
（2）如果在form中使用<button>元素，不同浏览器可能提交不同的值，所以在form中，使用<input>产生按钮。
3、 HTML <button>标签
<button>标签定义了一个可点击的按钮。
注意：一定要定义<button>元素的type属性，不同浏览器对<button>元素使用不同默认type属性。
属性：
autofocus属性：属性值：autofocus。当页面加载完成后，按钮自动获得焦点。
disabled属性：属性值：disabled。定义按钮不可用。
form属性：属性值：form_id。定义按钮属于的一个或多个表单。
formaction属性：属性值：url。当type=“submit”时，定义当表单提交时，表单数据发送到哪里。
formenctype属性：属性值：application/x-www-form-urlencoded，multipart/form-data，text/plain。当type=”submit”时，定义在表单数据发送到服务器之前，表单数据以何种方式编码。
formmethod属性：属性值：get/post。当type=”submit”时，定义如何发送数据（使用http方法）。
formnovalidate属性：属性值：formnovalidate。当type=”submit”时，定义表单数据在提交时不被验证。
formtarget属性：属性值：_blank，_self，_parent，_top。当type=”submit”时，定义提交表单数据后，在哪里展示结果。
name属性：属性值：name。定义按钮的名字。
type属性：属性值：button，reset，submit。定义按钮类型。
value属性：属性值：text。定义按钮的初始值。
4、 HTML <hr>标签
在HTML5中，<hr>标签定义一个主题转折，比如转换话题，也可用来划分内容，比如定义一个HTML页面改变。
在HTML4.01中，<hr>标签定义一个水平线。
虽然<hr>标签在很多浏览器中依然被展示为一条水平线，但是它现在更多的被定义为主题的方面，而不是展示的方面，所有的展示属性移出HTML5，使用CSS。
align属性：属性值：left，center，right。定义<hr>元素的对齐方式。（HTML5不支持）。
noshade属性：属性值：noshade。定义<hr>元素应该使用纯色，不使用阴影颜色。（HTML5不支持）。
size属性：属性值：pixels。指定<hr>元素的高。（HTML5不支持）。
width属性：属性值：pixels，%。定义<hr>元素宽。（HTML5不支持）。
5、 如何添加图标
使用background-image、background-position、background-size、background-repeat等属性添加。
6、 CSS background-image属性
background-image属性为一个元素设置一个或多个背景图片，背景包含元素的padding和border但不包含margin。默认情况下，background-image放置在元素的左上角，并且在横纵方向上重复。
注意：设置background-color，当图片不可用时使用。
CSS语法：
background-image: url|none|initial|inherit;
属性值：
url（‘URL’）：图片的URL。如果使用多张图片，URL之间用逗号隔开。
none：没有背景图片。默认值。
initial：设为默认值。
inherit：继承父元素。
7、 CSS background-position属性
background-position属性设置背景图片的起始位置。
注意：默认值为：backgroun-image放置在元素的左上角，并且在横纵方向重复。
CSS语法：
background-position: value;
属性值：
left top, left center，left bottom，right top，right center，right，bottom，center top，center，bottom：如果只设置一个值，另一个为“center”。
x% y%：第一个值是水平位置值，第二个值是垂直值。左上角值为0% 0%。右下角值为100% 100%。如果只设置一个值，另一个值为50%。默认值为0% 0%。
xpos ypos：第一个值是水平位置值，第二个值是垂直值。左上角值为0 0。可以使用像素（0px 0px）或者其他CSS单位。如果只设置一个值，另一个值为50%。可以混合使用%和位置。
initial：设为默认值。
inherit：继承父元素属性值。
8、 如何保持图片宽高比固定
若保持的宽高比为图像本身的宽高比，将height设为auto即可。
9、 当selsct样式修改过多，无法直接使用CSS完成时，可以使用<input tupe=”text”>,<ul>,display:none等方式模拟select。
10、 子元素选择器和后代选择器
子元素选择器，使用大于号（子结合符），只选择某元素的子元素。
例如：h1 > strong表示选择作为h1元素子元素的strong元素。
后代选择器，使用空格，更确切的说是一个或多个空白字符，选择由第一个元素作为祖先元素的所有第二个元素（后代元素），无论中间隔几代。
11、 已提交作业：
代码地址：https://github.com/Nunawading2016/2017-IFE-Baidu/tree/master/任务七：实现常见的技术产品官网的页面架构及样式布局
