JAVAWEB复习知识六：根据Bootstrap框架做网站首页

最新推荐文章于 2024-04-21 06:30:00 发布

Ingeauer俊

最新推荐文章于 2024-04-21 06:30:00 发布

阅读量306

点赞数

分类专栏： JavaWeb复习

本文链接：https://blog.csdn.net/weixin_45246666/article/details/109119067

版权

案例：旅游网站首页几个要点：1、利用class=“row”属性进行分行2、利用标签进行分块3、若最外层的div可以分为12个格子，可以两块div，则第一块div占4个格子，第二个div占8个格子；且第二个div分为两行，则每行又可分为12个格子，每张图片可以占3个格子.<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equi

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

案例：旅游网站首页

几个要点：
1、利用class=“row”属性进行分行
2、利用

标签进行分块
3、若最外层的div可以分为12个格子，可以两块div，则第一块div占4个格子，第二个div占8个格子；且第二个div分为两行，则每行又可分为12个格子，每张图片可以占3个格子.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <style>
        .paddtop{
   
            padding-top: 10px;
        }
        .search-btn{
   
            float: left;
            border:1px solid #ffc900;
            width:50px;
            height:35px;
            background-color: #ffc900;
            text-align: center;
            line-height: 35px;
            margin-top: 15px;
        }
        .search-input{
   
            float: left;
            border:2px solid #ffc900;
            width:400px;
            height:35px;
            padding-left:5px;
            margin-top: 15px;
        }
        .jx{
   
            border-bottom: 2px solid #ffc900;
            padding: 5px;
        }
        .company{
   
            height: 40px;
            background-color: #ffc900;
            text-align: center;
            line-height: 40px;
            font-size: 8px;
        }
    </style>


</head>
<body>
<!--    1.页眉部分-->
    <header class="container-fluid">
        <div class="row">
            <img src="image/top_banner.jpg" class="img-responsive">
        </div>
        >
        <div class="row paddtop">
            <div class="col-md-3">
                <img src="image/logo.jpg">
             </div>

            <div class="col-md-5">
                <input class="search-input" placeholder="请输入陷入名称">
                <a class="search-btn" href="#">搜索</a>
            </div>

            <div class="col-md-4">
                <img src="image/hotel_tel.png" class="img-responsive">
            <

最低0.47元/天解锁文章

Ingeauer俊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB复习知识六：根据Bootstrap框架做网站首页

案例：旅游网站首页几个要点：1、利用class=“row”属性进行分行2、利用标签进行分块3、若最外层的div可以分为12个格子，可以两块div，则第一块div占4个格子，第二个div占8个格子；且第二个div分为两行，则每行又可分为12个格子，每张图片可以占3个格子.<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equi
复制链接

扫一扫