实现常见的技术产品官网的页面架构及样式布局总结

任务目的

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

任务描述

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

任务注意事项

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

在线学习参考资料

• MDN HTML入门
• MDN CSS入门教程

实现常见的技术产品官网的页面架构及样式布局总结

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/任务七：实现常见的技术产品官网的页面架构及样式布局

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/任务七：实现常见的技术产品官网的页面架构及样式布局/index.html

转载于:https://www.cnblogs.com/melbourne1102/p/6504680.html