前端开发学习4-HTML

（一）网页框架与布局

HTML框架+css样式+接口+JS业务处理逻辑

HTML框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is title</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="keywords" />
<meta name="description" content="description" />
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript" src="JS dir"></script>
</head>
<body>

<div id='header'>
    header
</div>

<div id='list'>
	list
</div>

<div id='user'>
	user
</div>

<div id='pics'>
	pics
</div>

<div id='footer'>
	footer
</div>

</body>
</html>

 

 

 

CSS样式

@CHARSET "UTF-8";
*{
	padding:0;
	margin:0;
}
body{
	width:960px;
	margin:0 auto;
	background:#FFF
}
#header{
	width:auto;
	height:150px;
	border:2px solid #ccc;
	margin:10px 0;
}
#list{
	width:600px;
	height:514px;
	border:2px solid #ccc;
	float:right;
}
#user{
	width:340px;
	height:250px;
	border:2px solid #ccc;
	float:left;		
}
#pics{
	width:340px;
	height:250px;
	border:2px solid #ccc;
	float:left;
	margin:10px 0 0 0;
	
}
#footer{
	width:auto;
	height:150px;
	text-align:center;
        border:2px solid #ccc;
        margin:534px 0 0 0;
}

 

posted @ 2023-05-18 16:16  兮佑皇叔  阅读(27)  评论(0)    收藏  举报