隨著電商時代的到來，購物已經成為了我們生活中必不可少的一部分。而購物頁面的設計對于提高用戶體驗和達到銷售目的來說也非常重要，這就需要我們掌握 HTML 和 CSS 的知識。

HTML 是網頁的基礎語言，而 CSS 則是用來美化網頁樣式的語言。下面是一個簡單的網頁結構代碼：

購物網站
商品列表
商品1的介紹
價格：100元
商品2的介紹
價格：200元

上述代碼中，我們使用了 HTML 的標簽來定義網頁的結構，其中 header 標簽表示網頁頭部，main 標簽表示網頁主體，footer 標簽表示網頁底部。ul、li、a、img、p、span 等標簽也都有各自的意義。

下面是 CSS 的樣式代碼：

header {
	background-color: #333;
	color: #fff;
	padding: 10px;
}
nav ul {
	list-style: none;
}
nav li {
	display: inline-block;
	margin-right: 10px;
}
nav a {
	color: #fff;
	text-decoration: none;
}
section.banner img {
	width: 100%;
	height: auto;
}
section.products ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
section.products li {
	width: 300px;
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	box-shadow: 2px 2px 3px #eee;
}
section.products li img {
	width: 100%;
	height: auto;
}
section.products li p {
	line-height: 1.5;
	margin: 5px 0;
}
section.products li span {
	font-size: 18px;
	color: #e4393c;
	font-weight: bold;
}

上述代碼中，我們使用了 CSS 的選擇器和屬性來設置樣式，比如對 header 進行背景顏色和文字顏色的設定；對 nav 中的元素進行排版和顏色設定。同時，也對商品列表的布局和樣式進行了設計。

總的來說，通過 HTML 和 CSS 的配合，我們可以設計出符合用戶習慣和美觀的購物頁面，并達到銷售的目的。