用HBuilder写前端样式

技术2023-08-30 122

用HBuilder写前端样式

一、登录与注册登录、注册html效果图首页和搜索查询效果图首页和搜索查询的html 购物车效果图代码前言：当你要写样式之前，应该想想你需要了解自己所要做出来的界面样子，有哪些界面，那些功能。

一、登录与注册

第一步导入需要的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">© 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">© 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>   <a href="#">更新</a> </td> </tr> <tr> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td>Mark</td> <td> <a href="#">删除</a>   <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>

Processed: 0.014, SQL: 9