JavaWeb---Day 08

最新推荐文章于 2024-05-29 11:35:13 发布
最新推荐文章于 2024-05-29 11:35:13 发布
阅读量211 收藏 2
点赞数
分类专栏： JavaWeb 文章标签： 前端 html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49544301/article/details/130565525
版权

目录

一、bootstrap栅格系统

二、轮播图

三、案例：实现简单页面

一、bootstrap栅格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>栅格系统-布局</title>
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
	</head>
	<body>
		<!-- 铺满整个页面 -->
		<div class="container-fluid">
			<div class="row">
				<div class="col-sm" style="background-color: #0F6674;">000</div>
				<div class="col-sm" style="background-color: goldenrod;">000</div>
				<div class="col-sm" style="background-color: sienna;">000</div>
			</div>
		</div>
		<!-- 左右留有空白 -->
		<div class="container">
			<!-- 等宽布局 -->
			<div class="row">
				<div class="col-sm" style="background-color: red;">111</div>
				<div class="col-sm-3" style="background-color: hotpink;">111</div>
				<div class="col-sm-4" style="background-color: darkcyan;">111</div>
				<div class="col-sm" style="background-color: yellow;">111</div>
			</div>
			<!-- 固定布局 -->
			<div class="row">
				<div class="col-lg-4 col-sm-4 col-md-4 col-xl-4" style="background-color: #005CBF;">222</div>
				<div class="col-lg-5 col-sm-5 col-md-5 col-xl-5" style="background-color: #155724;">222</div>
				<div class="col-lg-3 col-sm-3 col-md-3 col-xl-3" style="background-color: darkgoldenrod;">222</div>
			</div>
			<!-- 自动分配 -->
			<div class="row">
				<div class="col-3" style="background-color: #117A8B;">333</div>
				<div class="col-auto" style="background-color: firebrick;">33333333333333333333333333333333333</div>
				<div class="col-3" style="background-color: greenyellow;">333</div>
			</div>
			<!-- 嵌套 -->
			<div class="row">
				<div class="col-3" style="background-color: #F1B0B7;">444</div>
				<div class="col-9">
					<div class="row">
						<div class="col-4" style="background-color: navajowhite;">555</div>
						<div class="col-4" style="background-color: saddlebrown;">555</div>
						<div class="col-4" style="background-color: #F8D7DA;">555</div>
					</div>
				</div>
			</div>
			<!-- 上下左右对齐 -->
			<div class="row" style="height: 100px;">
				<div class="col align-self-start" style="background-color: darkgoldenrod;">666</div>
				<div class="col align-self-center" style="background-color: gold;">666</div>
				<div class="col align-self-end" style="background-color: darkkhaki;">666</div>
			</div>
		</div>
	</body>
</html>

二、轮播图 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>轮播图</title>
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
	</head>
	<body>
		<div class="container">
			<!-- 轮播图插件 -->
			<div id="lb" class="carousel slide" data-ride="carousel" style="width: 800px;">
				<ol class="carousel-indicators">
				    <li data-target="#lb" data-slide-to="0" class="active"></li>
				    <li data-target="#lb" data-slide-to="1"></li>
				    <li data-target="#lb" data-slide-to="2"></li>
				    <li data-target="#lb" data-slide-to="3"></li>
				    <li data-target="#lb" data-slide-to="4"></li>
				</ol>

				<!-- 轮播的所有图片 -->
				<div class="carousel-inner">
					<!-- 第一张图 active必须有 -->
					<div class="carousel-item active">
						<img src="../img/01.png" />
					</div>
					<!-- 第二张图 -->
					<div class="carousel-item">
						<img src="../img/02.png" />
					</div>
					<!-- 第三张图 -->
					<div class="carousel-item">
						<img src="../img/03.png" />
					</div>
					<!-- 第四张图 -->
					<div class="carousel-item">
						<img src="../img/04.png" />
					</div>
					<!-- 第五张图 -->
					<div class="carousel-item">
						<img src="../img/05.png" />
					</div>
				</div>
				<button class="carousel-control-prev" type="button" data-target="#lb" data-slide="prev">
				    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
				    <span class="sr-only">Previous</span>
				</button>
				<button class="carousel-control-next" type="button" data-target="#lb" data-slide="next">
				    <span class="carousel-control-next-icon" aria-hidden="true"></span>
				    <span class="sr-only">Next</span>
				</button>
			</div>
		</div>
	</body>
</html>

三、案例：实现简单页面

效果图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>建档网页</title>
		<style type="text/css">
			.sr{
				float: left;
				margin-top: 50px;
				margin-left: 40px;
				width: 450px;
				height: 35px;
				padding-left: 15px;
				border: 2px solid #FFC901;
			}
			.ss{
				float: left;
				width: 70px;
				height: 35px;
				margin-top: 50px;
				text-align: center;
				line-height: 35px;
				background-color: #FFC901;
			}
			.hqyj{
				margin-top: 10px;
				margin-left: 10px;
			}
			.dhl{
				margin-left: 20px;
			}
			.jxhq{
				border-bottom: 2px #FFC901 solid;
			}
			.zjtp{
				margin-top: 10px;
				margin-left: 10px;
			}
		</style>
		<link type="text/css" rel="stylesheet" href="../css/bootstrap.css" />
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.js"></script>
	</head>
	<body>
		<!-- 铺满页面 -->
		<head class="container-fluid">
			<!-- 头部 -->
			<div class="row">
				<img class="w-100" src="../img/top_banner.jpg" />
			</div>
			<!-- 搜索 -->
			<div class="row">
				<div class="col-3">
					<img class="hqyj" src="../img/logo.jpg" />
				</div>
				<div class="col-6">
					<input class="sr" type="text" placeholder="请输入内容"/>
					<a class="ss" href="#">搜索</a>
				</div>
				<div class="col-3">
					<img class="hqyj" src="../img/hotel_tel.png" />
				</div>
			</div>
			<!-- 导航栏 -->
			<div class="dhl">
				<nav class="navbar navbar-expand-lg navbar-light bg-light">
				  <a class="navbar-brand" href="#">hqyj</a>
				  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				  </button>
				
				  <div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav mr-auto">
					  <li class="nav-item active">
						<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
					  </li>
					  <li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					  </li>
					  <li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					  </li>
					  <li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					  </li>
					  <li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					  </li>
					  <li class="nav-item">
						<a class="nav-link" href="#">Link</a>
					  </li>
				  </div>
				</nav>
			</div>
			<!-- 轮播图 -->
			<!-- 轮播图插件 -->
			<div id="lb" class="carousel slide" data-ride="carousel" >
				<ol class="carousel-indicators">
				    <li data-target="#lb" data-slide-to="0" class="active"></li>
				    <li data-target="#lb" data-slide-to="1"></li>
				    <li data-target="#lb" data-slide-to="2"></li>
				</ol>
				<!-- 轮播的所有图片 -->
				<div class="carousel-inner">
					<!-- 第一张图 active必须有 -->
					<div class="carousel-item active">
						<img class="d-block w-100" src="../img/banner_1.jpg" />
					</div>
					<!-- 第二张图 -->
					<div class="carousel-item">
						<img class="d-block w-100" src="../img/banner_2.jpg" />
					</div>
					<!-- 第三张图 -->
					<div class="carousel-item">
						<img class="d-block w-100" src="../img/banner_3.jpg" />
					</div>
				</div>
			</div>
		</head>
		<!-- 中间两边留空间 -->
		<div class="container">
			<!-- 中间 -->
			<div class="jxhq">
				<img class="zjtp" src="../img/icon_6.jpg" />精选
			</div>
			<div class="row" style="margin-top: 10px;">
				<div class="col-3">
					<div class="img-thumbnail">
						<img class="img-fluid" src="../img/jiangxuan_1.jpg" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span style="color: red;">￥699</span>
					</div>
				</div>
				<div class="col-3">
					<div class="img-thumbnail">
						<img class="img-fluid" src="../img/jiangxuan_2.jpg" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span style="color: red;">￥699</span>
					</div>
				</div>
				<div class="col-3">
					<div class="img-thumbnail">
						<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span style="color: red;">￥699</span>
					</div>
				</div>
				<div class="col-3">
					<div class="img-thumbnail">
						<img class="img-fluid" src="../img/jiangxuan_4.jpg" />
						<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
						<span style="color: red;">￥699</span>
					</div>
				</div>
			</div>
			<div>
				<div class="jxhq">
					<img class="zjtp" src="../img/icon_5.jpg" />环球
				</div>
				<!-- 外层一行 -->
				<div class="row" style="margin-top: 10px;">
					<div class="col-4">
						<div>
							<img class="img-fluid" src="../img/guonei_1.jpg" />
						</div>
					</div>
					<div class="col-8">
						<!-- 嵌套第一行 -->
						<div class="row">
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
						</div>
						<!-- 嵌套第二行 -->
						<div class="row">
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
							<div class="col-4">
								<div class="img-thumbnail">
									<img class="img-fluid" src="../img/jiangxuan_3.jpg" />
									<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
									<span style="color: red;">￥699</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<footer class="container" style="margin-top: 10px;">
			<img class="w-100" src="../img/footer_service.png" />
		</footer>
	</body>
</html>

小麦穗呀
关注
专栏目录
javaWeb登录界面Jquery请求+图片轮播
12-29
简单的登录界面，前端登录界面后端Java返回用户验证，主界面图片轮播及div标签局部根据后端数据动态生成html
Java Web-----轮播图的实现
q303705455的博客
11-06 1万+
轮播图的实现可以用多种方法，只用CSS可以实现，用Javascript也可以实现。 不过实现出来的效果也是多种多样的。 这篇是用Javascript对轮播图的实现 轮播图的实现 图片板块 a. 首先，开辟一轮播图存放的板块，用ul，li来实现图片的存放 b.确保ul的长度放的下这5张图，并修改样式，使得图片水平排列并去除ul，li的样式等 按钮板块的样式 a.设置与图片数量相等的按钮，首先设...
BootStrap4：栅格系统
分享日常工作技术
03-28 799
可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。Bootstrap4 总共有五个栅格等级，每个响应式分界点隔出一个等级。使用响应式的.offset-*栅格偏移方法。
【基础】秒懂栅格系统
最新发布
weixin_42197971的博客
05-29 1193
一文实现Web端栅格系统设计入门
【Java 进阶篇】深入了解 Bootstrap 栅格系统
繁依Fanyi的博客
10-20 519
Bootstrap 栅格系统是一种基于12列网格的布局系统。这意味着您可以将页面划分为12个等宽的列，然后将内容放入这些列中。通过在不同的屏幕宽度上定义不同的列宽，您可以轻松创建响应式布局，以适应不同设备的屏幕大小，例如桌面、平板和手机。栅格系统的核心思想是将页面划分为行（row）和列（col每行可以包含一个或多个列，列的宽度总和不能超过12列。这使得网页布局变得非常灵活，同时确保内容在各种屏幕上以一致的方式呈现。
JavaWeb-day01-数据库基础.xmind
11-05
JavaWeb-day01-数据库基础.xmind
javaweb-day20每日作业卷1
08-08
【JavaWeb每日作业卷20】涉及的知识点主要围绕MySQL数据库操作，包括聚合函数的使用、数据库备份恢复、分组查询、表字段约束以及多表设计。以下是对这些知识点的详细说明： 1. **聚合函数**： - `COUNT()`: 统计非...
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
javaweb-day20每日作业卷答案1
08-08
在Java Web开发中，数据库设计是非常重要的一环。在本日的作业中，主要涵盖了数据库表字段的一些关键约束以及如何在MySQL中实现这些约束。同时，还涉及了SQL查询中的聚合函数、数据库备份与恢复以及分组查询的概念和...
javaweb-mysql day19每日作业卷1
08-08
在JavaWeb开发中，MySQL是一个常见的关系型数据库管理系统，用于存储和管理应用程序的数据。在本日的作业中，我们主要涉及了MySQL的安装、配置、连接以及基本的SQL操作。 1. **MySQL的安装与服务管理**： - 安装...
用java代码写的图片轮播，方便调用
han478270575的博客
11-30 8964
package com.sxt.view; import java.util.List; import com.sxt.net.img.ImageLoad; import android.content.Context; import android.graphics.Bitmap; import android.os.Handler; import andro
采用jsp来实现一个轮播图
热门推荐
青之羽
11-05 2万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 轮播图的实现 /* 对全部标签对象进行初始化操作 */ *::selection {/*即点击全部的任何标签插件时都不会有背景颜色，因为默认的标签对象当中当进行多次点击操作时会出现背景色*/
java Web第一章学习内容（使用jquery制作轮播图）
JayVergil的博客
06-13 1488
学习内容：一.使用jquery制作轮播图1.定时函数 var timer = setInterval(run,5000);2.淡入淡出效果 fadeIn(500)；fadeOut(500);3.找到指定元素 eq(c)；4.兄弟元素 siblings('li');5.清理定时器 clearInterval(timer);6.鼠标进入后执行方法 mouseenter思路：     ...
Java-轮播图
给你更好的
08-11 4643
设计思路： 1、定时器的设计 2、图片指示器的设计绘制 3、图片尺寸比例适中绘制 code： package my; /*图片面板绘制*/ import java.awt.BasicStroke; import java.awt.Color; import java.awt.Graphics; import java.awt.Graphics2D; import java....
JAVAWEB-js实现轮播图和二级菜单
qq_42072733的博客
07-13 2813
简单美食网站的demonotice：1.二级菜单需设置绝对定位并将其z-index值加大，母栏设置相对定位              2.轮播图部分设置定时器，通过改变函数来控制图片的原路径成果展示：      &lt;!DOCTYPE html&gt; ...
java web-3.2Bootstrap_栅格系统
weixin_39795049的博客
03-06 318
栅格系统-入门 1.响应式布局：同一套页面可以兼容不同分辨率的设备 2.实现：依赖于栅格系统（栅格系统：将一行平均分为12个格子，可以指定元素占几个格子） 3.步骤： 定义容器。相当于之前的table 容器分类： container 和container-fluid 定义行。相当于之前的tr 样式：row 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号...
JavaEE学习日志(四十五): bootstrap，栅格系统
Sakuraaaaaaa的博客
03-17 321
JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇） JavaEE学习日志（四十五）bootstrapbootstrap导入bootstrap基本模板栅格系统栅栏系统小屏幕栅栏系统超小屏幕栅栏系统隐藏全局CSS组件JavaScript插件 bootstrap bootstrap导入 去官网下载，第一个为开发用，第二个既可以开发又有源码。 下载完后导入到自己的web...
实现网站常见的轮播图
Javaxiaobaismc的博客
03-28 3736
一、大致思路： 先创建一个div，限定其宽度和高度，overflow：hidden，且设置其position为relative（相对位置）。 然后创建一个装图片的div，宽度为所有图片的总宽度，且设置其position为absolute（绝对位置），并且使其中的内容浮动（float: left;），这样所有的图片就处于一行中。 然后为了实现无缝滚动，所以需要在首尾分别添加一张过渡图片。 先...
JSTL标签库与JavaWeb安全实践：崔西凡笔记第13-15天
崔西凡的JavaWeb笔记涵盖了从第13天到第15天的学习内容，主要聚焦于JSTL（JavaServer Pages Standard Tag Library）技术，这是一个广泛应用于Java Web开发中的强大工具集。JSTL由Apache提供，其核心库是开发的关键...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值