简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 企业站点联系我们页面，js基本语法 2019年7月9日 PHP学习第七课
Blogger Information
Blog 10
fans 0
comment 0
visits 5120
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
企业站点联系我们页面，js基本语法 2019年7月9日 PHP学习第七课
Johnson的博客
Original
807 people have browsed it

企业站点“联系我们”页面代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>联系我们</title>
   <style>
.header {
           background-color: black;
}
       .header .content {
           width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
       .header .content .nav {
           margin: 0;
}
       .header .content .nav .item {
           list-style-type: none;
}
       .header .content .nav .item a {
           float: left;
min-width: 100px;
min-height: 60px;
line-height: 60px;
color: white;

text-decoration: none;
text-align: center;
}
       .header .content .nav .item a:hover {
           background-color: red;
font-size: 110%;
}
       /*中间内容*/
.container {
           width: 1000px;
margin: 5px auto;
overflow: hidden;
}
       .wrap {
           width: inherit;
min-height: 800px;
}
       .left {
           width: 280px;
min-height: 800px;
}
       .wrap, .left {
           float: left;
}
       .left {
           margin-left: -100%;
}
       .main {
           padding-left: 280px;
box-sizing: content-box;
}
       .main h3 {
           margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}
       .address ul li {
           list-style-type: none;
}
       .map {
              margin: 0;
padding: 20px;
}
       .map img {
           width: 580px;
height: 400px;

}
       .left h3 {
           margin: 10px auto;
text-align: center;
border-bottom: 1px solid;
}

       .left ul {
           margin: 0;
padding: 0;
list-style: none;
}

       .left li a {
           display: inline-block;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-decoration-line: none;
line-height: 50px;
text-align: center;
}

       .left li a:hover {
           background-color: red;
font-size: 1.1em;
}
       .footer .content {
           width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
       .footer .content p {
           text-align: center;
line-height: 60px;
}
       .footer .content  a {
           text-decoration: none;
color: lightgrey;
}
       .footer .content  a:hover {
           color: white;
}
   </style>
</head>
<body>
<!-- 头部 -->
<div class="header">
   <div class="content">
       <ul class="nav">
           <li class="item"><a href="index.html">首页</a></li>
           <li class="item"><a href="news.html">公司新闻</a></li>
           <li class="item"><a href="products.html">最新产品</a></li>
           <li class="item"><a href="about.html">关于我们</a></li>
           <li class="item"><a href="contact.html">联系我们</a></li>
       </ul>
   </div>
</div>
<div class="container">
   <div class="banner">
       <img src="static/images/banner.jpg" alt="">
   </div>

   <div class="wrap">
       <div class="main">
           <div class="address">
               <h3>联系我们</h3>
               <ul>
                   <li>公司地址：中国杭州市余杭区文一西路969号</li>
                   <li>联系人：马云</li>
                   <li>***：023-01234567</li>
               </ul>
           </div>
           <div class="map">
               <img src="static/images/address.jpg" alt="">
           </div>
       </div>
   </div>
   <div class="left">
       <h3>栏目</h3>
       <div class="category">
           <ul>
               <li><a href="">公司新闻</a></li>
               <li><a href="">最新产品</a></li>
               <li><a href="">关于我们</a></li>
               <li><a href="">联系我们</a></li>
           </ul>
       </div>

   </div>


</div>
<div class="footer">
   <div class="content">
       <p>
           <a href="">&copy; PHP中文网版权所有</a> &nbsp;|&nbsp;
<a href="">0551-88889999</a> &nbsp;|&nbsp;
<a href="">皖ICP2016098801-1</a>
       </p>

   </div>
</div>
</body>
</html>


js的基本语法

if 判断 语句   代码如下：

var pay = 1000;
var say = '';

if (pay >= 3000 && pay < 6000){
   say = '还不错哦';
} else if(pay >= 6000){
   say = '有钱人哦';
} else{
   say = '给国家拖后腿了';
}
console.log(say);

三元判断结构:

say = ( pay >= 3000 )? '还可以哦':'给国家拖后腿了';
console.log(say);

switch判断语句：

switch (true) {
   case pay >=3000 && pay < 6000: say = '还可以';
   break;
   case pay >6000 && pay < 10000: say = '有钱人哦';
   break;
   case pay > 10000 : say = '富二代吧';
   break;
   default:
       say = '不好意思给国家拖后腿了';
}
console.log(say);

for循环语句：

var sum = 0 ;
for (var i = 0; i<10 ; i++){
   sum = sum + i ;
}
console.log(sum);

while循环语句

var sum = 0 ;

var i = 0 ;  //入口判断

while (i < 10){
   sum = sum + i ;
   i++;
}
console.log(sum);



Correction status：qualified

Teacher's comments：联系我们, 关于我们, 其实都是单页面, 布局方式是一样的,这种布局也适合用来创建专题页, JS的基础知识, 还可以再想些案例的
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！