navbar-default .navbar-default:导航栏默认样式，用于<nav>元素。
navbar-brand（logo栏）.navbar-brand:设置品牌图标样式。（放置LOGO）
navbar-text.navbar-text:对于导航栏的普通文本有了行距和颜色，通常用于<p>元素。（同一行显示）
header.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/comm.css"/>
<link rel="stylesheet" href="css/header.css"/>
</head>
<body>
<div class="container">
<!-- 上半部分 -->
<div class="row no-gutters">
<!-- 左-->
<div class="col-lg-3 col-sm-12">
<a class="navbar-brand" href="">
<img src="img/header/logo.png" alt=""/>
</a>
</div>
<!-- 中-->
<div class="col-lg-6 col-sm-12 mt-2">
<div class="input-group">
<input class="form-control border-primary rounded-0 font-small py-0" type="text" placeholder="请输入您要搜索的内容"/>
<img src="img/header/search.png" alt=""/>
</div>
</div>
<!-- 右-->
<div class="col-lg-3 col-sm-12">
<ul class="breadcrumb bg-transparent pr-0 pl-sm-0 pl-lg-4">
<li class="breadcrumb-item">
<a href="">
<img src="img/header/care.png" alt=""/>
</a>
</li>
<li class="breadcrumb-item">
<a href="">
<img src="img/header/order.png" alt=""/>
</a>
</li>
<li class="breadcrumb-item">
<a href="">
<img src="img/header/shop_car.png" alt=""/>
</a>
</li>
<li class="breadcrumb-item">
<a class="text-muted font-small" href="">登录</a>
</li>
<li class="breadcrumb-item">
<a class="text-muted font-small" href="">注册</a>
</li>
</ul>
</div>
</div>
<!-- 下半部分,导航-->
<ul class="nav ">
<li class="nav-item">
<a href="" class="nav-link text-muted font-small pl-sm-0 pl-lg-4">首页</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text-muted font-small">学习用品</a>
</li>
<li class="nav-item">
<a href="" class="nav-link text-muted font-small">私人订制品</a>
</li>
</ul>
</div>
</body>
</html>
footer.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/comm.css"/>
<link rel="stylesheet" href="css/footer.css"/>
</head>
<body>
<div class="container">
<ul class="d-flex list-unstyled py-5 justify-content-around">
<li>
<img src="img/footer/icon1.png" alt=""/>
<p class="text-muted font-small text-center">品质保障</p>
</li>
<li>
<img src="img/footer/icon2.png" alt=""/>
<p class="text-muted font-small text-center">私人订制</p>
</li>
<li>
<img src="img/footer/icon3.png" alt=""/>
<p class="text-muted font-small text-center">学院特供</p>
</li>
<li>
<img src="img/footer/icon4.png" alt=""/>
<p class="text-muted font-small text-center">专属特权</p>
</li>
</ul>
<div class="row bg-white pt-5">
<!-- 左-->
<div class="col-lg-4 col-sm-12 text-sm-center text-lg-left p-lg-0">
<p>
<img src="img/footer/logo.png" alt=""/>
</p>
<p><img src="img/footer/footerFont.png" alt=""/></p>
</div>
<!-- 中-->
<div class="col-lg-4 col-sm-12 text-center">
<div class="row">
<div class="col-4">
<h6><a class="text-dark" href="">买家帮助</a></h6>
<ul class="list-unstyled">
<li>
<a class="text-muted font-small" href="">新手指南</a>
</li>
<li>
<a class="text-muted font-small" href="">服务保障</a>
</li>
<li>
<a class="text-muted font-small" href="">常见问题</a>
</li>
</ul>
</div>
<div class="col-4">
<h6><a class="text-dark" href="">商家帮助</a></h6>
<ul class="list-unstyled">
<li>
<a class="text-muted font-small" href="">商家入驻</a>
</li>
<li>
<a class="text-muted font-small" href="">商家后台</a>
</li>
</ul>
</div>
<div class="col-4">
<h6><a class="text-dark" href="">关于我们</a></h6>
<ul class="list-unstyled">
<li>
<a class="text-muted font-small" href="">关于达内</a>
</li>
<li>
<a class="text-muted font-small" href="">联系我们</a>
</li>
<li class="pl-2">
<a href=""><img src="img/footer/wechat.png" alt=""/></a>
<a href=""><img src="img/footer/sinablog.png" alt=""/></a>
</li>
</ul>
</div>
</div>
</div>
<!-- 右-->
<div class="col-lg-4 col-sm-12">
<div class="row no-gutters text-center">
<div class="col-6">
<h6>学子商城客户端</h6>
<p class="mb-1"><img src="img/footer/ios.png" alt=""/></p>
<p><img src="img/footer/android.png" alt=""/></p>
</div>
<div class="col-6">
<img src="img/footer/erweima.png" alt=""/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
index.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/comm.css"/>
<link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<header class="mt-3">
<iframe class="my_header" src="header.html" scrolling="no" frameborder="0"></iframe>
</header>
<div class="container">
<!-- 轮播图-->
<div id="demo" class="carousel" data-ride="carousel">
<!-- 图片-->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="img/index/banner1.png" alt=""/>
</div>
<div class="carousel-item">
<img class="w-100" src="img/index/banner2.png" alt=""/>
</div>
<div class="carousel-item">
<img class="w-100" src="img/index/banner3.png" alt=""/>
</div>
<div class="carousel-item">
<img class="w-100" src="img/index/banner4.png" alt=""/>
</div>
</div>
<!-- 指示器-->
<ul class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#demo"></li>
<li data-slide-to="1" data-target="#demo"></li>
<li data-slide-to="2" data-target="#demo"></li>
<li data-slide-to="3" data-target="#demo"></li>
</ul>
<!-- 左右箭头-->
<a href="#demo" data-slide="prev" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#demo" data-slide="next" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<!-- 1L-->
<div class="border-bottom mt-2 p-2">
<img src="img/index/computer_icon.png" alt=""/>
<span class="title-font">首页推荐/1F</span>
</div>
<div class="row no-gutters mt-2">
<div class="col-lg-7 col-md-12">
<div class="my_top bg-dark mr-lg-1 mb-1">
<table></table>
<div class="card border-0 bg-transparent w-50 p-3 mt-5 ml-5" >
<h3 class="mb-0">Apple MacBook Air系列</h3>
<h6 class="text-muted font-small mb-4">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</h6>
<span class="text-primary mb-3 h5">￥6988.00</span>
<a class="btn btn-primary w-50" href="">查看详情</a>
</div>
<img class="img1_position" src="img/index/study_computer_img1.png" alt=""/>
</div>
</div>
<div class="col-lg-5 col-md-12">
<div class="my_top bg-dark mb-1"></div>
</div>
<div class="col-lg-5 col-md-12">
<div class="my_bottom bg-dark mb-md-1 mb-lg-0 mr-lg-1"></div>
</div>
<div class="col-lg-7 col-md-12">
<ul class="row list-unstyled no-gutters">
<li class="col-4">
<div class="my_bottom bg-dark mr-1"></div>
</li>
<li class="col-4">
<div class="my_bottom bg-dark mr-1"></div>
</li>
<li class="col-4">
<div class="my_bottom bg-dark"></div>
</li>
</ul>
</div>
</div>
</div>
<footer>
<iframe class="my_footer" src="footer.html" scrolling="no" frameborder="0"></iframe>
</header>
</footer>
</body>
</html>
product_list.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/comm.css"/>
<link rel="stylesheet" href="css/product_list.css"/>
</head>
<body>
<header class="mt-3">
<iframe class="my_header" src="header.html" scrolling="no" frameborder="0"></iframe>
</header>
<div class="container">
<!-- 大banner-->
<div>
<img class="w-100" src="img/index/index_guild.png" alt=""/>
</div>
<!-- 主体列表-->
<div class="row mt-2">
<!-- 左-->
<div class="col-md-9 col-sm-12">
<!-- 标题栏-->
<h6 class="text-muted p-2 bg_gray font-small">笔记本电脑</h6>
<!-- 列表详情-->
<div class="row bg-white mx-0">
<!-- 1.使用card,2.lg>3 md>2 sm>1-->
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card">
<a href="">
<img class="w-100" src="img/product/md/5913f8ffN49fa143c.jpg" alt=""/>
</a>
<h5 class="text-primary">￥6988.00</h5>
<a class="text-muted font-small" href="">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</a>
<div class="my-2 d-flex justify-content-around align-items-center">
<button class="border-0 text-white font-weight-bold">－</button>
<input class="my_input" type="text" value="1"/>
<button class="border-0 text-white font-weight-bold">＋</button>
<a class="btn btn-primary btn-sm text-white" href="">加入购物车</a>
</div>
</div>
</div>
</div>
<!-- 分页条-->
<div class="bg_gray p-2 mt-2">
<ul class="mb-0 pagination justify-content-end pagination-sm">
<li class="page-item disabled">
<a class="page-link bg-transparent" href="">上一页</a>
</li>
<li class="page-item active">
<a class="page-link bg-transparent" href="">1</a>
</li>
<li class="page-item">
<a class=" page-link bg-transparent" href="">2</a>
</li>
<li class="page-item">
<a class="page-link bg-transparent" href="">3</a>
</li>
<li class="page-item">
<a class="page-link bg-transparent" href="">4</a>
</li>
<li class="page-item">
<a class="page-link bg-transparent" href="">5</a>
</li>
<li class="page-item">
<a class="page-link bg-transparent" href="">下一页</a>
</li>
</ul>
</div>
</div>
<!-- 右-->
<div class="col-md-3 col-sm-12">
<h6 class="text-muted p-2 bg_gray font-small">
<img src="img/foodstore/foodstore_icon2.png" alt=""/>
商家公告</h6>
<div class="bg-white text-muted font-small p-3">
<p class="mb-1">本店推出全网最低价套餐，保证比其他平台的价格要低！</p>
<p class="mb-1">不要葱、姜、蒜等这些忌口暂时无法坐不了，敬请谅解！</p>
<p class="mb-1">晚上10点以后订餐需另加送餐费2元！谢谢合作！</p>
</div>
<!-- 购物车-->
<ul class="list-group mt-4">
<li class="list-group-item d-flex justify-content-between bg_gray p-1">
<span class="text-muted font-small">购物车</span>
<a class="text-muted font-small" href="">清空</a>
</li>
<li class="list-group-item d-flex p-1 justify-content-between border-top">
<span class="text-truncate ">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</span>
<button class="my_btn">－</button>
<input class="my_input" value="1" type="text"/>
<button class="my_btn">＋</button>
<span class="">¥6999.00</span>
</li>
<li class="list-group-item d-flex p-1 justify-content-between border-top">
<span class="text-truncate ">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</span>
<button class="my_btn">－</button>
<input class="my_input" value="1" type="text"/>
<button class="my_btn">＋</button>
<span class="">¥6999.00</span>
</li>
<li class="list-group-item d-flex p-1 justify-content-between border-top">
<span class="text-truncate ">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</span>
<button class="my_btn">－</button>
<input class="my_input" value="1" type="text"/>
<button class="my_btn">＋</button>
<span class="">¥6999.00</span>
</li>
<li class="list-group-item d-flex p-1 justify-content-between border-top">
<span class="text-truncate ">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</span>
<button class="my_btn">－</button>
<input class="my_input" value="1" type="text"/>
<button class="my_btn">＋</button>
<span class="">¥6999.00</span>
</li>
<li class="list-group-item d-flex p-1 justify-content-between border-top">
<span class="text-truncate ">Apple MacBook Air 13.3英寸笔记本 银色(Core i5 处理器/8GB内存/128GB SSD闪存 MMGF2CH/A)</span>
<button class="my_btn">－</button>
<input class="my_input" value="1" type="text"/>
<button class="my_btn">＋</button>
<span class="">¥6999.00</span>
</li>
<li class="list-group-item d-flex justify-content-between p-0 bg-secondary">
<h5 class="mb-0 text-white pt-2">
<img src="img/foodstore/foodstore_car_2.png" alt=""/>
￥:34853.00
</h5>
<a class="bg-primary text-white p-2" href="">去结算</a>
</li>
</ul>
</div>
</div>
</div>
<footer>
<iframe class="my_footer" src="footer.html" scrolling="no" frameborder="0"></iframe>
</header>
</footer>
</body>
</html>
comm.css
body {
background-color: #f5f5f5; }
.font-small {
font-size: 0.8rem; }
.my_header,.my_footer{
width:100%;
}
@media (min-width:576px) {
.my_header{height:12rem;}
.my_footer{height:40rem;}
}
@media (min-width:992px) {
.my_header{height:6rem;}
.my_footer{height:24rem;}
}
header.css
.breadcrumb-item + .breadcrumb-item::before{
content:"|";
}
index.css
.carousel-indicators li{
border-radius: 50%;
background:#fff;
}
.carousel-indicators .active{
background:#0aa1ed;
}
@media (min-width:576px) {
.carousel-indicators li{
width:0.5rem;height:0.5rem;}
}
@media (min-width:992px) {
.carousel-indicators li{
width:0.8rem;height:0.8rem;}
}
.carousel-control-prev,
.carousel-control-next{
width:4%;height:20%;
top:40%;
background:rgba(0,0,0,.3);
border-radius: 0.25rem;
}
.border-bottom{border-width:0.15rem !important;}
.title-font{
font-size:1.4rem;
font-weight: bold;
color:#666;
margin-left:0.25rem;
}
.my_top{height:377px;}
.my_bottom{height:233px;}
.bg-dark{background-color:#e8e8e8 !important;}
.img1_position{
float:right;
transition: 1s;
}
.img1_position:hover{
transform: scale(1.1);
}
@media (min-width:576px) {
.img1_position{
margin-top:-230px;
margin-right:30px;
}
}
@media (min-width:768px) {
.img1_position{
margin-top:-200px;
margin-right:30px;
}
}
@media (min-width:992px) {
.img1_position{
margin-top:-230px;
margin-right:20px;
}
}
product_css
.bg_gray{
background-image: linear-gradient(to bottom,#f0f0f0,#e0e0e0);
}
.my_input{
width:10%;
border:0; outline: 0;
}
.page-link{border-radius: 0.25rem;
border-color:#ccc;
}
.page-item+.page-item{margin-left:0.4rem;}
.page-link:hover{border-color: #007bff;}
.page-item.active .page-link{background-color:#007bff !important;}
.border-top{border-top-style: dashed !important;}
.my_btn{
width:1.2rem;height:1.2rem;
border:0;outline:0;
color:#fff;
font-weight: bolder;
padding:0;
text-align: center;
vertical-align: middle;
}
.my_input{
width:60%;
border:0;outline:0;
text-align: center;
}
