css布局小案例 关于我们
先看个效果图~
来看看具体代码啦。
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/header.css">
<link rel="stylesheet" href="static/css/footer.css">
<link rel="stylesheet" href="static/css/about.css">
<style type="text/css">
/*无法上传文件 所以将about.css内容贴在了这里方便预览*/
.container {
width: 1000px;
margin: 5px auto;
/* 参考色块: 整个主体容器是灰色背景 */
/*background-color: lightgray;*/
/*包住浮动的子元素*/
overflow: hidden;
}
.wrap {
width: inherit;
min-height: 800px;
/*参考背景色*/
/*background-color: cyan;*/
}
/* 左边栏样式 */
.left {
width: 280px;
min-height: 800px;
/*background-color: lightcoral;*/
}
/* 右边栏样式 */
.right {
width: 280px;
min-height: 800px;
/*background-color: lightseagreen*/
}
.wrap,
.left,
.right {
float: left;
}
.left {
margin-left: -100%;
}
.main {
padding-left: 280px;
}
/*左侧样式*/
.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;
}
/*about star*/
.about{margin:20px 0 20px 20px;}/*700px可视区域*/
.about h3{text-align: center;}/*除了居中其他继承*/
.about img{max-width:700px;}/*限制图片最大宽度防止破坏布局*/
/*段落自动缩进2个字符 初始化行高让默认看起来不累 颜色不能太黑 设置个新灰度颜色*/
.about p{text-indent: 2em; line-height: 1.6em; color: #444444;}
</style>
<title>关于我们</title>
</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="con">
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</p>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</p>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</p>
<p>php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</p>
<img src="https://img.php.cn/upload/image/892/720/985/1562753034167737.jpg"/>
</div>
</div>
</div>
</div>
<!-- 2. 左侧分为上下二 -->
<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基础语法
---------------语句和注释---------------
/*
这是一个多行注释
*/
//这是一个单行注释
var sum=190+60; //这是js语句 特点带一个分号
500+20 或 i+o //表达式
------------------------------语句通常不需要返回值,表达式必须要有返回值
---------------变量---------------
变量命名规则：只能使用大小写字母、数字、下划线、$符，且不可以数字开头。
var str="双引号括起来的是字符串";
var str2='单引号包起来的同样是字符串'
var num=520; //数字 或者变量 不需要引号。还有每个语句后面的封号虽然可以省略但是为了规范和减少意外bug还是建议都写上。
---------------变量声明---------------
var 关键词用来声明变量 后面是变量名
例如 var dahuilang; //只是声明了一个叫dahuilang的变量 （第一次赋值叫初始化 未初始化 值默认为 undefined）
var dahuilang="大灰狼是狼吗？"; //声明变量并同时复制初始化
---------------动态类型---------------
var x=123；//数字类型
x="未知错误，错误源于无知。"; // 像不像墙头草 一会数字类型一会字符串。
---------------动变量提升---------------
JavaScript引擎工作原理: 先解析代码,获取到全部已经被声明的变量,然后再逐行执行代码
导致所有变量声明语句,会直接提升到脚本(函数)头部,这种独有的现象叫:变量提升
var x = 5; // 初始化 x
alert(y) //只会提升 y这个变量到顶部 但是 赋值7 不会提升 所以虽然不会报错 但是输出的是undefined
var y = 7; // 初始化 y
---------------三元运算---------------
语法格式：条件 ? 表达式1 : 表达式2
小案例（超过晚上）
var time=20; //当前时间几点
status = time>20? "下班了休息":"上班时间找我干啥";
alert(status) //输出时间
---------------for 循环 +函数+if判断---------------
偶数求和
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="a" value="" />
<input type="button" id="" value="按钮" onclick="js()"/>
<script type="text/javascript">
function js(){
var a=parseInt(document.getElementById("a").value);
var h=0
if (a%2==0) {
for(a%2==0;a>=0;a-=2){
h+=a
}
alert(h)
} else{
for(a%2==1;a>=0;a-=2){
var b=a-1
h+=b
}
alert(h)
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
---------------for循环 九九乘法表---------------
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
for (var i=1;i<=9;i++)
{
for (var e=1;e<=i;e++)
{
document.write(e+"*"+i+"="+i*e+" ")
}
document.write("<br/>")
}
</script>
</head>
<body>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例