电子商务H5学习小结——div+css创建电子商务静态网页

一体化~平遥

应用Sublime Text软件编制电子商务类网站静态形式首页

         我们确实会特别绝望?观测目前式,介休真的拖后腿了。

   经过多一致礼拜的学,基本掌握了div+css的用法之后,开始了实战练兵。首先使召开的即使是若练一下形似电子商务网页的编辑,我开的是生图效果的网页,是一个关于台湾特产之网页。如图:

电子商务 1

   
 拿到图片后,首先要分析一下方方面面网页的结构,上图所显示之网页稍微分析一下就可以看出切实分为四独片,为头header,中间的广告ad_img,中间的着重点内容main和底部的footer,当然具体的尚得分成多部分,这里关键看个人的惯,所以当当时就算不一一写出来了,具体的见面以后面的代码有显得下。

   
 个人感觉写代码不怎么难,主要是您开一个网页的时刻用的不二法门以及笔触,思路对的语你的进度会大大的增加,这里我可吃了好多之训,由于急于完成这路,我就是思考了瞬间现实的布局就开始勾画代码了,闷头苦写了一半龙之后,突然意识跟要求那正是相差十万八千里,于是又起埋头苦改,改了大体上龙也尚无改出要求的那种效果。多亏了一如既往位大神的点,他说当拿到花色事后不要急着去做,而是如分析一下现实的布局与思路,把大概的大概做下,然后再度同步一步的刻画。还算,第二任何重复做的时光,速度大大的加快,不顶同样碰头就拿这网页做出来了,收获甚多之,以后继续加油。!下面为切实的代码有,网页的各种材料可以错过自己的百度网盘下载:网页资料下载

css样式部分    
*{margin:0px;padding: 0px;
    }
    html,body{font-family: "微软雅黑";
    font-size: 14px;
    text-decoration: none;
}
    .all{
        width: 100%;
        min-width: 1000px;
    }
    .header{
        width: 100%;
        border-bottom: 4px solid #176fbb;
    }
    .header .head{
        width: 1000px;
        margin:0 auto;
        overflow: hidden;
    }
    .head #logo{
        width: 140px;
        height: 113px;
        float: left;
        background:url(images/logo.png) 8px 14px no-repeat;
    }
    .head #indexlogo{
        width: 21px;
        height: 21px;
        float: left;
        margin-left: 56px;
        margin-top: 83px;
        background-image: url(images/indexlogo.png);
    }
    .head #phone{
        width: 141px;
        height: 22px;
        float: left;
        margin-left: 196px;
        margin-top: 19px;
        background-image: url(images/telephone.png);
    }
    .head_nav{
        float: left;
        height: 19px;
        list-style: none;
        margin-top: 20px;
        margin-left: 14px;
    }

    .head .head_nav a{
        color: #3d3d3d;
        line-height: 19px;
        text-align: center;
        text-decoration: none;
    }
    .head_nav li{
        border-left:2px solid black;
        float: left;
        padding:0 15px;
    }
    .head_nav .li3{
        padding: 0 14px 0 0;
    }
    .head_nav .li3 img{
        float: left;
        margin-left: 15px;
        margin-top: -5px;
    }
    .head_nav .li3 a{
        float: left;
        margin-left: 7px;
    }
    .head_nav .li3 span{
        font-size: 12px;
        color:white;
        float: left;
        line-height: 19px;
        margin-left: -19px;
    }

    .head .search{
        float: left;
        border:1px solid black;
        width: 181px;
        height: 27px;
        margin-top: 16px;
        border-radius: 0px 14px 14px 0px;
    }
    .head .search img{
        float: right;
        margin-top: 4px;
        margin-right: 10px;
    }
    .head .search .input1{
        width: 146px;height: 27px;outline: 0;
        border:0;border-right: 1px solid black;
    }
    .headmenu{
        font-weight: bold;
        margin-top: 42px;
        margin-left: 38px;
        height:30px;
        list-style: none;
        float: left;
    }
    .headmenu li{
        float: left;
        margin-right: 37px;
        height:21px;

    }
    .headmenu li a{
        font-size: 18px;
        line-height: 21px;
        color: #3d3d3d;
        text-decoration: none;
    }
    .headmenu li a:hover{
        font-size: 18px;
        display: block;
        line-height: 21px;
        color: rgb(23,111,187);
    }
    .adress{
        height: 53px;
        width: 1000px;
        margin:0 auto;
    }
    .adress .adress1{
        width: 152px;
        height: 53px;
        text-align: center;
        line-height: 53px;
        float: left;
    }
    .adress .adress1 a{
        color: #3d3d3d;
        text-decoration: none;
    }
    .adress .adress1 a:hover{
        color: blue;
        text-decoration: none;

    }
    .image{
        width: 100%;
        height: 350px;
        background: url(images/ad.png) center center no-repeat;
    }
    .gift_img{
        width: 1000px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        height: 68px;
    }
    .gift_img .img{
        width: 155px;
        height: 38px;
        margin-top: 30px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0px;
    }
    .main{
        width: 1000px;
        height: 619px;
        margin:0px auto;
        border-bottom: 1px solid #898989;
    }
    .main #main1,.main #main2,.main #main3,.main #main4,.main #main5,.main #main6{
        background-color:rgb(242,241,241);
        width: 485px;
        height: 160px;

    }
    .main #main1,.main #main3,.main #main5{
        float: left;
    }
    .main #main2,.main #main4,.main #main6{
        float: right;
    }
    .main #main3,.main #main4,.main #main5,.main #main6{
        margin-top: 30px;
    }
    .main .text{
        width: 198px;
        color: #3d3d3d;
        float: right;
        margin-top: 27px;
        margin-right: 30px;
    }
    .main .text .span1{
        font-weight: bold;
        width: 198px;
        font-size: 16px;
        line-height: 16px;
        color: #3d3d3d;
        display: block;
    }
    .main .text .span2{
/*        font-weight: bold;*/
        width: 198px;
        font-size: 14px;
        line-height: 14px;
        color: #3d3d3d;
        display: block;
        margin-top: 17px;
    }
    .main .text .span3{
        width: 58px;
        font-size: 14px;
        line-height: 12px;
        color: #3d3d3d;
        margin-top: 35px;
        float: left;
    }
     .main .text .span4{
        width: 58px;
        font-size: 12px;
        line-height: 12px;
        color: #3d3d3d;
        margin-left: 30px;
        margin-top: 35px;
        float: left;
    }
        .main .text .span3 a{
        width: 16px;
        font-size: 12px;
        line-height: 12px;
        float: left;
        margin-top: -2px;
    }
     .main .text .span4 a{
        width: 16px;
        font-size: 12px;
        line-height: 12px;
        float: left;
        margin-top: -2px;
    }

    .main .number{
        width: 1000px;
        height: 73px;
        float: left;

    }
    .main .number ul{
        list-style: none;
        margin-left: 371px;
        margin-top:30px; 
        width: 280px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
    }
    .main .number ul .li1{
        float: left;
        margin-right: 14px;
    }
    .main .number ul .li2,.main .number ul .li6{
        float: left;
        margin-right: 8px;
        font-size: 12.13px;
    }   
    .main .number ul .li3{
        float: left;
        margin-right: 8px;
    }
    .main .number ul .li4{
        float: left;
        margin-right: 11px;
        font-size: 12.13px;
    }
    .main .number ul .li5{
        float: left;
        margin-right: 11px;
        background-color: #666666;
        width: 30px;
        height: 20px;
        color: white;
    }
    .main .number ul .li7{
        float: left;
        margin-right: 10px;
    }
    .main .number ul .li8{
        float: left;
        margin-right: 12px;
        font-size: 12.13px;
    }
    .main .number ul .li9{
        float: left;
        margin-right: 0px;
    }
    .footer{
        margin-top: 30px;
        width: 100%;
        border-bottom: 1px solid #fff;
        background: #023c4d;
    }
    .footer .con{
        height: 178px;
        width: 1000px;
        margin: 0 auto;
    }

    .footer .con .ul1{
        width: 75px;
        float: left;
        margin-left: 102px;
        margin-top: 22px;
    }
    .footer .con .ul2,.footer .con .ul3,.footer .con .ul4{
        width: 75px;
        float: left;
        margin-left: 78px;
        margin-top: 22px;
    }
    .footer .ul1 ul,.footer .ul2 ul,.footer .ul3 ul,.footer .ul4 ul{
        width: 75px;
        color: white;
        list-style: none;
    }

    .footer  .ul1 ul li,.footer  .ul2 ul li,.footer .ul3 ul li{
        font-size: 14px;
        margin-top: 15px;
        line-height: 14px;
    }

    .footer  .ul1 ul .li1,.footer  .ul2 ul .li1,.footer .ul3 ul .li1,.footer .ul4 ul .li1{
        font-size: 18px;
        margin-top: 0px;
        line-height: 18px;
    }
    .footer .ul4 ul li{

        margin-top: 18px;
    }
    .footer .con .ul5{
        width: 172px;
        margin-left: 95px;
        margin-top: 22px;
        float: left;
    }
    .footer .con .ul5 ul{
        width: 172px;
        list-style: none;
        color: rgb(255,255,255);
    }
    .footer .con .ul5 .li1{
        font-size: 28px; 
        line-height: 28px;   
        font-weight: bold;
    }
    .footer .con .ul5 .li2{
        font-size: 18px; 
        line-height: 18px; 
        margin-top: 15px;
        letter-spacing: 5px;
    }
    .footer .con .ul5 .li3{
        font-size: 18px; 
        line-height: 18px; 
        margin-top: 12px;
    }
    .footer .con .ul5 .li4{
        margin-top: 22px;
        height: 23px;
    }
    .footer_copy{
        width: 100%;
        background: #023c4d;
    }
    .copy{
        margin:0 auto;
        width: 1000px;
        height: 57px;
        text-align: center;
        line-height: 57px;
        color: #d0d0d0;
    }




html主体部分
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伴手礼</title>
    <link rel="stylesheet" href="css.css" type="text/css"/>
</head>
<body>
<div class="all">
  <div class="header">
    <div class="head">
        <div id="logo"></div>
        <div id="indexlogo"></div>
        <div id="phone"></div>
        <!-- 登录注册 -->
        <ul class="head_nav">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
            <li class="li3"><img src="images/paggage.png" alt="pag">12<a href="#">行李箱</a></li>                           
        </ul>
        <div class="search">
            <input class="input1" type="text" name="" value="">
            <a href="###"><img src="images/serch.png"></a>
        </div>
        <!-- 菜单 -->
        <ul class="headmenu">
            <li><a href="#" target="_blank">第一次</a></li>
            <li><a href="#" target="_blank">目的地</a></li>
            <li><a href="#" target="_blank">自定行程</a></li>
            <li><a href="#" target="_blank">游记</a></li>
            <li><a href="#" target="_blank">特产</a></li>
            <li><a href="#" target="_blank">优惠</a></li>
            <li><a href="#" target="_blank">环岛巴士</a></li>
        </ul>
    </div>
  </div>
        <!-- 所在地址 -->
    <div class="adress">
        <p class="adress1"><a href="###">首页</a> > <a href="###">特产</a> > <a href="###">伴手礼</a></p>
    </div>
        <!-- 广告图 -->
    <div class="image"></div>
        <!-- 伴手礼logo -->
    <div class="gift_img">
       <div class="img"><a href=""><img src="images/gift.png" alt="gift"></a></div>
    </div>
        <!-- 主要内容 -->
    <div class="main">
        <div id="main1">
            <a href="#"><img src="images/photo1.png" alt="photo1"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main2">
            <a href="#"><img src="images/photo2.png" alt="photo2"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main3">
            <a href="#"><img src="images/photo3.png" alt="photo3"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main4">
            <a href="#"><img src="images/photo4.png" alt="photo4"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main5">
            <a href="#"><img src="images/photo1.png" alt="photo5"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <div id="main6">
            <a href="#"><img src="images/photo1.png" alt="photo6"></a>
            <div class="text">
                浓香的奶味和果仁的牛轧糖
                好吃不粘牙,而且越嚼越香,而且是不含香料和色素...
                <a href="###"><img src="images/xin.png" alt="xin"></a>  1168
                <a href="###"><img src="images/chat.png" alt="chat"></a>  1168
            </div>
        </div>
        <!-- 所在页数 -->
        <div class="number">
            <ul >
                <li class="li1">上一页</li>
                <li class="li2">1</li>
                <li class="li3">.....</li>
                <li class="li4">12</li>
                <li class="li5">13</li>
                <li class="li6">14</li>
                <li class="li7">.....</li>
                <li class="li8">40</li>
                <li class="li9">下一页</li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="con">
            <div class="ul1">
                <ul>
                    <li class="li1">关于遛湾</a></li>
                    <li>公司简介</li>
                    <li>联系我们</li>
                    <li>诚聘英才</li>
                    <li>网站地图</li>
                </ul>
            </div>
            <div class="ul2">
                <ul>
                    <li class="li1">帮助中心</li>
                    <li>赴台属性</li>
                    <li>联系我们</li>
                    <li>遛湾玩法</li>
                    <li>常见问题</li>
                </ul>
            </div>
            <div class="ul3">
                <ul>
                    <li class="li1">网站条款</li>
                    <li>服务条款</li>
                    <li>免责声明</li>
                </ul>
            </div>
            <div class="ul4">
                <ul>
                    <li class="li1">网站条款</li>
                    <li><a href="#"><img src="images/weichat.png" alt="weichat"></a></li>
                </ul>
            </div>
            <div class="ul5">
                <ul>
                    <li class="li1">400 820 8820</li>
                    <li class="li2">周一至周日</li>
                    <li class="li3">9:00~20:00</li>
                    <li class="li4"><a href="#"><img src="images/ask.png" alt="ask"></a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer_copy">
        <div class="copy">Copyright &copy; 2013-2014 www.6waner.cn All Right Reserved. 京ICP备11</div>
    </div>
</div>
</body>
</html>

     

       
忘记那是12尚是13年,滑雪场刚开头,许多人数犹怀有滑雪梦!大家都组团去,体验和感受滑雪的意,如今,他的滑雪都形成相同种品牌,许多丁说打滑雪,都见面想到灵石!而密切的介休。你见面被咱回顾什么?

电子商务 2

     
“清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村”想起就首诗,我们虽记起杏花村之酒,汾阳,汾酒的发源地,清香型白酒的聚集地,全国百分之九十的清香型白酒来汾阳。

电子商务 3

     
2016,介休真的会大干净。答案是:真的!如果介休政府还免呢百姓着想。还以吗后人的那么点资源去施救介休,那么,完蛋了!介休会惨下去,会饿死人。

         
 平介孝汾灵五个都市一体化,平遥,介休,孝义,汾阳,灵石,貌似拖后腿的,就是几度介休了。一年,跑遍了及时五个地方,也有幸去太谷出席了晋中乡青年电子商务培训,参观了太谷众多号,才发现,介休能吃咱具备的,现在且瘫痪或是逐级转型,转型之时曾杀晚了。

     
 大介休~三贤乡,慈孝之都,琉璃之乡,寒食发源地。记得初中高中时期,介休举办清明寒食文化节,后来,直到今天,这个节貌似没了…记得那么时候出来还说,知道清明节复苏三龙怎么来了邪?许多人非上马口,只有自己得意的游说。那是因我们有限天,我们介休绵山凡是晴寒食节的源。

图形发简书A

一体化~汾阳

        这些微型的转型跨越,就是于当下座城增添经济,减少失业人数。

     
孝义的滑雪滑草,虽然说滑雪场没有其余地方的万分,豪华,但是滑草是外的一样分外特点!许多丁开车慕名前往滑草场地,来体验一番乐趣。

     
如今,介休的绵山。许多旅游者不得不去灵石高速,去划一看到绵山仙境。许多广大之资源,流向了异地。

一体化~灵石

     
 如今底孝义,会起相同很波的子弟开车前失去花,城市的红火与美味,吸引了成百上千底主顾。其实,许多美食还是省城的连锁店,分店。难道在介休不见面生气?

电子商务 4

                        汪沟小子

     
 孝义,重工业城市。大家都明白梧桐工业园区的厂多,但是孝义新城,确实漂亮,孝义市区,确实繁华,水上乐园,打破常规!这虽是就所年轻的工业城市,他和介休,是弟兄县购进。

电子商务 5

       
汾阳,有烧酒,有酿文化,有酒的历史!他要么核桃基地!有核桃交易为主。并且第七暨世界核桃大会,就在汾阳举办。。他具备丰富的出产资源,有些长学识历史,一直以上扬。汾阳人数通过协调的品牌,远销海内外,并得到高的评价暨赞誉。

一体化~大介休

       
 最近几乎年盖的明清同等长长的场,后土庙,城隍庙,博物馆!都专门之鬼斧神工,大气!可是真正符合驻盈利的而发生略??每次都在听明清平修街的丁吐槽,今天呢同某朋友肯定,原来真的那么地方并未供暖设施。难道政府只是以建好,做表面的脸面工程?

电子商务 6

     
 室内的水上乐园,炒作好之泛,广告很之周到,从晋南交晋北,从电视及网,都是水上乐园的音讯,然而赢得了今年春节期间的人声涌动,许多人没事的良场所。

       
上篇,其实是吐槽了吐槽介休没有年的氛围,只能为我们外出外地,寻找过年的鼻息,让咱的后人了解中国年之知识,我们介休没有就,我们只好想法设法的去体会,去感受,去伸张,去继承!

不知怎么去开,难道真的要我们到底下去。以后的里程,我们各个一个人,该如何错过动。失业?降薪?停薪?拖欠?外出?打工?饥饿?养老?医疗?教育?……许多题材还见面烦着咱每个人。

       这尚非使未是举行。伤了财!伤了民心!

     
 许多地方并未文化,去挖文化!而我们,有友好寒食节的学问品牌,有清明节的休假,不去下以及传承,到本众多人数誉为不了解介休这个地方!造成了介休许多庄拖欠工资,许多苍生失业。

        还有前几乎年特别生气之青云机场。如今也是安静,没有了延续的上扬!

     
说打平遥,我们不仅熟悉,全国各地及世界都清楚,古城平遥,他敢于说第二,没人失去哪第一。这虽是外的身价。而异连不曾因古城如果洋洋得意,国际摄影展,平遥华夏年景,又表现平遥,今年之冰雕展,他每年还当成人,每年都以出以及扒新的事物来诱惑游客,不是于你错过下就未了了的的地方,而是被你一样去又复返的向往之地!他的升华,带动了平遥同等批又平等批判的青年,去创业。去就业,他莫停歇,他不曾拿资源去骄傲。

                      2016.2.11  23时

一体化~孝义

      2016,建议当局,回头想想百姓。为萌谋更要命的活资源。

 

   
 灵石王家,华夏建筑的宝贝。然而灵石,不仅围绕王家大院继续上扬,还相继开发出石膏山,红崖山格外山里等多的风景区。围绕王家,发展王家,宣传王家,再王家大院后建筑起了迪士尼科技馆,里面的新奇汪沟领略了一番,确实值得中小学生前失去参观学习,让咱们询问科技带来被的乐趣,红崖山颇山里滑雪场,也是过剩朋友每年慕名而失去之地方。

                   今天就算说交立刻吧!

Leave a Comment.