网页布局作业
实例
<!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>运行实例 »
点击 "运行实例" 按钮查看在线实例
