梅兰商场

最新推荐文章于 2017-02-06 21:06:12 发布

落花新月

最新推荐文章于 2017-02-06 21:06:12 发布

阅读量3.3k

点赞数 1

分类专栏： Web前端文章标签： HTML CSS 前端案例梅兰商城电子商务站点

本文链接：https://blog.csdn.net/luohuaxinyue/article/details/51100890

版权

Web前端专栏收录该内容

68 篇文章 1 订阅

订阅专栏

1.CSS初始化（CSS reset）

2.CSS代码压缩（也就是去掉空格，折行显示），会提高性能。

3.精灵图的好处：减少用户的请求次数，减轻服务器的压力。

2.精灵图的制作注意事项：

1）最好是小图片，并且是不会发生变化的。
2）制作的时候，宽度一定要大于最大的那张图片
3）图片之间要有空隙
4）最下面一定要留出位置，为了以后的扩展和补充。

3.精灵图制作过程：
图片切片导出——》新建透明画布——》导入之前导出的图片摆放到透明画布上

精灵图一般结合background一起使用

4.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页index</title>
    <link rel="stylesheet" href="css/cssReset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
<!--顶部的开始-->
<div class="top">
    <div class="topBox">
        <div class="topLeft fleft">您好！欢迎您的来访！</div>
        <div class="topRight fright">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">我的业务</a></li>
                <li><a href="#">收藏</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">客服</a></li>
                <li><a href="#">网站导航</a></li>
            </ul>
        </div>
    </div>
</div>
<!--顶部的结束-->

<!--logo的开始-->
<div class="logo">
    <h1 class="logo_l">梅兰商贸</h1>      <!--添加内容的目的是提高搜索引擎的优化-->
    <div class="logo_r">
        <div class="box">
            <!--用fleft来解决输入框和按钮之间的距离-->
        <input type="text" class="logo_r_search fleft" placeholder="请输入搜素内容">
        <input type="button" value="搜索" class="logo_r_btn fleft">
        </div>
    </div>
</div>
<!--导航的开始-->
  <div class="nav">
      <!--ul>(li>a[href="#"])*4+Tab键输出下面内容-->
      <ul>
          <li class="current"><a href="#">天猫</a></li>
          <li><a href="#">聚划算</a></li>
          <li><a href="#">天猫超市</a></li>
          <li><a href="#">工艺美术品</a></li>
      </ul>
  </div>
<!--导航的结束-->

<!--banner的开始-->
  <div class="banner">
      <div class="subNav fleft">
          <h2>工业商场</h2>
          <ul>
              <li><s></s><a href="#">红楼梦</a></li>
              <li><s></s><a href="#">水浒传</a></li>
              <li><s></s><a href="#">西游记</a></li>
              <li><s></s><a href="#">三国演义</a></li>
              <li><s></s><a href="#">双城记</a></li>
              <li><s></s><a href="#">生活在别处</a></li>
              <!--<li><s></s><a href="#">天才在左</a></li>-->
          </ul>
      </div>
      <div class="ad fleft"></div>
      <div class="contact fright"></div>
  </div>

<!--banner的结束-->

</body>
</html>

cssrest.css

@charset "utf-8";

/*CSS的初始化*/
html{
    color:#000;
    background:#FFF;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin:0;
    padding:0;
    border:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
a{
    text-decoration: none;
}
em,
strong,
b,
u,
i {
    font-style:normal;
    font-weight:normal;
}
/*清除列表样式*/
ol,
ul,li {
    list-style:none;
}
h1,
h2,
h3{
    font-size:100%;
    font-weight:normal;
}
input,
textarea,
select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    *font-size:100%; /*to enable resizing for IE*/
}
img{
    border:0 none;
}
input{
    border:none;
}

index.css

@charset "UTF-8";
html{
    font:12px '宋体';
}
.top{
    height: 26px;
    background-color: #f7f7f7;
    border:1px solid #D8D8D8;

}
.topBox{
    width: 970px;
    height: 26px;
    margin:0 auto;
    /*background:blue;*/
}
.topLeft{
    line-height: 26px;
}
.topRight{
    line-height: 26px;
}
.topRight ul li{
    float: left;
    padding-right: 20px;
}
.topRight ul li a{
    color: #000;
}
.logo{
    width: 970px;
    height: 98px;
    margin:0 auto;
}
.logo_l{
    width: 200px;
    height: 58px;
    background: url("../images/logo.jpg") no-repeat;
    float:left;
    margin:10px 0 19px 9px;
    text-indent: -1000px;  /*让文字不能显示出来，但是搜素引擎是可以搜索到的*/
}
.logo_r{
    width: 530px;
    height: 42px;
    float: right;
    border: 1px solid #c9c9c9;
    margin-top:29px;
}
.logo_r .logo_r_search{
    width: 420px;
    height: 30px;
    border:1px solid #c9c9c9;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 30px;
    padding-left: 5px;
}
.logo_r .logo_r_btn{
    width: 99px;
    height: 30px;
    background-color: #2aabd2;
}
.logo_r .box{
    margin:5px 5px 5px 4px;
}
.nav{
    width: 970px;
    height: 25px;
    margin:0 auto;
    border-bottom: 2px solid #0266a3;
}
.nav ul li{
    float: left;
    padding: 0 15px;
    line-height:25px;
    font-size: 14px;
    font-weight: bold;
}
.nav ul .current{
    background-color: #2e51ff;
}
.nav ul li:hover{
    background-color: #2e51ff;
}
.nav li:hover a{
    color: white;
}
.banner{
    width: 970px;
    height: 210px;
    margin:0 auto;
    margin-top: 10px;
}
.banner .subNav{
    width: 200px;
    height: 210px;
    /*background-color: yellow;*/
    margin-right: 10px;
}
.banner .subNav h2{
    height: 30px;
    line-height: 30px;
    background-color: #1b6d85;
    color: white;
    font-weight: bold;
    font-size: 14px;
    padding-left: 20px;
}
.banner .subNav s{
    display: inline-block;          /*行内元素转换成行内块*/
    width: 18px;
    height: 14px;
    background: url("../images/spirit.png") 0 -58px;   /*精灵图的使用*/
    vertical-align: middle;       /*图标居中*/
    padding-right:10px;
}
.banner .subNav li{
    font-size: 15px;
    margin-left: 10px;
    padding-top: 10px;
}
.banner .subNav ul{
    background-color: #EBF0F6;
    height: 180px;
}
.banner .subNav li a{
    height: 14px;
    line-height: 14px;
    text-align: center;
}
.banner .ad{
    width: 520px;
    height: 210px;
    background-color: red;
}
.banner .contact{
    width: 230px;
    height: 210px;
    background-color: blue;
}