Java项目入门开发实战

Gliry小姐

已于 2022-11-28 15:44:19 修改

阅读量481

点赞数 1

分类专栏：头歌文章标签： java 前端 bootstrap

于 2022-11-28 15:32:31 首次发布

本文链接：https://blog.csdn.net/m0_53450409/article/details/128080783

版权

头歌专栏收录该内容

5 篇文章 1 订阅

订阅专栏

博客系统 - 系统简介与首页设计

来源：头歌教学平台

第一关：

本关任务：用Bootstrap实现PC端的博客头部效果。

编程要求

在右侧代码框中，填充begin至end之间的代码，完成博客首页在中等屏幕下头部的效果，要求如下：

logo部分占2格，没有列偏移；
首页-资源部分占4格，没有列偏移；
搜索框部分占3格，没有列偏移；
登陆注册部分占2格，向右偏移1格。

注：这里约定类的顺序，先写占的格数，再写列偏移。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>博客</title>
	    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	</head>

	<body>
		<div class="bg">
			<div class="container">
				<div class="row header">
                    <!-----请仔细阅读Begin-End之间的代码，补充双引号" "间缺失的代码------>
                    <!--------- Begin ---------->
                    <!--logo部分-->
					<div class="col-md-2">
						<a href="#">
							<img src="https://data.educoder.net/attachments/download/204880" alt="logo" style="width:80px;">
						</a>
					</div>
                    <!--首页-资源部分-->
					<div class=" col-md-4 ">
						<a href="#" class="nav-item">首页</a>
						<a href="#" class="nav-item">代码库</a>
						<a href="#" class="nav-item">问答</a>
						<a href="#" class="nav-item">资源</a>
					</div>
                    <!--搜索框部分-->
                    <div class=" col-md-3 ">
						<form class="search">
							<div class="form-group has-feedback">
								<input type="text" class="form-control" id="search" aria-describedby="searchStatus" placeholder="搜索">
								<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
							</div>
						</form>
					</div>
                    <!--登陆注册部分-->
					<div class="col-md-2 col-md-offset-1">
						<a href="#" class="nav-item">登录</a>
						<a href="#" class="nav-item">注册</a>
					</div>
                    <!---------- End ---------->

				</div>
			</div>
		</div>

	</body>

</html>

<style>
	body {
		background: #eee;
	}
	
    .bg {
		width: 100%;
		background: #fff;
		margin-bottom: 20px;
	}
	.header {
		background: #fff;
		line-height: 70px;
	}
	
	.header .search {
		margin-top: 20px;
	}
	
	.header .nav-item {
		padding: 8px;
		font-size: 18px;
	}
</style>

第一关知识点内容分析：

各种屏幕下列的类前缀：