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文件

时间： 2024-08-28 15:23:14

html/css静态网页制作的相关文章

静态网页制作

总结下工作.问,为什么开始看到这个作业的时候不知道如何下手呢? 现在完成了,知道该怎么去分解这个网页,以图中的分割线为准,可以这样细分: 这样,再根据每个模块去细分,首先看header这个模块,可以看到有个logo大图标,然后紧跟着是导航条. 刚开始想把这两部分作为两个平级div嵌套在div header里面,不过后面因为,哪个黄色的背景图要嵌套在logo字下面,所以最后的布局是这样的. 这里调试ul中的float:left,不是很清楚为啥会出现这种情况.这里让ul,li设置为float:lef

大学生代制作静态网页制作

+2425691680 模板介绍该模板为纯html5模板,主题为周末·黑色调,此模板采用黑色为主色,不包含任何服务器端code,只包含index.html一个页面,PC端和手持端自适应,即响应式布局,网页的目录结构为:css.images.fonts和js,网页采用div+css布局, h5标签开发和扁平化设计. 三.目录结构四.浏览器兼容大学生静态网页,喜欢的可以了解一下~~ 五.关键代码解析 1.jquery.fullPage.min.js 简介技能案例作品联系方式 (funct

HTML 静态网页制作12月3日格式与布局

一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relative):那么div相对于浏览器定位. 2.外层有position:absolute(或relative):那么div相对于外层边框定位三.position:relative 相对位置. 如下图,相对于把此div包含住的div的某个位置进行固定.如果外层没有包含他的,那就相对于浏览器进行相对位置的

HTML 静态网页制作12月2日表单样式

HTML 表单的应用源代码: <body> <center> 账号:<input type="text" name="first"/> <br /> 密码:<input type="password" name="seconds"/> <br /> 备注:<textarea name="third" cols="50&q

HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版?

html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记--同时介绍了目前流行的web标准与css网页布局实例,以及基于语言的网页特效制作.需要的朋友们可以下载看看! HTML\CSS\JavaScript网页制作从入门到精通共分为18章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特效制作.为了便于读者学习,附录中

Java Web学习(2)：静态网页与动态网页

一静态网页 (1)静态网页概述在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像.声音.FLASH动画.客户端脚本和ActiveX 控件及JAVA小程序等.静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的. 静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站

动态网页和静态网页的特点

静态网页的基本概述静态网页的网址形式通常是以.htm..html..shtml..xml等为后后缀的.静态网页,一般来说是最简单的HTML网页,服务器端和客户端是一样的,而且没有脚本和小程序,所以它不能动.在HTML格式的网页上,也可以出现各种动态的效果,如.GIF格式的动画.FLASH.滚动字母等,这些"动态效果"只是视觉上的,与下面将要介绍的动态网页是不同的概念. 静态网页的特点(1)静态网页每个网页都有一个固定的URL,且网页URL以.htm..html..shtml等常见形式为

css+div网页设计

css是网页制作不可缺少的部分,我会用两篇博客为大家展示css的基本用法. 关于css+div的整体结构图总结如下: 本篇博客主要介绍css的基础知识. 一.css概念; css(级联样式表):它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 二.使用css控制页面方法 css控制页面的方法共有四种,行内样式.内嵌式.链接式.导入式. a.行内样式 ps:行内样式

静态网页与动态网页的区别

1. 什么是静态网页?什么是动态网页?两者的区别是什么?试举例说明. 答:在网站设计中,纯粹 HTML 格式的网页通常被称为 " 静态网页 " ,早期的网站一般都是由静态网页制作的.静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.你编的是什么它显示的就是什么.不会有任何改变.静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站.静态网页的网址形式通常为 : www.exa mple.com/eg/eg.htm ,也就是以 .htm . .htm