前端练习案列二：商城页面

对抗路、余温

于 2021-09-28 17:30:44 发布

阅读量304

点赞数

分类专栏：后端开发文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_24644517/article/details/120533890

版权

本文将通过HTML、CSS和JavaScript技术，详细讲解如何构建一个功能完善的商城页面。首先，利用HTML搭建页面基本结构；接着，使用CSS进行样式设计，实现页面美化；最后，运用JavaScript实现交互功能，提升用户体验。

摘要由CSDN通过智能技术生成

1.HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css\common.css">
	<script type="text/javascript" src="js\js1.js"></script>
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="image\logo.png">
		</div>
		<div class="menu"   onclick="show_menu()" onmouseleave="show_menu1()">
			 <div class="menu_title" ><a href="###">内容分类</a></div>
			 <ul id="title">
				<li>现实主义</li>
				<li>抽象主义</li>
			 </ul>
		</div>
		<div class="auth">
			<ul>
				<li><a href="#">登录</a></li>
				<li><a href="#">注册</a></li>
			</ul>
		</div>
	</div>
	<div class="content">
	  <div class="banner">
  		<img src="image/welcome.png" class="banner-img">
	  </div>
	  <div class="img-content">
		<ul>
			<li>
				<img src="image/wumingnvlang.jpg" class="img-li">
				<div class="info">
					<h3>无名女郎</h3>
					<p>
						图片描述可以分为多种，一种是单一说明，就比如直接的告诉看图者这篇文 章是要介绍什么样子的内容，一些配图可以分为含蓄类型的，这样的配图一般会 图片描述可以分为多种.
					</p>
					<div class="img-btn">
						<div class="price">￥5800</div>
							<a href="#" class="cart">
						       <div class="btn"

最低0.47元/天解锁文章

对抗路、余温

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端练习案列二：商城页面

1.HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css\common.css"> <script type="text/javascript" src="js\js1.js"&gt
复制链接

扫一扫

专栏目录