easyui前端界面编写

最新推荐文章于 2022-05-15 13:49:03 发布

XiaoZJun

最新推荐文章于 2022-05-15 13:49:03 发布

阅读量379

点赞数

文章标签： html

本文链接：https://blog.csdn.net/XiaoZJun/article/details/107058430

版权

该博客详细介绍了使用EasyUI创建前端界面的过程，包括主界面、登录界面、注册界面和购物车界面的实现效果，并强调了样式调整的挑战与耐心的重要性。

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

前端界面编写

主界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/fg.css" />
	</head>
	<body>

		<div class="container">
			<!-- 横幅 -->
			<div class="row">
				<div class="col-sm-4">
					您好，欢迎来到网上书城！
				</div>
				<div class="col-sm-4 col-sm-offset-4">
					<a href="#">登录</a> | <a href="#">注册</a> | <b>我的购物车</b> | <i>网站首页</i>
				</div>
			</div>
			<!-- 搜索栏 -->
			<div class="row">
				<div class="col-sm-12 search-parent">
					<!-- 本来这里应该放一张背景图的，我就用背景颜色代替了 -->
					<div class="search"></div>
					<input type="text" id="book_name" name="name" value="" />
					<button type="button" class="btn btn-primary">搜索</button>
				</div>
			</div>
			<!-- 主内容区 -->
			<div class="row content">
				<div class="col-sm-3 l-content">
					<ul class="list-group c-category ">
						<li class="list-group-item" style="color: white;">书籍分类</li>
						<li class="list-group-item">现代言情</li>
						<li class="list-group-item">古代言情</li>
						<li class="list-group-item">幻想仙侠</li>
						<li class="list-group-item">玄幻</li>
						<li class="list-group-item">都市</li>
						<li class="list-group-item">奇幻</li>
						<li class="list-group-item">军事</li>
						<li class="list-group-item">科幻</li>
						<li class="list-group-item">武侠</li>
						<li class="list-group-item">青春</li>
						<li class="list-group-item">竞技</li>
						<li class="list-group-item">历史</li>
						<li class="list-group-item">游戏</li>
						<li class="list-group-item">其他</li>
					</ul>
				</div>
				<div class="col-sm-9 r-content">
					<!-- 广告 -->
						<img src="img/banner.png" class="img-thumbnail" style="width: 1000px;height: 300px;" alt="...">

					<!-- 新书上架 -->
					<div class="news container">
						<div class="tip row">
							<img src="img/title_bj.png" />
							<h5 style="color: white;">新书上架</h5>
						</div>
						<div class="row book">
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style="color: red;">￥12</b>
							</div>
							<div class="col-sm-2">
								<img src="img/1.png" />
								<p>冷间谍</p>
								<b style=

最低0.47元/天解锁文章

XiaoZJun

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui前端界面编写

前端界面编写主界面登录界面:注册界面购物车界面总结：主界面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>首页</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /> <link rel="stylesheet" type="
复制链接

扫一扫