用HBuilder写前端样式

最新推荐文章于 2024-06-13 14:11:55 发布
最新推荐文章于 2024-06-13 14:11:55 发布
阅读量2.3k 收藏 28
点赞数 2
分类专栏： 代码 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46241057/article/details/107106905
版权

用HBuilder写前端样式


前言：当你要写样式之前，应该想想你需要了解自己所要做出来的界面样子，有哪些界面，那些功能。

一、登录与注册

第一步
导入需要的css样式和js
在这里插入图片描述
第二步
再导入需要的img图片在这里插入图片描述
第三步
先使用一个样式官网，比如：bootstrap
在这里插入图片描述

登录、注册html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>登录界面</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<style>
			.form-signin{
				position: relative;
				width: 400px;
				top: 100px;
				left: 50%;
				margin-left: -200px;
				
			}
		</style>
	</head>
	<body>
		
		<form class="form-signin">
			<div class="text-center mb-4">
			<img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">用户登录</h1>
			</div>

			<div class="form-label-group">
			<input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名" required autofocus>
			</div>

			<div class="form-label-group">
			<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
			</div>

			<div class="checkbox mb-3">
			<label>
			  <input type="checkbox" value="remember-me"> 记住密码
			</label>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
		<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
		</form>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注册界面</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<style>
			.form-signin{
				position: relative;
				width: 400px;
				top: 100px;
				left: 50%;
				margin-left: -200px;
				
			}
		</style>
	</head>
	<body>
		
		<form class="form-signin">
			<div class="text-center mb-4">
			<img class="mb-4" src="/docs/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
			<h1 class="h3 mb-3 font-weight-normal">用户注册</h1>
			</div>

			<div class="form-label-group">
			<input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名" required autofocus>
			</div>

			<div class="form-label-group">
			<input type="password" id="pwd" name="pwd" class="form-control" placeholder="请输入密码" required>
			</div>
			<button class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
		<p class="mt-5 mb-3 text-muted text-center">&copy; 2017-2020</p>
		</form>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

效果图

登录：
在这里插入图片描述
注册：
在这里插入图片描述

首页和搜索查询

效果图

首页：
在这里插入图片描述
搜索查询
在这里插入图片描述

首页和搜索查询的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="login.html">登录</a> | <a href="register.html">注册</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">
					<!-- 广告 -->
					<div class="guangao">
						<img src="img/banner.png" class="img-thumbnail" alt="...">
					</div>

					<!-- 新书上架 -->
					<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="color: red;">￥12</b>
							</div>
							<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="color: red;">￥12</b>
							</div>
							<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="color: red;">￥12</b>
							</div>
						</div>
					</div>

					<!-- 热销 -->
					<div class="hots 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="color: red;">￥12</b>
							</div>
							<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="color: red;">￥12</b>
							</div>
							<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="color: red;">￥12</b>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</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>
					</ul>
				</div>
				<div class="col-sm-9">
					<div class="media">
						<img src="img/2.png" class="align-self-center mr-3" alt="...">
						<div class="media-body">
							<p>第一商会</p>
							<p>作者：</p>
							<p>价格：￥24</p>
							<p>出版社：丛恒文学</p>
							<p>简介：三天更一章</p>
							<p>
								<button class="btn btn-danger" style="width: 150px;">加入购物车</button>
								<button class="btn btn-danger" style="width: 150px;">去结算</button>
							</p>
						</div> 						
					</div>
					<div class="media">
						<img src="img/2.png" class="align-self-center mr-3" alt="...">
						<div class="media-body">
							<p>第一商会</p>
							<p>作者：</p>
							<p>价格：￥24</p>
							<p>出版社：丛恒文学</p>
							<p>简介：三天更一章</p>
							<p>
								<button class="btn btn-danger" style="width: 150px;">加入购物车</button>
								<button class="btn btn-danger" style="width: 150px;">去结算</button>
							</p>
						</div> 						
					</div>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</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="login.html">登录</a> | <a href="register.html">注册</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">
					<table class="table">
						<thead class="thead-dark">
							<tr style="background-color: papayawhip;">
								<th scope="col">书名</th>
								<th scope="col">单价</th>
								<th scope="col">数量</th>
								<th scope="col">小计</th>
								<th scope="col">操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
								<td>Mark</td>
								<td>
									<a href="#">删除</a>&nbsp;&nbsp;
									<a href="#">更新</a>
								</td>
							</tr>
							<tr>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
								<td>Mark</td>
								<td>
									<a href="#">删除</a>&nbsp;&nbsp;
									<a href="#">更新</a>
								</td>
							</tr>
							<tr>
								<td colspan="5">
									<div class="btn btn-danger" style="width: 200px;">清空购物车</div>
									<div class="btn btn-danger shop-table-tab" style="width: 200px;">继续购物</div>
									<div class="btn btn-danger" style="width: 200px;">去结算</div>
								</td>  
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 底部版权 -->
			<div class="row">
				<div class="col-sm-12 text-center">
					Copyright 2020 教育，版权所有
				</div>
			</div>
		</div>
		<script src="js/jquery-3.3.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function() {
				$(".c-category li").eq(0).addClass('bg-color1');
				$(".c-category li:gt(0)").addClass('bg-color2');
				$(".c-category li:gt(0)").hover(function() {
					$(this).addClass('bg-opacity');
				}, function() {
					$(this).removeClass('bg-opacity');
				});
			})
		</script>
	</body>
</html>
墨江21
关注
  • 2
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HBuilder-web前端
04-03
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写
前端框架编写器HBuilder
12-11
总的来说，HBuilder作为一款强大的前端开发工具，通过其智能化的特性和全面的功能，为前端开发者带来了极大的便利。无论你是新手还是资深开发者，都可以利用HBuilder提升开发效率，实现更高效的前端开发工作。
HBuilderX 如何修改内置web服务默认的8080端口
chenzhao635的专栏
10-18 2731
参考网址:https://uniapp.dcloud.net.cn/collocation/manifest.html#devserver 网上写的 设置->运行配置->内置web服务器端口(重启后生效) 改了并不会生效还是需要修改manifest.json的的文章，web配置->前端开发服务端口 修改后重新运行就会生效。 ...
HBuilder X简易页面设计
m0_75281098的博客
06-13 596
/条件相等，js表数据装入searchContent表中。searchContent: "", //获取搜索历史内容的列表。searchVal: "", //获取输入框的内容。searchList: [], //搜索历史列表。//定义一个数组来获取本地缓存数据或者空数组。首先由首页顶部的搜索跳转到真正的搜索页面，输入内容后回车即可完成搜索。//借助id跳转到指定页面。title: '提示',//获取的缓存数据装入列表。//保存数据到本地存储。//点击历史记录时也可以帮搜索。//点击电影调整事件。
HBuilderX 三种样式
weixin_45716815的博客
10-09 7489
HBuilderX 三种样式 第一种：内联样式 写在标签开头的元素样式： 例：** 第二种：外部元素 写在<style>样式</style> 例： 第三种：Css文件关联 例： ...
HBuilder X中的三种样式及选择器
m0_74257628的博客
03-11 2469
行内样式 嵌入样式 外部样式 后代选择器 组选择器 子选择器 相邻兄弟元素 Class选择器 id选择器 通配符选择器 伪类选择器 属性选择器
HBuilderX样式大小比较
ts15286507083的博客
06-27 397
样式的三种引入方式：1.内联样式：直接在标签内style属性；......2.内部样式：在标签里加上标签，在标签内写入样式；3.外部样式：在css文件夹中新建.css文件，在.css文件中写入样式；在.html文件中用引用...
HBuilder和MyEclipse 配合进行Web开发
03-08 3555
先在磁盘上MyEclipse 的工作空间创建和要创建的工程名相同名字的的文件夹 用HBuilder 创建 名为 WebRoot 的项目,关闭HBuilder 将刚刚创建的目录,拷出来, 用MyEclipse创建工程, 将刚刚烤出来的目录复制到MyEclipse的工作空间下 刷新MyEclipse 打开HBuilder 就可尽情享受代码,带来的乐趣了
web前端开发-软件（HBuilderX）和项目代码
最新发布
06-24
"Web前端开发-软件（HBuilderX）和项目代码"这个标题指出，我们关注的焦点是Web前端开发领域，特别是涉及到一款名为HBuilderX的软件以及相关的项目代码。HBuilderX是一款流行的Web前端开发工具，它提供了丰富的功能...
前端工具HBuilder下载.zip
10-25
HBuilder是一款专为前端开发者设计的强大集成开发环境（IDE），由DCloud（数字天堂）公司推出，它集合了代码编辑、调试、预览、发布等一系列功能，极大地提升了前端开发的效率。这款工具支持HTML、CSS、JavaScript、...
前端基础+hbuilderx+html+前端基础.zip
12-24
在IT行业中，前端开发是构建Web应用程序不可或缺的一部分，它涉及到用户与网站或应用程序...学习和熟练掌握这些技能是成为合格前端开发者的第一步，而使用高效的开发工具如HBuilderX，则能进一步提升开发效率和质量。
Hbuilder护眼主题
11-12
Hbuilder护眼主题 Sublime还有Webstorm有很多主题，但是Hbuilder就相对较少，或者直接说基本没什么主题，在网上搜索了很久也很少有Hbuilder的主题分享，于是就自己取色调了一个仿的护眼主题来分享一下，希望能帮助到和我一样想换主题的朋友~
HBuilder安装包
04-08
HBuilder是一款专为前端开发者设计的集成开发环境（IDE），由DCloud（数字天堂）公司推出，它以其高效、便捷的特性在Web开发领域中深受青睐。HBuilder8.8.0是该软件的一个版本，提供了对HTML、CSS、JavaScript等前端...
【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
JMFive的博客
03-27 4401
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
HbuilderX前端开发工具的安装和配置
热门推荐
qq_23257451的博客
08-25 1万+
学习uniapp，使用HbuilderX编译器来按照官网的文档学习是最快速的，所以配置好开发工具，学习起来事半功倍，下面主要记录工具安装、微信开发者工具配置，真机配置、安卓模拟器配置以及遇到的问题。......
HTML5全局属性和其他
qq_40084390的博客
05-12 142
1.实体属性 2.元数据元素 元素可以定义文档中的各种元数据，而且一个 HTML 页面可以包含多个 元素。 3.全局属性
HBuilderX 开发工具，主题自定义， 代码颜色自定义
Hustles的博客
01-22 2357
【代码】HBuilderX 开发工具，主题自定义， 代码颜色自定义。
HBuilder宝藏背景主题颜色分享+如何拥有属于自己的HBuilder主题+做法
Xmumu_的博客
08-09 8688
欢迎来到编译器背景图频道???????????? 今天给大家分享几个HBuilder我本人常用也非常喜欢的背景主题，下面是效果： 紫浅粉主题???? { "editor.caretWidth" : 1, "editor.colorScheme" : "Default", "editor.wordWrap" : true, "explorer.autoReveal" : true, "explorer.iconTheme" : "hx-file-icons-color
记myeclipse中导入的css样式表图片不显示问题
xqqheidou的博客
06-05 2325
我之前在Hbuilder中写好了几个html和css文件，后来要连接数据库，为了方便一点就把文件导入了myeclipse里面，后来运行发现，图片不显示，我查了很多，都说是路径问题，其实我的路径是没有错的，一开始我的图片名字是中文的，而且我改了myeclipse的语言，我改成了中文的GBK，运行就是图片不出来，然后我突然发现是不是图片名不能是中文的，然后我把图片名改成英文的，改的myeclipse语...
hbuilder前端写表单详细
05-24
你可以使用CSS来美化表单的样式，例如修改输入框的颜色、字体、边框等。你也可以使用JavaScript来对表单进行验证和提交操作。 在HBuilder中，你可以通过拖拽组件快速创建表单，也可以手动编写HTML代码来创建表单。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值