0%

Web网页设计 - 耀炎食品有限公司

开发环境

开发工具

WebStorm 2020、Visual Studio Code

使用的框架/库

jQuery-2.1.4,fancybox

首页

实现难点及实现思路

首页顶部导航条:使用了浮动布局,中间logo具有语义使用a标签包裹,链接到首页,右侧项右浮动,左侧项左浮动,仔细观察设计图,发现每项有渐变椭圆光晕,同时这个光晕还是半透明(能够看到一点背景花纹),一开始我使用 CSS3中径向渐变加opacity半透明来实现,但发现这样文字也会跟随半透明(文字不再纯白),于是我将 radial-gradient 的颜色值改变为 rgba表示,并alpha设置为0.5,这样就达到了仅背景半透明,再设置hover状态颜色加深即可,最后为了颜色过渡更加自然,我使用了transition。

首页顶部幻灯片:借鉴了网易新闻幻灯片实现原理,不会因为从第一张幻灯片切换到第5张幻灯片而闪现中间幻灯片,原理:将所有非当前幻灯片定位至左侧,而最外层大盒子有宽,并overflow:hidden,即可隐藏,再根据当前目标位置,只将需要的幻灯片图片移动到中间,若需要从右侧进入,则迅速先定位到右侧,这个过程无动画而是直接定位,用户无法察觉,所以看起来就像是从右侧进入,通过此方法实现了无缝滚动,解决了跳跃切换幻灯片中间闪现问题。

首页底部产品推荐:由设计图可以看出,这是一个列表,每行元素都在两端对齐,虽然这里可以简单通过浮动实现,但适应性不好,容易受用户端影响,以及不易后期维护(用浮动就要用margin-right来定外边距),于是这里使用了CSS3中的flex布局,justify-content: space-between;即两端对齐,同时为了增加用户体验,为每张卡片增加了浮动阴影动画效果,增加立体感与交互体验。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

联营合作页

实现难点及实现思路

中部内容区为一个图片,将其居中对齐,底部logo具有语义,同时为了SEO,单独定位居中,邮箱地址使用mailto链接,点击即可自动打开用户端电子邮件软件实现快速发邮件。顶部导航,底部版权这些都是公共部分,为实现重用,样式被提取到main.css,而基础类库被提取到base.css。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

配套服务页

实现难点及实现思路

可以发现内容区是一个列表,含着许多项,而每一项分为标题区,文字区,图片区,为了方便后端对接,标题区应该是背景图片和文字垂直排列居中的组合,再仔细观察,发现奇数项标题区左侧,图片右侧,偶数项标题区右侧,图片左侧,而文字区始终中间排列,于是我充分利用CSS :nth-child(odd)与:nth-child(even)选择器来为奇数,偶数项分别布局。后端不应当关注前端样式布局,于是为了保持每一项html结构相同,我充分利用了向右浮动逆序排列的特点,让偶数项内三区块右浮动(逆序排列),奇数项内三区块左浮动(维持原html结构排列顺序),这样便实现了奇数项羽偶数项不同排列效果,同时又维持了所有项相同html结构,后端无需考虑布局样式等问题,一个循环即可接入前端,减轻了后端开发工作难度,加快了项目开发效率。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

门店服务页

实现难点及实现思路

可以发现内容区是一个典型的时间轴布局,奇数项靠左侧,偶数项靠右侧,都向中对齐, 时间轴的难点在于自适应性,而不是纯粹的定位拼凑布局,每项内容由后端模板引擎遍历解析,应保证每项的html结构相同,同时不会因为内容不受限而影响时间轴布局,靠左靠右内容向中对齐,这些使用css即可轻易实现,关键在于高度,每一项的高度都应当根据内容自适应,这么一来,每一项在时间轴的y轴位置也就变得不确定了,再仔细观察,会发现情况更加复杂,每一项在单侧距离上一项的高度是不一致的,某些项因为高度过高而导致单侧下一项距离过远就不美观了,同时每一项都不应当定位于上一项之前,这才能体现时间轴布局,总结:既要考虑内容撑开的高度,又要考虑在html结构中的顺序,还要考虑在单侧的高度位置,于是,最后我选择使用了js来动态定位每一项的y轴,同时,为了使展开时间轴更加自然,我使用了jQuery中的animate来设置css,最后还需要注意绝对定位元素脱离文档流,这时最外层盒子无高度,所以还需要通过计算累积高度来设置外层盒子高度。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

关于我们页

实现难点及实现思路

可以发现内容区是一个文字段落内容,这通常来自内容管理系统(CMS)的Web富文本编辑器,它是用p标签来标记段落,因此在css选择器上,我直接使用.about p对其中的p标签进行选中,值得注意的是行高,首行缩进这些都要比对设计图设置到位,副标题:“企业简介”使用了绝对定位left: 50%加margin-left: -61px(宽度一半)的方法来使其水平居中对齐,之所以使用这个方法而不是text-align:center;是因为有一条线贯穿了副标题,因此我需要将其设置为块元素,而父盒子就是那条线,这样做而不是大盒子嵌套线与副标题盒子的好处时,代码结构更加清晰,少嵌套了一层,后期维护更加容易,同时由于是background-color设置背景色的方式设置线条颜色,后期需求改变更换颜色也更容易。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

品牌和产品页

实现难点及实现思路

可以发现内容区是一个选项卡加列表的组合,需要在鼠标移上去时展示对应具体内容,为了使过渡更加自然,我使用了transition,默认每项的详情文字盒子绝对定位于每项父盒子 ,宽度0,当鼠标移上去触发hover时,再将宽度展开,但由于不同位置进行宽度展开不尽相同,所以我需要分别设置样式,设计图纸只有第一项有已给出的hover效果,于是我自己设计了其余位置的hover效果,最后采用 :nth-child(3n) 为所有索引是3的倍数的项单独设置样式,:nth-child(3n+2)为2, 5, 8…项单独设置样式,最后因为Firefox上的定位问题,使用 @-moz-document url-prefix()为Firefox单独设置了样式;同时每一项都使用box-shadow增加了阴影效果,选项卡切换没有使用js,而是使用了css,但后期需求改动可能性大的选项卡导航栏部分使用了js,同时导航栏部分由js自动根据选项卡内容自动生成,尽可能的降低后端接入与后期维护的成本,提高开发效率。

实现代码

实现效果

页面兼容Chrome 26.0浏览器、Firefox (Gecko) 16.0、Opera 12.10、Safari (WebKit) 3.2浏览器和Internet Explorer 8浏览器,实现截图如图3-1所示。

Q&A

Q: CSS3 中 transtion ?

A:

语法:

1
transition: property duration timing-function delay;

默认值:

1
transition: all 0 ease 0
描述
transition-property 规定设置过渡效果的 CSS 属性 的名称。
transition-duration 规定完成过渡效果需要 多少秒 或毫秒。
transition-timing-function 规定速度效果的 速度曲线
transition-delay 定义过渡效果 何时开始

Q: CSS3 中 translate3d(x,y,z) ?

A: 3D 转化,transform: translate3d(0,-100%,0);

1
transform: none|transform-functions;

translate3d 是 transform 属性的一个变换函数(transform-functions)

translate3d(x,y,z) 分别做x轴,y轴,z轴变换,

注意:translate(x, y),只能设置x轴,y轴


Q: :after , ::after和 :before , ::before 异同?

A: 相同:

:before和::before 等效; :after和::after 等效

不同:

:before 是 CSS2 写法,

::before 是 CSS3 写法

:before 兼容性 比 ::before 好,但在 H5 开发中建议 ::before

注意:

使用 before 设置对象前的内容 不会出现在DOM中,也就无法通过js操纵,仅仅是在CSS渲染层加入,after 同理

Q: :nth-child() 属于什么选择器?

A : 属于伪类选择器,

伪类选择器 描述的是元素的一种 状态,或者 虚拟的不存在的(:before),或者筛选

1
2
3
4
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

: 号若前面无空格,则伪类是对前面选中元素的描述

补充

参考