纯HTML＋CSS制作仿一号店首页

Hello World！最近已经完成了HTML+CSS的学习，作为一个菜鸟小白的我已经大概可以完成HTML+CSS的网站页面，然而这只是基础，后续要学习javascript才是进阶。在网络上有网友是这么比喻的，如果说把HTML比喻成一个女人（皮囊包裹骨骼的框架），那么CSS就是化妆品（使框架更好看），而javascript就是笑容（使框架更生动），所以现在要写一个HTML+CSS的仿一号店首页的网页，当然了这个仿的一号店网页是以前的一号店的，下图就是完成后的效果，只是简单的实现了页面和一些简单的动画效果。代码是使用webstrom编写的。

做这个网页可以分成好几个部分，下面分别介绍各个部分，首先是头部导航栏部分，下图为完成效果。

下图为鼠标移入“客户服务”出现下拉列表的完成效果（我给下拉列表框添加了边框阴影，请忽略我的审美，我只是给它加了这么一个效果）。

头部导航栏部分背景为一个向下的渐变色，文字和图片为可鼠标点击的超链接，头部右边部分为向右浮动效果，“客户服务”这里设置相对定位，让它的下拉列表设置绝对定位。

以下为头部导航栏HTML部分（因为是复制的关系，以下代码格式仅供参考）：

送货至：四川

你好！请登录

免费注册|

我的订单|

收藏夹

客户服务

包裹跟踪

创建问题

在线退换货

在线投诉

配送范围

网站导航

|

关注我们:

|

手机版

以下为头部导航栏CSS部分：

#top{

background:linear-gradient(#D1D1D1,#F5F5F5);

line-height:2.5em;

font-size:12px;

}

body,div,ul,li,a{

padding:px;

margin:px;

}

#topa{

color:#000;

text-decoration:none;

}

li{

list-style-type:none;

}

#top_rightli{

display:inline-block;

}

#top_left{

float:left;

width:50%;

}

#top_lefta{

margin-left:40px;

}

#top_right{

width:50%;

float:right;

}

#top_right>ul{

padding-left:380px;

}

#top_rightimg{

padding:0 2px0 2px;

}

.clear:after{

content:'';

display:block;

clear:both;

}

#top_right.registera{

color:red;

}

#top_right.service{

display:inline-block;

position:relative;

}

#top_right.top_menu2{

display:none;

position:absolute;

padding:5px5px;

min-width:80px;

background-color:#ccc;

}

#top.service:hover.top_menu2{

display:block;

box-shadow:0 5px5pxrgba(,,,0.1),0 0 10pxrgba(,,,0.2);

}

#top_right.top_menu2a:hover{

color:#F36F21;

}

#top #top_right.top_menu2ul{

line-height:25px;

}

#top_right.down_arrowimg{

padding-bottom:3px;

}

#top_right.phone_imgimg{

margin: -4px auto;

}

头部导航栏总结:头部导航栏困扰我的一个地方就是鼠标移入“客户服务”出现下拉列表效果，一开始鼠标移入就是没有显示下拉效果，我一直以为是hover之后写的类选择器、标签选择器的问题，在经历多次失败之后才知道是hover之前写的ID选择器、类选择器的问题，最后结果#top.service:hover.top_menu2{}

接下来是头部搜索框部分，下图为完成的效果：

以下为头部搜索框HTML部分。

搜索

咖啡

iphone 6S

新鲜美食

蛋糕

日用品

连衣裙

购物车

以下为头部搜索框CSS部分，

div,a,span,img,p{

margin:px;

padding:px;

}

a{

text-decoration:none;

}

.clear:after{

content:'';

display:block;

clear:both;

}

#searchList{

padding:20px;

}

#searchList.search_left{

float:left;

width:35%;

}

#searchList.search_leftimg{

padding-left:360px;

}

#searchList.search_right{

float:left;

width:65%;

margin:15px;

}

#searchList.search_right.search_right_search{

float:left;

}

#searchList.search_right.search_right_shopping{

margin-left:170px;

float:left;

/*box-shadow:#666666 1px 1px 1px;*/

border:1px solid#d7d7d7;

background-color:#F6F6F6;

padding:9pxpx9px;

width:130px;

height:20px;

line-height:20px;

text-align:center;

font-size:14px;

}

#searchList.search_right.search_right_shoppingimg{

margin:px20px-2px-21px;

}

.search_button{

font-size:16px;

width:80px;

border:none;

background-color:#ff4040;

line-height:30px;

color:#fff;

}

.search_box{

width:500px;

height:36px;

padding-left:15px;

line-height:36px;

border:none;

outline:none;

}

.search_right_search_top{

border-radius:2px;

background-color:#ff4040;

position:relative;

z-index:501;

padding:2px;

}

.search_right_search_bottom{

margin:4px;

padding:;

}

.search_right_search_bottoma{

padding:px5px;

}

头部搜索框部分总结：中间的搜索框样式参考了现在的一号店的搜索框，整体中规中矩，没有什么好说的。

以下为页面尾部相关部分完成后的效果。

以下为页面尾部HTML部分

正品保障

正品行货 放心购买

满38包邮

满38包邮 免运费

天天低价

天天低价 畅选无忧

准时送达

收货时间由你做主

新手上路

售后流程

购物流程

订购方式

隐私声明

推荐分享说明

配送与支付

货到付款区域

配送支付查询

支付方式说明

会员中心

资金管理

我的收藏

我的订单

服务保证

退换货原则

售后服务保证

产品质量保证

联系我们

网站故障报告

购物咨询

投诉与建议

扫一扫关注我们！

新浪微博

腾讯微博

服务热线：

400-123-4567

备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市

2007-2016,AllRights Reserved，复制必究，TechnicalSupport：Dgg Group

以下为页面底部CSS部分

.clear:after{

content:'';

display:block;

clear:both;

}

a{

text-decoration:none;

}

body,div,ul,li,p,img,span,dl,dt,dd{

padding:px;

margin:px;

}

#bottom_topli{

list-style-type:none;

float:left;

padding:0 92px;

}

#bottom_top{

width:1228px;

padding:40px;

height:120px;

margin:px auto;

}

#bottom_topul li img,p{

padding:0 25px;

}

#bottom_topul li span{

font-size:15px;

color:#bdbdbd;

}

#bottom_topul li img:hover{

transform:rotate(360deg)scale(1.2,1.2);

transition:width2s,height2s,transform2s;

}

.bottom_middle_left{

margin-left:230px;

height:160px;

float:left;

}

#bottom_middledl{

float:left;

margin-left:110px;

}

.bottom_middle_leftdt{

margin-bottom:20px;

}

.bottom_middle_leftdd a{

font-size:14px;

color:#888;

}

.bottom_middle_leftdt a:hover{

color:#BB131A;

}

.bottom_middle_leftdd a:hover{

color:#cccccc;

}

.bottom_middle_right_left{

float:left;

padding-left:110px;

}

.bottom_middle_right_leftspan{

font-size:16px;

font-family:华文行楷;

color:#888;

}

.bottom_middle_right_right{

float:left;

margin-left:20px;

}

.bottom_middle_right_right.otherLogo{

height:35px;

}

.bottom_middle_right_right.otherLogoa{

height:35px;

color:#888;

}

.bottom_middle_right_right.otherLogoimg{

margin-bottom: -7px;

}

.bottom_middle_right_rightspan:nth-of-type(1){

font-size:14px;

color:#888;

}

.bottom_middle_right_rightspan:nth-of-type(2){

font-size:20px;

color:#FF4E57;

}

#bottom_down{

color:#888;

border-top:1px solid#EAEAEA;

width:1300px;

margin:50px auto;

font-size:10px;

}

#bottom_down.bottom_down_fontp{

width:1000px;

margin:30px auto;

}

#bottom_down.bottom_down_img{

width:740px;

margin:auto;

}

#bottom_down.bottom_down_imgimg{

margin:0 10px;

box-shadow:#666666 1px1px2px,#cccccc-1px-1px2px;

}

页面底部总结：页面底部我有把它分为上中下三部分了，中间的“新手上路”部分用dl、dt、dd，最后导入的图片我是直接拖进来的，自动带宽和高，懒的删了。鼠标移入上边的“天天低价”那部分的图片有个CSS的过渡动画效果，鼠标移入时图片用3秒的时间旋转360度并且放大1.2倍。

以下是页面中间的主体内容部分完成的效果图。

以下为中间主体部分的HTML部分（因为文章最大内容长度限制50000字，所以就把中间这部分代码最多的地方截图了，因为是长截图，可能是截图软件问题吧，看着有点重影）：

下为中间主体内容的CSS部分：

中间主体内容部分说明：在主体内容的上面中间的大图是有一个焦点轮播图的效果，每隔一定的时间中间的图片就会自动切换一次，因为没有其它的可选图片，所以中间我用了三张一样的图片做的轮询效果，上面的效果图不是动态的，所以看不出来轮询的效果，可在网页中查看，详见代码。说一下轮询图的大概思路，也用图片说明（自己做的），详见下图。

轮询图的CSS部分代码用图片的形式再次看一下：

在轮询图的右边有一张”收益日结收益赚high“的图片，因为我用的谷歌浏览器装了”adblock“屏蔽广告的插件，所以要正常显示这张图片需要把这个插件暂时关闭，不然显示不了。

中间内容的1F进口生鲜、2F个人美妆、3F母婴玩具结构都是一样的，所以只要做好一个，然后复制替换里面的内容就可以做出来2F、3F了，这中间的图片有一个过渡动画效果，就是鼠标悬浮图片上的时候图片放大一点。

好了，最后就是把上面写的几部分都放在一起就可以展现出一张完整的页面了，需要注意的是，在写CSS样式的时候不要图省事直接写个标签名什么的，不然把全部的内容放在一起后就可能会受影响，个别的除外。其它的注意我不知道怎么写，就这样吧。