中期作业
<html>
<head>
<link rel="stylesheet"href="style.css" type="text/css"/>
<style>
#box{
width:1024px;
height:1500px;
margin:0 auto;
background-color:#FFF;
}
#banner{
height:150px;
background-color:#66FFCC;
}
#menu
{
height:50px;
line-height:150px;
background-color:#CC66CC;
}
#main{
height:600px;
}
#left{
width:350px;
height:500px;
background-color:#FF99CC;
float:left;
}
#right{
width:650px;
height:500px;
background-color:#FFCC66;
float:left;
}
#footer{
height:80px;
background-color:#FF66FF;
clear:left;
}
*{
margin:0;
padding:0;
}
#banner{
height:209px;
}
#menu{
height:50px;
background-color:#328048;
}
#menu ul{
list-style:none;
width:430px;
height:50px;
line-height:50px;
margin-right:10px;
float:right;
}
#menu ul li{
float:left;
margin-left:20px;
}
#menu ul li a{
text-decoration:none;
font-size:16px;
color: #fff;
font-family:"微软雅黑";
}
#menu ul li a:hover{
color:#F60;
}
#main{
padding-top:10px;
}
#left{
width:250px;
float:left;
}
#zuozhe {
text-a;ign:center;
padding-top:15px;
padding-left:15px;
}
#zuozhe img{
border: 1px solid #096;
padding:8px;
border-radius:8px;
}
#zuozhe span{
display:block;
font-family:Arial, Helvetica, sans-serif;
font-size: 15px;
margin:10px;
padding-top:5px;
padding-bottom:5px;
border-top:1px dashed #666666;
border-bottom:1px dashed #666666;
}
#huoli{
height:150px;
margin-top: 20px;
}
.biaoti{
color:#FFF;
font-size:16px;
font-weight: bolder;
width: 220px;
height: 40px;
background-color:#328048;
border-radius: 0px 10px 10px 0px;
padding-left:30px;
line-height: 40px;
}
#huoli ul{
padding-left:20px;
padding-top:10px;
}
#huoli li{
float:left;
list-style:none;
margin-left:10px;
width:80px;
margin: 5px;
}
#huoli li img{
float:left;
margin-right:6px;
}
#huoli li a{
float:left;
font-size:12px;
color:#333;
text-decoration:none;
}
#huoli li a:hover{
color:#F00;
}
#list ul li{
background:ul(image/icon1.gif) no-repeat 5px center;
border-bottom: 1px dashed #66FF66;
padding-left: 15px;
margin-bottom:8px;
}
#list li a{
font-size: 12px;
color:#333;
text-decoration:none;
}
</style>
</head>
<body>
<div id="box">
<div id="banner">
<img src="images/bg.jpg" alt="banner"/>
</div>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">阳光生活</a></li>
<li><a href="#">校园情缘</a></li>
<li><a href="#">释放梦想</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
<div id="main">
<div id="left">
<div id="zuozhe">
<img src="images/baby.jpg" alt="个人作者相片" title="个人作者相片">
<span>software sunshine</span>
</div>
<div id="huoli">
<h5 class="biaoti">活力地带</h5>
<ul>
<li><img src></><a href="#"></a></li>
<li><img src></><a href="#"></a></li>
<li><img src></><a href="#"></a></li>
<li><img src></><a href="#"></a></li>
<li><img src></><a href="#"></a></li>
<li><img src></><a href="#"></a></li>
</ul>
</div>
20190507
取颜色 :在word 文件里面使用 形状的工具 然后右键取色器。
手机颜色:使用QQ截屏(截屏中,鼠标移动会选择。)。
2.搭框架(box 内部)
box“<div>元素”里面三部分:1.header 2.content 3.footer
写的顺序:按1.2.3....顺序进行。
1.头部<header>
img 设置宽高
导航栏设置 在“头部”或者“内容”里面。
搜索框:1在<div>里写。写form表单里面<input>1.text 2.button两部分。
导航 :a标签形式完
2.letter-spacing:字与字之间的宽度;
外框 与 内框 的样式可放相同的 border,因为margin属性为0 时可使用。
font-weight: bold属性 400以上。
align:设置文本样式位置
line-height:行内居中。
使用超过标签元素的大小的h1 字下会出现下划线
1.观察网页整体框架。
2.规划画框架图
3.依据我们的整体框架图搭建我门的DIV。
4.一般将其命名为container
如有三个部分头、内容、尾部。
3.先写头部:(编写顺序从上往下依次补充内容,需要完善头部的细节框架搭建然后写css样式把头部搭建完后测试收缩起来便于代码管理
以同样的步骤搭建content、footer部分,一定注意写代码的顺序,一定做到代码多而不乱。)
Jquery Ajax
Ajax = 异步 “Asynchronous” javascript和XML (json)
简单的说,在不重载网页的情况的下 Ajax通过后台加载数据并在网页上进行显示。
使用应用案例:1.谷歌地图。2.优酷视频 3.人人网 等
Jquery - Ajax Load() 方法:具体从服务器加载数据,并把数据放到我们指定的元素当中。
语法:"
S(selector).load(URL.data.callback)
//callback回调函数,
//必需的Url参数规定加载的地址。
//可选的data参数规定请求一同发送的查询字符串(键值对集合)
可选Callback()执行完load方法完成后所执行的函数。
<script src="jquery/jquery.1.8.3.min.js">
</script>
<script>
$(document).ready(function(){
})
</script>
"
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("#div1").mouseover(function(){
url='demo1.txt';
$("#div1").load("url");
});
$("#div1").mouseout(function(){
$("#div1").html("");
});
$("button").click(function(){
url='demo1.txt';
$("#div1").load("url");
})
})
</script>
</head>
<body>
<div id="div1" style="background-color:rgb(204,204,153);width:200px;height:100px;"></div>
<button>获取外部文本</button>
</body>
<html>