0507课程

最新推荐文章于 2023-04-28 09:58:11 发布

lbxzbh

最新推荐文章于 2023-04-28 09:58:11 发布

阅读量127

点赞数

中期课堂考试

编写博客代码

1.引用外部css样式，2.html分块编写。

#box{
	width:1024px;
	height:1339px;
	margin:0 auto;
	background-color:#FFF;
}
#banner{
	height:50px;
	background-color:#66CCFF;
}
#menu
	
	height:50px;
	line-height:50px;
	background-color:#CC99CC;
}
#main{
	
	height:1000px;
}
#left{
	width:250px;
	height:1000px;
	background-color:#FF9933;
	float:left;
}
#right{
	width:600px;
	height:1000px;
	background-color:#CCFF66;
	float:left;
}
#footer{
	height:60px;
	background-color:#FFCC00;
	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 #666666;
	padding-left: 15px;
	margin-bottom:8px;
	
	}
#list li a{
	font-size: 12px;
	color:#333;
	text-decoration:none;
	
	}

<html>
<head>
<link rel="stylesheet"href="style.css" type="text/css"/>
</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="4.23.html">相册</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>
      <div id="list">
      	<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> 
      </div>
       <h5 class="biaoti">最新文章</h5>
       <ul>
       <li><a href="#">我家在琼海</a></li>
       <li><a href="#">职业生涯</a></li>
        </ul>
    </div>
	<div id="right">
    	<div class="wenzhang">
        <h3><a href="#"></a></h3>
        <span>sun@ 120</span>
        <p>道可道，非常道；名可名，非常名。
无名，天地之始，有名，万物之母。
故常无欲，以观其妙，常有欲，以观其徼。
此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。</p>
        </div>
    </div>
	</div>
	<div id="footer"></div>
</div>

</body>

</html>

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>
<script>
$(document).ready(function(){

})
</script>

使用AJax异步访问后台。

<html>
<head>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function() {
    $(".file").click(function(){
		$(".panel").slideDown();
		})
});

</script>
<style>
.file{
	font-size:36px;
	font-family:"方正舒体";
	}
.panel{
	background:#0F3;
	}
</style>
</head>
<body>
<button class="file">123</button>
<p class="panel">123456</p>


</body>
</html>

lbxzbh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0507课程

中期课堂考试编写博客代码1.引用外部css样式，2.html分块编写。#box{ width:1024px; height:1339px; margin:0 auto; background-color:#FFF;}#banner{ height:50px; background-color:#66CCFF;}#menu height:50px; lin...
复制链接

扫一扫