在学习了HTML和CSS以后，用俩天的时间仿写京东网站的部分界面，基本将之前学习的内容都应用到了，收货颇多，也对网站的布局有了更深的认识。

总结

整体的布局

在开始写网站之前，要考虑整体的布局，事先将每一块的内容框架搭建好，后期就可以将每一块的内容填充好，包括css的样式。这样思路就比较清晰，不至于后面越做越乱。

公共样式

针对一样的内容，可以设置相同的样式，在需要的时候可以直接引入，不需要重复敲css样式

命名，代码书写规范

命名要规范，提高代码的可读性。

图片

比如仿写淘宝，京东网站，我们可以去相应的矢量库找图标。
网上的图片可以下载下来，保存到同一个文件夹img中
雪碧图，事先把小图片切下来放在同一张页面,开发时就只需要把这张图片引入即可。然后再根据具体情况调整背景图片的位置,利用background-position这个属性可以设置。

京东网站的仿写

将整个网站按照功能分成多个部分进行总结

导航菜单的制作总结

首先要进行基本的样式清除： *{margin:0;padding:0}
用无序列表构建菜单，ul/li
定位问题，relation，absolute，static
float:left；制作水平菜单
列表圆点去除：list-style:none
下划线去除：text-decoration:none
文本垂直居中，line-height：~px；（与height的值相同）
文本水平居中，text-align: center;
需要将行标签设置为块元素，才能设高宽，hover效果，display:block，通过伪类hover，可以为菜单增加交互效果

HTML

<div class="top_title">
    <div class="title">
        <ul class="title_left">
            <li><i class="iconfont">&#xf0295;</i><a href="#">北京</a></li>
        </ul>
        <ul class="title_right">
            <li><a href="#">你好，请登录</a><a href="#" style="color: #dd0000;;">免费注册</a></li>
            <li class="v_line">|</li>
            <li><a href="#">我的订单</a></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">我的京东</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li><a href="#">京东会员</a></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">企业采购</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">客户服务</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li class="titlehover"><a href="#">网站导航</a><i class="iconfont ">&#xf02a9;</i></li>
            <li class="v_line">|</li>
            <li><a href="#">手机京东</a></li>
        </ul>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #F0F3EF;
}

.top_title {
    background-color: #E3E4E5;
}

.title {
    width: 1190px;
    height: 30px;
    margin: 0 auto;
    line-height: 30px;
}

.title_left {
    margin-left: 200px;
    float: left;
}

.title_left > li {
    border-left: 1px solid #E3E4E5;
    border-right: 1px solid #E3E4E5;
    list-style: none;
    font-size: 12px;
    color: #a3a3a3;
    padding: 0 7px;

}

.title_left > li > i {
    color: red;
    font-size: 12px;
    margin-right: 5px;
}

.title_left > li > a {
    color: #a3a3a3;
    text-decoration: none;
}

.title_left > li:hover {
    background-color: white;
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}

.title_right {
    float: right;
}

.title_right > li {
    float: left;
    margin-right: 0px;
    list-style: none;
    font-size: 12px;
    color: #a3a3a3;
}

.title_right > li > a {
    color: #a3a3a3;
    margin: 0 7px;
    text-decoration: none;
}

.title_right > li > i {
    margin-right: 10px;
    color: silver;

}

.titlehover {
    border-left: 1px solid #E3E4E5;
    border-right: 1px solid #E3E4E5;
    margin-left: 7px;
    margin-right: 7px;
}

.titlehover:hover {
    background-color: white;
    border-left: 1px solid silver;
    border-right: 1px solid silver;   /* 防止框框看起来变动*/
}

.title_right > li > a:hover {
    color: #dd0000;
}

.v_line {
    height: 10px;
}

商城分类导航的制作

有一篇博客就是写的这块内容，可以参考，总体的思路是一样的。

图片制作总结

添加图片使用img标签，首先要给图片一个父容器，然后设置父容器的样式，再将图片的样式设置成：

img{

      width:100%;

      height:100%;

}

矢量图标

要将矢量图标的文件放到css文件里，才可以直接引用。

先设置父容器的样式，再设置矢量图标的样式，可以加悬停。

HTML

<span class="camera">

        <i class="iconfont ">&#xf0092;</i>
</span>

CSS

.camera {
    position: absolute;
    width: 40px;
    height: 35px;
    right: 60px;
    top: 2px;
    line-height: 35px;
    text-align: center;
}

.camera > i {
    font-size: 25px;
    color: #808080;
}

.camera > i:hover {
    color: red;
}

图片阴影

box-shadow：5px 5px 25px silver；

水平阴影的位置，垂直阴影的位置，阴影的大小，阴影的颜色（学css3的时候在具体介绍）

圆点制作总结

主要用到border-radius属性，向元素添加圆角边框

border-radius：50%；     圆形

HTML

 <div class="rank_dian">

            <span class="spancolor"></span>
            <span></span>
  </div>

CSS

.rank_dian {
    text-align: center;
}

.rank_dian > span {
    display: inline-block;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid silver;
}

.spancolor {
    background-color: #f52728;
    border: 2px solid #f52728 !important; /*优先级*/
    box-shadow: 0px 0px 10px #ff4d2d;
}

HTML+CSS仿写京东网站界面

总结

京东网站的仿写

导航菜单的制作总结

商城分类导航的制作

图片制作总结

矢量图标

图片阴影

圆点制作总结

猜你喜欢