【Web编程基础作业】：创建一个网上购物商城的页面，进行页面布局综合练习（html和css分开设计，采用外部样式表）

本文链接：https://blog.csdn.net/bon_e_/article/details/125034865

前言

我用的是我们学校机房的DreamweaverCS6版本作为编辑器，真的真的建议大家好好记一记各个标签啊，属性啊，别像我一样一开始想着纯界面设计的方式来设计页面，代码一点也不记，最后做这种实训作业的时候，很痛苦，期末复习的时候也很痛苦

（学校期末是上机考试，但又不完全上机。没法用DreamweaverCS6设计，只能手敲代码设计）

一、实训题目要求

请按照素材（见附件）里提供的材料，结合我们课上讲解的实例操作，创建一个网上购物商城的页面，进行页面布局综合练习。

要求

（1）看懂示例中的HTML源代码和CSS源代码。

（2）仿照示例，使用DIV+CSS布局，布局合理美观。

（3）上交的方式为:上传以自己的学号命名的文件夹（压缩包）。

所做网页和使用的素材都放在文件夹内。

二、实训源代码

（一）HTML（部分）

（二）CSS

@charset "utf-8";
/* CSS Document */

.main {
	height:100%;
	width: 778px;
	font-size: 24px;
	
	margin:0 auto;
	
}
center {
	width: 778px;
}

.center_left {
	float: left;
	width: 190px;
	height: 450px;
	color: #000;
}

.center_right {
	float: left;
	width: 588px;
	height: 450px;
	font-size: 16px;
}
.r1 {
	float: left;
	height: 198px;
	width: 588px;
	background-color: #CFF;
	font-family: "华文行楷";
}
.nav {
}

.r2 {
	float: left;
	height: 199px;
	width: 588px;
	background-color: #CFF;
}



.header {
	height: 143px;
	width: 778px;
}
.nav {
	height: 30px;
	text-align: right;
	background-color: #CCC;
	background-image: url(%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/images/bg_menu.jpg);
	font-family: "华文新魏";
	color: #000;
}
.center_left_top {
	float: left;
	width: 190px;
	height: 200px;
	font-family: "华文中宋";
	font-size: 14px;
	background-image: url(%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/images/bg_left_top.jpg);
	text-align: center;
}
.center_left_bottom {
	float: left;
	width: 190px;
	color: #000;
	background-color: #F9F9F9;
	height: 250px;
	clear: both;
	margin: 0 auto;
	list-style-image: url(%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/images/list_item.gif);
	font-family: "华文仿宋";
}
.bottom {
	background-image: url(%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/images/bg_footer.gif);
	float: left;
	height: 30px;
	width: 778px;
	text-align: center;
	margin:0 auto;

}
.bo {
	background-image: url(%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E7%BB%BC%E5%90%88%E5%AE%9E%E8%AE%AD%E7%B4%A0%E6%9D%90/images/bg_footer.gif);
	text-align: center;
	height: 30px;
	width: 778px;
	font-family: "华文中宋";
	font-size: 18px;
	float: left;
}

.bottom2 {
	text-align: center;
	float: left;
	height: 40px;
	width: 778px;
	margin:0 auto;
}


.center_left_bottom_1 {
	text-align: center;
	height: 40px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.center_left_bottom_2 {
	height: 210px;
	font-size: 16px;
}
.center_right_top {
	height: 53px;
	width: 588px;
	float: left;
}
.right_top1 {
	float: left;
	height: 53px;
	width: 100px;
	text-align: center;
}
.right_top2 {
	height: 53px;
	width: 488px;
	float: left;
	font-family: "华文中宋";
	font-size: 18px;
	margin-top: 10px;
	margin-bottom: -10px;
}