网上书城前端界面设计

前言

接着我的上一篇博客来,今天为大家分享的内容是网上书城项目的界面设计以及代码分析

网上书城项目需求分析、功能划分、数据库表设计、工具类介绍

界面设计

首页

在这里插入图片描述
首页的话,主要涉及到了BootStrap的相关知识,利用栅格进行页面的布局,灌输了容器的概念,其中最左边书籍的分类涉及到了列表组的应用,而列表组中主要是使用了jquery的选择器 li:(gt)…

这里分享一下jQuery的官网链接:

jQuery的API文档

登录

在这里插入图片描述
这里分享一下BootStrap的官网链接:

BootStrap中文网

根据BootStrap的官网现有的模板调整成自己所需要的页面

注册

在这里插入图片描述
根据用户需求调整成自己需要的页面,和登录同理,也是调整样式,调整一下内外边距、宽高…

书籍搜索

在这里插入图片描述
这个页面基本上也是使用到了栅格进行布局,主要是利用到了栅格中行、列、偏移的概念

购物车

在这里插入图片描述
这个页面基本上也是利用到了栅格进行布局,以及Easyui中的datagrid数据表格组件的实现方式

其余的话,样式还用到了一些定位、调整内外边距、宽高的方式…

当然,你想页面上的颜色更加好看,但是自己又记不住颜色的样式,博主推荐你去使用取色器进行调整你需要的颜色:

Take Color 取色器链接

这款类型的取色器可直接在官网进行下载,然后进行安装,官网有它的简介以及详细安装教程,这里就不一一演示啦~

在这里插入图片描述
取色器使用方法:想取得哪里的颜色就把鼠标悬浮在哪里,再按Alt+C就可取得颜色,再ctrl+c就可复制颜色了

当然,取色器有很多种,根据个人需求进行选择就好啦~

代码实现

需要使用到的css、js、img图片记得先导入到项目中

我这里用的eclipse进行编码的,但是前端的话也可以用Hbuild进行编码,博主习惯把前端和后台放在一起,方便后期查看代码~

在这里插入图片描述
在这里插入图片描述
fg.css:(所有页面的外部css样式啦)

*{
   
	margin: 0;
	padding: 0;
}
/* 搜索栏 start */
.search-parent{
   
	position: relative;
	height: 100px;
	}
.search{
   
	position: absolute;
	background-color: #D6CCBB;
	width: 1140px;
	height: 90px;	
}
.search-parent input{
   
	position: absolute;
	top: 30px;
	left: 400px;
	z-index: 2;
}
.search-parent button{
   
	position: absolute;
	top: 27px;
	left: 575px;
	z-index: 2;
}
/* 搜索栏 end */

/* 主内容区 start*/

.bg-color1{
   
	background-color: #B1120F ;
}
.bg-color2{
   
	background-color: #D9CCBB ;
}
.bg-opacity{
   
	opacity: 0.3;
}
.c-category li{
   
	cursor: pointer;
	text-align: center;
}

.guangao>img{
   
	width: 725px;	
}
.l-content{
   
	padding-right: 0;
}
.r-content{
   
	padding: 0;
}

.tip{
   
	position: relative;
	height: 40px;
	width: 725px;
	background-color:#D9CCBB;
}
.tip>img{
   
	position: absolute;
}
.tip>h5{
   
	position: absolute;
	left: 20px;
}

.book img{
   
	width: 80px;
	height: 110px;
}
.book p{
   
	margin-bottom: 0;
}
.book>div{
   
	padding: 0;
}

.shop-table-tab{
   
	margin: 0 110px;
}

导入样式之后最好现在页面上随便写点内容,看有没有效果再进行下一步,以防之后效果出不来

index.html(首页):

<!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>
					    <li class="list-group-item">惊悚</li>
						<li class
  • 6
    点赞
  • 100
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值