Java web开发 Class 2

Java web开发 Class 2

本节课我们跟着老师学习照着一个网站来照葫芦画瓢。。虽说看起来这么简易的网页没想到也没那么容易去打代码。

还是接着上节课的知识

Html的标签，成对出现<div></div>

<div>定义页面上的一块区域，对整个页面划分区域用

常用的有id和class属性：<div id=“menu”></div>

HTML中的3个新标签：图片标签<img>、超链接标签<a>、列表标签<ul><li>

CSS样式中的：背景色、超链接样式、列表样式的写法

Css样式： 引用方式-外链式：<link href="style.css" rel="stylesheet" type="text/css" />

css样式写法：选择器{ 属性1:属性1的值;… }

选择器分为：id选择器（#id）、class选择器（.class）、标签选择器（div）

导航与Banner的实现

左侧列表的实现

主体内容与脚注的实现

上面三项是这节课的新知识

下面是代码
 

@charset "utf-8";
/* CSS Document */
#box{
	background-color:#F00;
	width:1024px;
	height:1300px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
/*放图片，设置高度和图片一样高*/
#banner{
	background-color:#66F;
	height:209px;
}
#menu{
	background-color:#C3F;
	height:50px;
}
#main{
	background-color:#6F0;
	height:1000px;
}
#left{
	background-color:#33C;
	height:1000px;
	width:250px;
	float:left;/*可以使div横向排排坐*/
}
#right{
	background-color:#F3F;
	height:1000px;
	width:774px;
	float:right;/*可以使div横向排排坐*/
}

#footer{
	background-color:#F63;
	height:80px;
}

 

转载于:https://my.oschina.net/u/4091242/blog/3021651