zoukankan      html  css  js  c++  java
  • html/css静态网页制作

    任务要求:

     

    简单对网页进行分割布局,基本思路上中下三部分,然后在每一部分细分

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <link href="qiyecss/qiye.css" type="text/css" rel="stylesheet">
    </head>
    
    <body>
    <div id="body">
      <div id="top">
        <div class="logo"></div>
        <div class="search">搜索产品
          <input class="text" type="text" name="" value="" >
          <input class="button" type="button" name="" value="">
        </div>
      </div>
      <div id="back_top">
        <div class="back_a"></div>
        <div class="back_b"></div>
        <div class="back_one">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#"><span >企业新闻</span></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>
            <li><a href="#">联系我们</a></li>
          </ul>
        </div>
        <!--<div style="clear: both"></div>-->
        <div class="back_two">
          <ul>
            <li><a herf="#">企业动态</a></li>
            <li><a herf="#">领导产品</a></li>
            <li><a herf="#">产品咨询</a></li>
            <li><a herf="#">通知公告</a></li>
          </ul>
        </div>
      </div>
      <div id="content_top">
        <div class="content_left">
            <div clss="sign_she"><img src="images/pic.jpg" alt=""></div>
          <div class="sign_shang"></div>
          <div class="sign_ren"></div>
        </div>
        <div class="content_middle">
         <div class="xuxian">
          <p class="p">苹果iphone 4手机将于9月25日在中国上市</p>
          <p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4,并为iPhone4用户量身定制了合约计划。</p>
          </div>
         <!-- <hr>-->
          <ul>
            <li><a href="#">纯CSS实现三列DIV等高布局</a><span>9-22</span></li>
            <li><a href="#">HTML元素的ID和Name属性的区别</a><span>9-22</span></li>
            <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a><span>9-22</span></li>
            <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a><span>9-22</span></li>
            <li><a href="#">javascript为FF设置首页</a><span>9-22</span></li>
            <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a><span>9-22</span></li>
          </ul>
        </div>
        <div class="content_right">
          <div class="right_one"><span style="color: red">&nbsp;&nbsp;产品</span>导购</div>
          <div class="right_two">
            <div class="yuyin"><b>语音业务</b><br>
              普通电话 | 语音数字中继</div>
          </div>
          <div class="right_three">
            <div class="yuyin"><b>语音业务</b><br>
              普通电话 | 语音数字中继</div>
          </div>
          <div class="right_four">
            <div class="yuyin"><b>语音业务</b><br>
              普通电话 | 语音数字中继</div>
          </div>
          <div class="right_five"></div>
        </div>
      </div>
      <!--内容图片去-->
      <div id="content_two">
        <div class="zuobian">
          <div class="images">
            <div class="zuobian_top">&nbsp;&nbsp;<b><span>热门</span>产品</b></div>
            <div class="xiangce">
              <ul>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
                <li><a href="#"><img src="images/pic4.gif" alt="">产品名称</a></li>
              </ul>
            </div>
          </div>
          <div class="history_left">
            <div class="history_lefttop">
                <span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效-->
                <div class="more">
                    <span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span>
                </div> 
            </div>
            <div class="history_leftcontent">
                <a class="history_apple" href="#"><img src="images/pic5.gif"></a>
                <a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br>
                导言:北京时间9月2日凌晨1点苹果在旧金山举行新品发布会,数码特派记者在美国现场直播…
            </div>
            <div class="history_leftlist">
                 <ul>
                    <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
                       <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
                    <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
                    <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
                    <li><a href="#">javascript为FF设置首页</a></li>
                    <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
                  </ul>
            </div>
          </div>
              
          
          <div class="history_right">
              <div class="history_righttop">
                  <span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效-->
                <div class="more">
                    <span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span>
                </div>
            </div>
            
             <div class="history_leftcontent">
                <a class="history_apple" href="#"><img src="images/pic5.gif"></a>
                <a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br>
                导言:北京时间9月2日凌晨1点苹果在旧金山举行新品发布会,数码特派记者在美国现场直播…
            </div>
            <div class="history_leftlist">
                 <ul>
                    <li><a href="#">纯CSS实现三列DIV等高布局</a></li>
                       <li><a href="#">HTML元素的ID和Name属性的区别</a></li>
                    <li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li>
                    <li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li>
                    <li><a href="#">javascript为FF设置首页</a></li>
                    <li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li>
                  </ul>
            </div>
          </div>
        </div>
        <div class="youbian">
          <div class="questions">
              <div class="que1"><span style="color: red">&nbsp;&nbsp;使用</span>问答</div>
              <div class="que2">
                  <ul>
                      <li>最新出的这个产品如何使用?</li>
                      <li>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了许多,使用方法更加简便...</li>
                  </ul>
              </div>
              <div class="que3">
                  <ul>
                      <li>最新出的这个产品如何使用??</li>
                      <li>该产品采用全新的技术,较上一...</li>
                  </ul>
              </div>
              <div class="que4">
                  <ul>
                      <li>最新出的这个产品如何使用??</li>
                      <li>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了....</li>
                  </ul>
              </div>
              <div class="que5">
                  <ul>
                      <li>最新出的这个产品如何使用??</li>
                      <li>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了....</li>
                  </ul>
              </div>
              <div class="que6">
                  <ul>
                      <li>最新出的这个产品如何使用??</li>
                      <li>该产品采用全新的技术,较上一产品有质的飞跃,功能上增强了许多,使用方法更加简便...</li>
                  </ul>
              </div>
              <div class="que7">&nbsp;</div>
          </div>
          
          
          <div class="iphone">
              <div class="ipone_top">
                  <span style="color: red">&nbsp;&nbsp;联系</span>我们
              </div>
              <div ipone_image>
                  <img src="images/tel.gif" alt="">
              </div>
          </div>
        </div>
      </div>
      
      <!--底部--> 
      <div id="foot">
          <div class="foot_top">
              <center>
                <a href="#">关于我们 || 产品目录 || 联系我们 || 友情链接 || 反馈问题 || 广告合作</a>
              </center>
          </div>
          <div class="foot_foot">
          <center>
              <p>Copyright © 2007 - 2010 aa25.cn All Rights Reserved</p>
                  <p>标准之路 版权所有 京ICP备10007159号</p>
          </center>
          </div>
      </div>
    </div>
    </body>
    </html>
    html代码区
    /* CSS Document */
    *{
        margin: 0;
        padding: 0;
    }
    #body{
        margin: 0 auto;
        width: 905px;
        
        height: 1200px;
    }
    /*顶部div*/
    #top{
        width: 100%;
        height: 75px;
        
    }
    /*中间div*/
    #content_top{
        width: 100%;
        height: 260px;
        margin-top: 10px;
        
    }
    
    .logo{
        background-image:url(../images/logo.jpg);
        background-repeat: no-repeat;
        height: 75px;
        width: 185px;
        background-position:0 50%;
        display: inline-block;
        float: left;/*即使给div设置了宽,依然独占一行,所以要设置成行内元素*/
        
        }
    
    .search{
        width: 277px;    
        display: inline-block;
        float: left;
        margin-left: 638px; 
        margin-top: -36px;
        font-size: 13px;
    }
    .button{
        background:none;
        background-image: url(../images/btn_srh.gif);
        width: 58px;
        height: 23px;
        border: none;
    }
    .text{
        background: none;
        background-image: url(../images/srh_bg.gif);
        
    }
    /*顶部背景图*/
    #back_top{
        height: 66px;
        width: 100%;
        background-image:url(../images/../images/nav_bg.gif);
        background-repeat: repeat-x;
    }
    /*导航栏*/
    .back_a{
        float: left;
        height: 66px;
        width: 4px;
        background:url(../images/../images/nav_bg.gif)  no-repeat;
        background-position: 0 33%;
        overflow: hidden;
    }
    .back_b{
        height: 66px;
        width: 4px;
        background:url(../images/../images/nav_bg.gif)  no-repeat;
        background-position: -6px -66px;
        overflow: hidden;
        float: right;
    }
    .back_one ul li{
        list-style: none;
        float: left;
        margin: 7px 25px;
        
    }
    .back_one ul li a{
        text-decoration: none;
        color: white;
        font-weight:bold;
    }
    
    .back_one ul li a span{
        background-image: url(../images/../images/nav_bg.gif);
        
        overflow: hidden;
        background-position: -2px -132px;
        color: #000000;
        text-align: center;
        display: inline-block;
        height: 30px;
        width: 94px;
        }
    
    .back_two ul li{
        font-size: 12px;
        list-style: none;
        float: left;
        margin-left: 29px;
        margin-top: 6px;
    }
    .back_two ul{
        position: absolute;    /* 添加absoulute目的是脱离文本流,不受上层影响*/
        top: 35px;
    }
    
    
    /*中部部内*/
    .content_left{
        height: 255px;
        width: 272px;
        
        display: inline-block;
        float: left;
    }
    
    .sign_shang{
        height: 39px;
        width: 131px;
        background-image: url(../images/../images/btn_login.gif);
        display: inline-block;
        float: left;
    }
    
    .sign_ren{
        height: 39px;
        width: 131px;
        background-image: url(../images/../images/../images/btn_login1.gif);
        display: inline-block;
        float: left;
        margin-left: 6px;
    
        
    }
    /*上部中间*/
    .content_middle{
        height: 255px;
        width: 390px;
        background-image: url(../images/../images/hot_bg.gif);
        background-repeat: no-repeat;
        display: inline-block;
        float: left;
        margin-left: 5px;
        
    }
    .content_middle .p{
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        margin-top: 15px;
    }
    .content_middle p{
        font-size: 13px;
        margin: 15px;
    }
    .content_middle ul li{
        list-style-image:url(../images/wuxu.jpg);
        font-size: 13px;
        margin:3px  36px 0;
    }
    .content_middle span{
        display: inline-block;
        float: right;
        color: #7B9F11;
    }
    .content_middle a{
        text-decoration: none;
        color: #000000;
    }
    .conten_middle .xuxian{
        
        border: 1px #CCCCCC dashed;
        width: 350px;
        height: 80px;
        }                                                     /*不显示,设置边框无用*/
    
    
    /*上部右方*/
    .content_right{
        height: 255px;
        width: 230px;
        
        float: left;
        margin-left: 7px;    
        background-image: url(../images/side_bg.gif);
        
        
    }
    
    .right_one{    
        height: 28px;
        width: 100%;
        line-height: 28px;
        margin: auto;    
    }
    
    .right_two{
        height: 74px;
        width: 207px;
        background-image: url(../images/../images/icon2.gif) ;
        background-repeat: no-repeat;
        background-position: 10px 11px;
        border-bottom-style:dashed;
        border-width: 0.1px;
        margin-left: 4px;
        font-size: 14px;
        
    }
    .yuyin {
        position: relative;
        top:17px;
        right: -62px;
    }
    
    .right_three{
        height: 74px;
        width: 207px;
        background-image: url(../images/../images/icon2.gif) ;
        background-repeat: no-repeat;
        background-position: 10px -60px;
        border-bottom-style:dashed;
        border-width: 0.1px;
        margin-left: 4px;
        font-size: 14px;
        
    }
    
    .right_four{
        height: 74px;
        width: 207px;
        background-image: url(../images/../images/icon2.gif) ;
        background-repeat: no-repeat;
        background-position: 10px -134px;
        
        margin-left: 4px;
        font-size: 14px;
        
    }
    
    .right_five{
        height: 5px;
        width: 100%;
        background-image: url(../images/side_bg.gif);
        background-position: 0% 100%;
    }
    /*内容第二部分*/
    #content_two{
        height: 630px;
        width: 100%;
        
        margin:auto;
    }
    
    .images{
        border: 1px solid #DBDBDB;
        height: 293px;
        width: 660px;
        
        display: inline-block;
        float: left;
        margin-top: 10px;
        /*为什么之右images也浮动起来,下面的才能上来*/
    }    
    .zuobian_top{
        height: 30px;
        width: 100%;
        background-color: #F7F7F7;
        line-height: 30px;
        
    }
    
    .xiangce ul li{
        list-style: none;
        float: left;
        
    }
    .xiangce ul li img{
        display: block;
        margin:0 auto;
    }
    
    .xiangce ul li a{
        display:block;
        text-align: center;
        margin: 20px 0px 0px 20px;
        text-decoration: none;
        color: #000000;
        font-size: 14px
    }
    
    /*企业历史左边的*/
    
    
    .history_left{
        border: 1px solid #DBDBDB;
        height: 288px;
        width: 327px;
        
        float: left;
        display:inline-block;
        margin-top: 10px;
    }
    
    .history_lefttop{
        height: 30px;
        width: 100%;
        background-color: #F7F7F7;
        line-height: 30px;
        background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/
        background-repeat: no-repeat;
        background-position: 10px 5px;
        overflow: hidden;
    }
    .more{
        width: 70px;
        height: 30px;
        background-image: url(../images/icon.gif) ;
        background-repeat: no-repeat;
        background-position: 10px 5px;
        overflow: hidden;
        display: inline-block;
        float: right;
    }
    .history_leftcontent{
        font-size: 13px;
        margin: 17px;
        color: #A7A3A4;
    }
    .history_leftcontent .history_apple{
        margin-right: 15px;
        float: left;
    }
    .history_leftlist a{
        text-decoration: none;
        color: #000000;
    }
    .history_leftlist ul li{
        list-style-image:url(../images/wuxu.jpg);
        font-size: 13px;
        
        margin:3px 0px 3px 32px;
    }
    
    
    .history_right{
        border: 1px solid #DBDBDB;
        height: 288px;
        width: 327px;
        
        float: left;
        display: inline-block;
        margin-top: 10px;
        margin-left: 5px;
    }
    .history_righttop{
        height: 30px;
        width: 100%;
        background-color: #F7F7F7;
        line-height: 30px;
    
        background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/
        background-repeat: no-repeat;
        background-position: 10px 5px;
        overflow: hidden;
    }
    /*右边问答区*/
    .questions{
        height: 434px;
        width: 229px;
        margin-top: 10px;
        font-size: 13px;
        display: inline-block;
        margin-left: 12px;
        background-image: url(../images/side_bg.gif);
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: 0% 0%;
    }
    .que1{
        font-size: 16px;
        height: 28px;
        width: 100%;
        line-height: 28px;
        margin: auto;    
    }
    .que2,.que6{
        margin: 5px 5px 0px 30px;
    }
    .questions ul{
        list-style-image: url( ../images/wuxu.jpg);
        margin-bottom: 10px;
    }
    
    .que3{
        border: 1px dashed #DCDCDC;
        margin: 5px 5px 0px 30px;
        border-left-style: hidden;
        border-right-style: hidden;
    }
    .que4,.que5{
        border: 1px dashed #DCDCDC;
        margin: 5px 5px 0px 30px;
        border-left-style: hidden;
        border-right-style: hidden;
        border-top-style: hidden;
    }
    .que7{
        background-image: url(../images/side_bg.gif);
        background-position: 0% 100%;
        margin-top: -5px;
        margin-left: 0px;
        line-height: 33px;
    }
    
    
    
    .iphone{
        border: 1px solid #A29D9E;
        border-top-style: hidden;
        border-left-style: hidden;
        border-right-style: hidden;
        height: 142px;
        width: 226px;
        margin-left: 14px;
        display: inline-block;
        margin-top: 10px;
        background-image: url(../images/side_bg.gif);
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: 0% 0%;
    }
    
    .iphone_top{
        font-size: 16px;
        height: 28px;
        width: 100%;
        line-height: 28px;
        margin: auto;
    }
    
    .ipone_image{
        height: 110px;
        width: 100%;
        background-image: url(../images/tel.gif);
    }
    
    /*顶部*/
    #foot{
        width: 100%;
        height: 90px;
        
        margin-top: -13px;
    }
    .foot_top{
        height: 30px;
        width: 100%;
        background-color: #AFAFAF;
    }
    .foot_top a{
        text-decoration: none;
        line-height: 30px;
        text-align: center;
        color: white;
    }
    .foot_foot{
        font-size: 13px;
        color: #666666;
    }
    
    span {
        color: red;
    }
    
    .back_two {
        position: relative;
    }
    css文件
  • 相关阅读:
    springMVC源码学习地址
    JVM架构和GC垃圾回收机制详解
    String StringBuffer和StringBuilder区别及性能
    java reflect反射获取方法变量参数
    springMVC数据模型model,modelmap,map,@ModelAttribute的相互关系
    java abstract构造函数调用
    springMVC源码学习之addFlashAttribute源码分析
    LeetCode 404. Sum of Left Leaves
    利用JavaFX访问MySQL数据库
    LeetCode 111. Minimum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/xiandong/p/7610875.html
Copyright © 2011-2022 走看看