（28）-- 制作简易商品列表页

最新推荐文章于 2022-07-16 13:50:35 发布

Fredreck1919

最新推荐文章于 2022-07-16 13:50:35 发布

阅读量2.1k

点赞数

分类专栏： Web基础文章标签： Bootstrap

本文链接：https://blog.csdn.net/Fredreck1919/article/details/79146558

版权

本文介绍了如何利用Bootstrap框架创建一个简单的商品列表页面，适合初学者了解和实践。

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

#用Bootstrap制作简易商品列表页

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品列表</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">	
	<style>
		body,ul,li{
			padding: 0px;
			margin: 0px;
			list-style: none;
		}
		body{
			height: 2000px;
			padding-top:20px;
		}
		.item1,.item2,.item3,.item4{
      width: 186px;
      height: 140px;
      float: left;
    }
    .item5{
      width: 200px;
      height: 140px;
      float: right;
    }
    .item6{
      width: 40%px;
      height: 25px;
      float: left;
    }
    .item7{
      width: 20%px;
      height: 25px;
      float: left;
    }
	</style>
	<link rel="stylesheet" href="./public/css/bootstrap.min.css">
	<script src="./public/js/jQuery.1.12.4.js"></script>
	<script src="./public/js/bootstrap.min.js"></script>

	
</head>
<body>
	<div class="container-fluid">
		<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">OPPO</a>
    </div>

    <!-- Collect the nav

最低0.47元/天解锁文章

Fredreck1919

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
（28）-- 制作简易商品列表页

#用Bootstrap制作简易商品列表页商品列表 body,ul,li{ padding: 0px; margin: 0px; list-style: none; } body{ height: 2000px; padding-top:20px; } .item1,.item2,.item3,.item4{
复制链接

扫一扫

专栏目录