Blogger Information
Blog 13
fans 0
comment 0
visits 10365
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7月9日作业:HTML布局,JS基础
执着的博客
Original
685 people have browsed it

7月9日作业

  1. 将企业站点的: 关于我们, 联系我们, 任选其一完成它

     

  2. 实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>关于我们</title>
        <style type="text/css">
            .whole{
                width: 1000px;
                margin: 0 auto;
                border: 1px solid black;
            }
            .header,.footer{
                background: black;
                height: 60px;
            }
            .header .nav{
                margin:0;padding: 0;
            }
            .header .nav .item{
                list-style-type: none;
            }
            .header .nav .item a{
                float: left;
                min-height: 60px;
                min-width: 80px;
                line-height: 60px;
                padding:0 15px;
                color: white;
                text-decoration: none;
            }
            .header .nav .item a:hover{
                background: red;
            }
            .main{
                background: lightpink;
                margin: 5px auto;
                overflow: hidden;
            }
            .left,.right{
                min-height: 750px;
                width: 200px;
                border: 1px solid red;
                background: darkgreen;
            }
            .left{
                float: left;
            }
            .right{
                float: right;
            }
            .content{
                float: left;
            }
            .content{
                width: 580px;
            }
            .footer p{
                line-height: 60px;
                color: #eee;
                text-align:center;
            }
        </style>
    </head>
    <body>
    <div class="whole">
        <div class="header">
            <ul class="nav">
                <li class="item"><a href="#">首页</a></li>
                <li class="item"><a href="#">视频教程</a></li>
                <li class="item"><a href="#">社区问答</a></li>
                <li class="item"><a href="#">技术文章</a></li>
                <li class="item"><a href="#">编程启典</a></li>
                <li class="item"><a href="#">资源下载</a></li>
                <li class="item"><a href="#">工具下载</a></li>
                <li class="item"><a href="#">菜鸟学堂</a></li>
            </ul>
        </div>
        <!-- 主体内容 -->
        <div class="container">
            <div class="left">
                <h3>栏目</h3>
                <hr>
                <ul>
                    <li><a href="#">企业概状</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">资质荣誉</a></li>
                    <li><a href="#">企业文化</a></li>
                </ul>
            </div>
            <div class="main">
                <h3>关于我们</h3>
                <hr>
                <div class="content">
                    <img src="http://www.hpmont.com/Uploads/Editor/2018-07-06/5b3f12d0b3812.jpg" alt="图片">
                    <p>●深圳市海浦蒙特科技***聚焦智能制造和智慧运载两大主营业务,持续围绕智能制造效率和制造质量的提升创新,为实现人类美好生产的向往创造价值;持续围绕运载的安全、便捷、高效的提升创新,为实现人类美好生活的向往创造价值。</p>
                    <p>●海浦蒙特在工业控制和电梯控制领域掌握核心技术并拥有自主知识产权,公司已获得国家知识产权局专利180余项,其中发明专利130余项,PCT专利13项。以及著作权30余项。</p>
                    <p>●海浦蒙特积极响应国家推进产教融合政策,持续与国际国内高校开展技术合作和人才联合培养,目前已成为西安交通大学、武汉理工大学研究生联合培养基地,公司多名技术专家被西安交通大学、深圳大学聘为研究生企业导师和校外导师。 </p>
                    <p>●海浦蒙特持续以开放的全球化思维引领和强化产业及行业理想,持续与产业各环节开展多维度多领域的协同合作,持续为构建高效协同发展的产业生态奋斗。</p>
                    <p>目前,海浦蒙特拥有4家海外子公司及多个海外服务机构,营销网络遍布全球40多个国家与地区,海外子公司地址及联系方式如下:</p>
                    <p><h5>***:</h5></p>
                    <p>***九龍尖沙咀廣東道30號新港中心1座7樓709室
    
                        電话:852 6607 2243        传真:852 3003 0135
    
                        邮箱:overseas_1@hpmont.com</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <p>Copyright 2014-2019
                http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9  皖公网安备 34010402701654号</p>
        </div>
    </div>
    </body>
    </html>

    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    2. 将课堂上的JS基本语法的小案例全部写一遍,对照课件, 尽可能自己想一些案例, 不要照搬, 举一反三, 活学活用….

    九九乘法表 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  var grade=63;
  var res='';
  // if (grade >=60){
  //     res='及格万岁';
 // } else {
  //     res='不及格';
  var grade=45;
  var res='';
  res=(grade>=60)?'及格万岁':'要补考';

  if (grade>=60 && grade<80){
      res='优';
  } else if (grade>=80 && grade<100){
      res='良';
  }else {
      res='差'
  }
  console .log(res);
  var sum=0
  for (var i=0;i<10;i++) {
      console .log(sum+'+'+i+'='+(sum+i))
      sum=sum+i;
  }
  console .log(sum);

  for (var m=1;m<10;m++){
      var j=m;
      for (var n=1;n<=m;n++) 
      console.log(n+'*'+j+'='+(n*m))
  }

</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

Correction status:unqualified

Teacher's comments:等做完一并提交
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post