功能需求

实现一个静态界面。

包含背景图片。（使用background-image样式属性）
包含头部导航栏，含搜索功能等。（使用bootstrap导航栏）
包含底部脚注，含文本。（使用bootstrap导航栏）
包含巨幕，包含文本和按钮。（使用bootstrap巨幕）

结果展示

源代码

文件目录

index_test1.html 网页源代码
index_test1_css.css 样式源代码

文件夹

image/
s2.jpg 背景图片
css/
bootstrap.css bootstrap样式

index_test1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>MyWeb</title>
<!--  <script src="js/jquery-3.5.1.js"></script><script src="js/bootstrap.js"></script>--><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><link rel="stylesheet" type="text/css" href="index_test1_css.css"></head>
<body><div class="mybackground"> <!--背景：使用固定图片--><header class="myheader"> <!--头部--><nav class="navbar navbar-inverse 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="#">This is my web</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">One <span class="sr-only">(current)</span></a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="What you want"></div><button type="submit" class="btn btn-info">Search</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Contact us</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">User <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Login</a></li><li><a href="#">Post</a></li><li role="separator" class="divider"></li><li><a href="#">Any information</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav></header><section class="mysection"> <!--主体部分--><aside class="myaside"><p> </p></aside> <!--左附加信息--><article class="myarticle"><h1>My web has its title</h1><br><p>I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of bad captivity.</p><br><p class="mybutton"><button type="button" class="btn btn-success btn-lg">Join us</button>&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;&emsp14;<button type="button" class="btn btn-info btn-lg">Learn more</button></p></article><!--右主要内容--></section><footer> <!--尾部--><nav class="navbar navbar-inverse navbar-fixed-bottom myfooternav" ><div class="container"><p class="navbar-text">This is my first web basing on bootstrap, html, css. I'll add some javascript if I can. @zhm</p></div></nav></footer></div></body>
</html>

index_test1_css.css

.mybackground{width: 100%;height: 600px;background-image: url("image/s2.jpg");background-repeat: no-repeat;background-attachment: scroll;background-position: center;float: left;
}.myheader{width: 100%;height: 10%;float: left;
}.mysection{width: 100%;height: 80%;float: left;
}.myaside{width: 45%;float: left;
}.myarticle{width: 55%;float: left;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}.myarticle h1 , .myarticle h2, .myarticle p{color: #ffffff;
}.myarticle h1{font-size: 70px;
}.mybutton{text-align: center;
}.myfooternav{width: 100%;height: 10%;background-color: transparent; /*背景色：transparent为透明*//*opacity*//*透明属性：0-1.00的小数*/margin: 0px;float: left;
}

『前端学习实例』静态网页（Bootstrap）相关推荐

『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...
宠物狗站点html,宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)
宠物狗个性化服务网站前端设计与实现(静态网页)(HTML5,DIV+CSS)(论文11000字,网页代码) 摘要本设计将对宠物狗个性化服务网站前端设计开发与实现进行研究和探讨.借助网页设计与制作语 ...
【融职培训】Web前端学习第2章网页重构2 常用的html标签
一.HTML语法上一节我们已经了解了html和css的基本概念,本节通过上一节的一个例子来说说HTML的语法. 1 <!DOCTYPE html>  ...
Java Web学习(2)：静态网页与动态网页
一静态网页 (1)静态网页概述在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是标准的HTML文件,它的文件扩展名是.htm ...
【融职培训】Web前端学习第2章网页重构1 第一个网页
一.内容概述从本节我们开始正式学习前端开发的课程内容,首先我们从第一个网页开始了解html和css的基本概念,并通过创建第一个网页了解vscode的基本使用方法. 二.安装vscode插件汉化插件 ...
python写前端代码_python前端学习之移动端和bootstrap
我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...
Python学习杂记之静态网页学习
每日一丧:我就是丧本丧了笔者最近在为学习django而做准备,开始看起了网页,我们先说几个好一点的学习网站吧. 初学前端,笔者最常浏览的就是W3School. 链接:http://www.w3sch ...
【融职培训】Web前端学习第2章网页重构7 浮动布局
一.元素分类特性展示在此前的课程中,我们还有一些遗留问题没有解决,例如: 有些元素不管宽度多少,都是独立占一行显示,有些元素则可以共同占用一行显示; 有些元素可以设置宽度和高度,有些元素不能设置宽 ...
WEB前端大作业HTML静态网页设计旅游景点区主题——三亚旅游网页设计
家乡旅游景点网页作业制作网页代码运用了DIV盒子的使用方法,如盒子的嵌套.浮动.margin.border.background等属性的使用,外部大盒子设定居中,内部左中右布局,下方横向浮动排列,大 ...

『前端学习实例』静态网页（Bootstrap）

文章目录

功能需求

结果展示

源代码

文件目录

index_test1.html

index_test1_css.css

『前端学习实例』静态网页（Bootstrap）相关推荐

最新文章

热门文章

『前端学习实例』 静态网页（Bootstrap）

文章目录

功能需求

结果展示

源代码

文件目录

index_test1.html

index_test1_css.css

『前端学习实例』 静态网页（Bootstrap）相关推荐

最新文章

热门文章

『前端学习实例』静态网页（Bootstrap）

『前端学习实例』静态网页（Bootstrap）相关推荐