梅兰商场

来源：互联网发布：js实现烟花效果编辑：程序博客网时间：2024/04/27 15:42

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;}

运行效果：

0 0