Blogger Information
Blog 8
fans 1
comment 0
visits 6437
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网页布局/js基本语法 - 7月9日作业
大兔子的博客
Original
880 people have browsed it

网页布局作业


实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>关于我们</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            border: none;
        }
        /* 头部样式 */
        header {
            background-color: #0094ff;
        }

        .header .content {
            width: 1000px;
            height: 60px;
            background-color: #0094ff;
            margin: 0 auto;
        }

            .header .content .nav {
                margin-top: 0;
                margin-bottom: 0;
                padding-left: 0;
            }

                .header .content .nav .item {
                    list-style-type: none;
                }

                    .header .content .nav .item a {
                        float: left;
                        min-width: 80px;
                        min-height: 60px;
                        line-height: 60px;
                        color: white;
                        padding: 0 15px;
                        text-decoration: none;
                        text-align: center;
                    }

                        .header .content .nav .item a:hover {
                            background-color: red;
                            font-size: 1.1rem;
                        }
        /* 中间主体样式 */
        .container {
            width: 1000px;
            margin: 5px auto;
            overflow: hidden;
        }

        .wrap {
            width: inherit;
            min-height: 400px;
        }

        .left {
            width: 280px;
            min-height: 400px;
        }

        .wrap, .left {
            float: left;
        }


        .left {
            margin-left: -100%;
        }

        .main {
            padding-left: 280px;
        }

            .main .about {
                padding: 0 25px;
            }

                .main .about h3 {
                    font-size: 1.6rem;
                    text-align: center;
                    color: #0094ff;
                    padding: 20px 0;
                }

                .main .about .about-con p {
                    text-indent: 2em;
                    line-height: 1.75;
                    margin: 15px 0;
                }

        .left h3 {
            margin: 10px auto;
            text-align: center;
            padding: 20px 0;
            border-bottom: 1px solid;
            color: #0094ff;
        }

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

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

            .left li a:hover {
                background-color: #ff6a00;
                font-size: 1.1em;
            }

        /* 底部样式 */

        .footer .content {
            width: 1000px;
            height: 60px;
            background-color: #0094ff;
            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">
        <!--   banner图-->
        <div class="banner">
            <img src="static/images/banner.jpg" alt="">
        </div>

        <!-- 1. 中间内容区块 -->
        <div class="wrap">
            <div class="main">

                <div class="about">
                    <h3>关于我们</h3>
                    <div class="about-con">
                        <p>保安服务公司,始创于2009年,经湖南省公安厅批准成立,长沙市公安局直管单位,是一家拥有6家分公司的大型安保综合服务集团。业务范围包括物业管理服务、保安人力防范、随身护卫、安检服务、安全咨询服务、贵重物品运输护卫。是一家拥有1100余名员工,为社会各界提供专业安全解决方案的大型综合安保服务供应商。</p>
                        <p>
                            公司以成为中国安保行业第一***为愿景,以敬德、专注、和合、进取为核心价值观,致力发展,不断壮大。
                            现已为400余家客户单位服务,主要为国家政府机构、企事业单位,涉及金融、互联网、电力、热力、公交、物业等行业。
                            公司现服务的核心单位有:新南大厦、湖南体育公园、长沙市天心区教育局下属所有公办学校,匹根集团、中建集团、平安银行、民生银行、
                            兴业银行,绿地集团长沙分公司、悦豪物业***、大唐国际发电公司、国际天使幼儿园 万科物业、以及家乐福、沃尔玛等外资客户。
                            在私人保镖业务方面,公司着眼行业精品,紧跟社会发展需求,坚持专业***、让客户安心的原则,致力发展保镖业务。担任保镖的队员均是从武警特警、
                            海军陆战队、司法警察学校、取得过名次的一线散打运动员,没有违法记录,符合标准的,执行命令坚决,职业化水平比较高的人员当中挑选出来的。
                            并严格按首长贴身护卫标准进行培训,实施逐级淘汰考核,最终培育成为专业的安全护卫人才。
                        </p>
                        <p>
                            公司坚持变革和创新精神,走高端发展路径,加快企业发展步伐,致力打造中国一流***的保安民族企业。制定了“立足长沙、服务全国、走向世界”发展战略,积极与国际保安接轨,与国际***保安公司建立交流、合作关系,引进国外先进理念和技术,提升自身的经营管理水平。创新制定了管理规范化、服务标准化、工作流程化的服务管理模式和标准,提升了精英保安的***价值。
                        </p>
                    </div>
                </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="">© PHP中文网版权所有</a>  | 
                <a href="">0551-88889999</a>  | 
                <a href="">皖ICP2016098801-1</a>
            </p>
        </div>
    </div>
</body>
</html>

运行实例 »

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


js基本语法:

JavaScript的注释及分号:

//     单行注释

/* */  多行注释

语句结束使用分号,如果省略,则由解析器确定语句的结尾。


JavaScript的语法:

ECMAScript中的一切(变量、函数名、操作符)都区分大小写。


JavaScript的标识符:

1、什么是标识符:变量、函数、属性的名字,或者函数的参数。

2、标识符的命名规则:

 - 由字母、数字、下划线(_)或美元符号($)组成;

 - 不能以数字开头;

 - 不能使用关键字、保留字做标识符。


什么是变量:

ECMAScript的变量是松散类型的;松散类型:可以保存任何类型的数据,每个变量仅仅是一个用于保存值的占位符而已。


变量的声明跟赋值:

1、变量声明:

 - 变量的声明要使用var操作符,语法:var 变量名

 - 一次声明多个变量:var 变量名=值,变量名=值;

 - 省略var的变量是全局变量(不推荐省略var操作符来定义全局变量)

 

JavaScript的数据类型:

ECMAScript

 - 简单数据类型

 1. Undefined(nndefined类型只有一个值,即特殊的Undefined)

 2. Null     (null值表示一个空对象指针)(undefined派生自null,所以undefined==null返回的结果是true)

 3. Boolean  (ture表示真,false表示假)

 4. Number   (Number表示整数或浮点数)(NaN:即非数值(Not a Number)是一个特殊的数值)(任何涉及NaN的操作(例如NaN/10)都会返回NaN。)(NaN跟任何值都不相等,包括NaN本身。){isNaN(n),检测n是否为非数值,返回值是:boolean}{isNaN()对接受的数值,先尝试转换为数值,在检测是否为非数值。}

 5. String

 - 复杂数据类型

 1. Object

 -  ECMAScript6新增数据类型

 1.  symbol


 -  typeof:检测数据类型

 1.  语法:typeof 变量或typeof (变量)

 2.  返回值:String类型,有可能是string、nuber、boolean、object、nudefind、function

 -  console.log ()  在控制台中打印

 -数值转化:有三个函数可以把非数值转化为数值

 1. Number ()

 2. parseInt ()会忽略字符串前面的空格,直至找到第一个非空格字符。(转化空字符返回NaN)

 3. parseFloat ()

 说明:

 1. Number () 可以用于任何数据类型;

 2. parseInt ()跟parseFloat ()专门用于把字符串转化为数值。


str.toString () 将str转化为字符串,str可以是数值、布尔值、对象、字符串。

toString () 在不知道要转换的值是Null或Undefined的情况下,可以使用,它能把任何类型的值转化为字符串。

Boolean ()  除0以外的所有数字,转化为布尔型都是true,除“ ”以外的字符,转化为布尔型都是ture,Null跟Undefind转化为布尔型,都是false。

实例

<script>
	var a = prompt("请输入商品的价格:"),
		b = prompt("请输入商品的数量:")
	if (a * b >= 500) {
		alert("请支付" + a * b * 0.8 + "元,谢谢!")
	} else {
		alert("请支付" + a * b + "元,谢谢!")
	}
</script>

运行实例 »

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


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