0
点赞
收藏
分享

微信扫一扫

HTML+CSS+PS 编写京东商城首页

三次方 2022-07-27 阅读 84


仅供学习,转载请注明出处





HTML+CSS+PS 编写京东商城首页_css


需求

前面铺垫写了不少HTML、CSS、Photoshop的文章,那么本篇章就是要结合起来挑战写写京东的商城首页了。




HTML+CSS+PS 编写京东商城首页_html_02


好了,本次的目标就是实现这样的大概页面,让我们一步步来开始编写。

文档结构

首页创建好本次编写的文件结构,如下:




HTML+CSS+PS 编写京东商城首页_ico_03


好了,文件夹目录都准备好了,那么先按照从上到下,从左到右的原则一步步开始编写吧。

编写头部横栏部分




HTML+CSS+PS 编写京东商城首页_ico_04


要编写这部分,首先就需要准备相关的图片,这里我就不一步步说怎么使用photoshop切图部分了。

如果不太熟悉的朋友,可以访问我之前写的​​photoshop 切图技巧​​。

准备好横栏所需的图标

我将图标制作成了雪碧图,如下:




HTML+CSS+PS 编写京东商城首页_css_05


好了,有了这个雪碧图就可以开始动手了。

编写横栏部分代码

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/font_1056598_n3wpz4pry7/iconfont.css">
</head>
<body>
<!-- 横栏 -->
<div class="header01">
<div class="location">北京</div>
<div class="hello"><a href="#">你好,请登录</a></div>
<!-- ul.menu>(li>a.a${免费注册})*8 -->
<ul class="menu">
<li><a href="" class="a1">免费注册</a></li>
<li><a href="" class="a2">我的订单</a></li>
<li>
<a href="" class="a3">
我的京东
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li><a href="" class="a4">京东会员</a></li>
<li>
<a href="" class="a5">
企业采购
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li>
<a href="" class="a6">
客户服务
<span class="iconfont icon-xiajiantou"></span>
</a>
</li>
<li><a href="" class="a7">网站导航</a></li>
<li><a href="" class="a8">手机京东</a></li>
</ul>
</div>
</body>
</html>

CSS代码:

* {
margin: 0;
padding: 0;
}

.header01{
height: 38px;
background-color: #e3e4e5;
}

.location{
position: absolute;
width: 61px;
height: 38px;
line-height: 38px;
left: 466px;
background-image: url(../images/icons.png);
background-position: left -138px;
text-indent: 20px;
font-size: 13px;
font-family: "Microsoft YaHei";
color: #999;
cursor: pointer;
}

.hello{
position: absolute;
width: 85px;
height: 38px;
left: 795px;
line-height: 38px;
}

.hello a{
font-size: 13px;
font-family: "Microsoft YaHei";
text-decoration: none;
color: #999;
}

.menu{
position: absolute;
height: 38px;
left: 892px;
overflow: hidden;
}

.menu li{
display: inline-block;
}

.menu li a{
position: relative;
left: -1px;
line-height: 38px;
font-size: 13px;
font-family: "Microsoft YaHei";
text-decoration: none;
color: #999;
border-left: 1px solid #999;
padding: 0 5px;
padding-left: 8px;
}


.menu li a:hover{
color: red;
}

.menu li span{
position: relative;
left: -4px;
top: 3px;
}

浏览器显示如下:




HTML+CSS+PS 编写京东商城首页_html_06


其中菜单里面的下箭头我才用的阿里巴巴矢量图标,如果不清楚如何使用,可以点击​​iconfont阿里巴巴矢量图标库从注册到使用​​访问。



HTML+CSS+PS 编写京东商城首页_ico_07


好了,下面再来编写下一部分。

编写京东图标




HTML+CSS+PS 编写京东商城首页_css_08


准备好京东图标




HTML+CSS+PS 编写京东商城首页_ico_09


编写HTML以及CSS

可以从图标显示来看,图标可以使用绝对定位来解决。

首先写一个div来显示看看,如下:




HTML+CSS+PS 编写京东商城首页_ico_10


浏览器显示如下:




HTML+CSS+PS 编写京东商城首页_html_11


设置背景颜色以及图标的颜色,查看如下:




HTML+CSS+PS 编写京东商城首页_css_12


设置body的背景颜色,代码如下:




HTML+CSS+PS 编写京东商城首页_ico_13


再设置图标的背景颜色,代码如下:





HTML+CSS+PS 编写京东商城首页_ico_14


浏览器显示,如下:




HTML+CSS+PS 编写京东商城首页_html_15


下面将京东的logo设置背景图片,如下:




HTML+CSS+PS 编写京东商城首页_html_16


浏览器显示如下:




HTML+CSS+PS 编写京东商城首页_ico_17


好了,下面继续下一部分,如下:




HTML+CSS+PS 编写京东商城首页_ico_18


编写搜索栏目

这里面的图标可以到阿里巴巴的矢量图库中找一下看看。

准备图标




HTML+CSS+PS 编写京东商城首页_css_19




HTML+CSS+PS 编写京东商城首页_ico_20




HTML+CSS+PS 编写京东商城首页_ico_21




HTML+CSS+PS 编写京东商城首页_css_22


编写HTML以及CSS

编写优化input部分,详情访问​​CSS Input 样式美化​​,代码如下:




HTML+CSS+PS 编写京东商城首页_html_23


浏览器展示如下:




HTML+CSS+PS 编写京东商城首页_css_24


开始写图标以及右边放大镜部分,如下:




HTML+CSS+PS 编写京东商城首页_html_25


浏览器展示如下:




HTML+CSS+PS 编写京东商城首页_ico_26


编写搜索框下的推荐栏目




HTML+CSS+PS 编写京东商城首页_html_27


简单看看,这里可以使用​​ul>li>a​​​来编写,然后调整一下大小以及字体样式即可。
要注意布局的方式不使用​​​float:left;​​​浮动布局,最好就是绝对定位,方便进行居中定位。
而如果使用绝对定位,那么就是需要设置​​​display:inline-block;​​行内块的方式来进行布局。




HTML+CSS+PS 编写京东商城首页_ico_28


浏览器展示如下:




HTML+CSS+PS 编写京东商城首页_css_29


编写购物车部分




HTML+CSS+PS 编写京东商城首页_css_30


准备图标




HTML+CSS+PS 编写京东商城首页_css_31




HTML+CSS+PS 编写京东商城首页_html_32




HTML+CSS+PS 编写京东商城首页_html_33




HTML+CSS+PS 编写京东商城首页_ico_34


好了,准备好了购物车的图标,下面就继续来写HTML + CSS部分。

编写 HTML + CSS




HTML+CSS+PS 编写京东商城首页_css_35


浏览器演示如下:




HTML+CSS+PS 编写京东商城首页_ico_36


编写搜索框下的菜单栏目




HTML+CSS+PS 编写京东商城首页_css_37


这部分基本跟上面的推荐菜单的写法一致,可以使用​​ul>li>a​​加上绝对定位来完成。

编写HTML + CSS




HTML+CSS+PS 编写京东商城首页_css_38


浏览器展示如下:




HTML+CSS+PS 编写京东商城首页_html_39


好了,上面的部分基本写好了。那么继续。

左边细分类别列表




HTML+CSS+PS 编写京东商城首页_ico_40


思路:编写一个​​ul>li>a​​​即可,然后用绝对定时进行布局。其实这里面的每一行也是一个小菜单栏目,需要增加不同数量的​​a​​​链接,设置​​bord-left:1px solid #ccc​​即可,先简化实现一个先。

编写HTML + CSS




HTML+CSS+PS 编写京东商城首页_html_41


浏览器展示如下:




HTML+CSS+PS 编写京东商城首页_html_42


编写中间幻灯片部分




HTML+CSS+PS 编写京东商城首页_ico_43


幻灯片的话单纯HTML + CSS 只能展示出一张图片的,需要后面加上js代码,写动画效果才是完整的。

编写 HTML + CSS

做幻灯片这里要讲一下技巧,先看看效果。




HTML+CSS+PS 编写京东商城首页_css_44


这里面其实中间有一个div嵌套一个宽度很大的ul,然后给li设置float:left来处理的。最后通过绝对定位的ul的left参数改变来实现移动效果。




HTML+CSS+PS 编写京东商城首页_ico_45


好了,大概的布局以及实现还需要自己多动手实践一下。

总结

其实在整体页面编写的过程,我是应该先用div给页面每个位置进行分大块,然后在每个大块中继续写内部的元素。
这个我在代码编写后期修改了,没在这篇中体现出来。不过本篇章也讲述了一个大概的实现过程。

较好的布局思路:
从上到下,从左到右,使用div设定好宽度、高度、背景色,基于文档流进行布局,不要一上来就使用绝对定位这种方式。

微信公众号

HTML+CSS+PS 编写京东商城首页_html_46

HTML+CSS+PS 编写京东商城首页_css_47


举报

相关推荐

HTML+CSS实现淘宝首页

京东首页布局项目

HTML+CSS实现纽曼门户首页

0 条评论