博客列表 >7月9日作业:HTML布局,JS基础

7月9日作业:HTML布局,JS基础

执着的博客
执着的博客原创
2019年07月11日 22:56:41682浏览

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>

运行实例 »

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

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议