HTML——简单的网站首页

最新推荐文章于 2024-06-13 10:05:56 发布
最新推荐文章于 2024-06-13 10:05:56 发布
阅读量3.3w 收藏 359
点赞数 45
分类专栏： 学习记录 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smallAchelous/article/details/89067592
版权

学习记录帖（一） 简单的网站首页

这是我的一个记录帖，我是按照黑马程序员的视频学习的。

使用的是HBuilder，学习了html & css & js & jq & bootstrap。

成果

在这里插入图片描述

在这里插入图片描述

代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>

		<!--bootStrap核心CSS文件-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<!--JQ-->
		<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
		<!--bootStrap核心JS文件-->
		<script type="text/javascript" src="js/bootstrap.js"></script>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

	</head>

	<body>
		<div class="container">

			<!--logo-->
			<div class="row">
				<div class="col-md-4 col-sm-6 col-xs-6">
					<img src="MARVEL/logo.jpg" />
				</div>
				<div class="col-md-4 hidden-sm hidden-xs">
					<img src="image/header.jpg" />
				</div>
				<div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px; height: 50px; text-align: center;">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>

			<!--导航栏-->
			<nav class="navbar navbar-inverse">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
		        <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="#">首页</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="#">惊奇队长 <span class="sr-only">(current)</span></a>
							</li>
							<li>
								<a href="#">无敌浩克</a>
							</li>
							<li>
								<a href="#">猩红女巫</a>
							</li>
							<li>
								<a href="#">美国队长</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分类 <span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#">惊奇队长</a>
									</li>
									<li>
										<a href="#">无敌浩克</a>
									</li>
									<li>
										<a href="#">猩红女巫</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">美国队长</a>
									</li>
									<li class="divider"></li>
									<li>
										<a href="#">其他分类</a>
									</li>
								</ul>
							</li>
						</ul>
						<form class="navbar-form navbar-right" role="search">
							<div class="form-group">
								<input type="text" class="form-control" placeholder="Search">
							</div>
							<button type="submit" class="btn btn-default">查找</button>
						</form>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>

			<!--轮播图-->
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="3000">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
					<li data-target="#carousel-example-generic" data-slide-to="1"></li>
					<li data-target="#carousel-example-generic" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="MARVEL/1.jpg" alt="...">
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<img src="MARVEL/2.jpg" alt="...">
						<div class="carousel-caption">
						</div>
					</div>
					<div class="item">
						<img src="MARVEL/3.jpg" alt="...">
						<div class="carousel-caption">
						</div>
					</div>
				</div>

				<!-- Controls -->
				<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>

			<!--最新商品-->
			<div class="row">
				<!--标题-->
				<div class="col-md-12">
					<h3>最新商品<img src="img/title2.jpg"/></h3>
				</div>
				<!--左边大图-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="MARVEL/zuobiandatu.jpg" />
				</div>
				<!--右边商品-->
				<div class="col-md-10">
					<!--左上角大图-->
					<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
						<img src="MARVEL/zhongjian.jpg" />
					</div>
					<!--其他小商品-->
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/gangtiexia.jpg" />
						<br />
						<p>钢铁侠</p>
						<p>$298</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/gelute.jpg" />
						<br />
						<p>格鲁特</p>
						<p>$9998</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/huangxiong.jpg" />
						<br />
						<p>小浣熊</p>
						<p>$198</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/luoji.jpg" />
						<br />
						<p>洛基</p>
						<p>$998</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/meiguoduizhang.jpg" />
						<br />
						<p>美国队长</p>
						<p>$498</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/mieba.jpg" />
						<br />
						<p>灭霸</p>
						<p>$698</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/wudihaoke.jpg" />
						<br />
						<p>绿巨人</p>
						<p>$98</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/yiren.jpg" />
						<br />
						<p>蚁人</p>
						<p>$298</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/zhizhuxia.jpg" />
						<br />
						<p>蜘蛛侠</p>
						<p>$498</p>
					</div>
				</div>
			</div>

			<!--蓝色广告-->
			<div class="row">
				<div class="col-md-12 hidden-xs">
					<img src="MARVEL/ad.jpg" width="100%" />
				</div>
			</div>

			<!--热门商品-->
			<div class="row">
				<!--标题-->
				<div class="col-md-12">
					<h3>热门商品<img src="img/title2.jpg"/></h3>
				</div>
				<!--左边大图-->
				<div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;">
					<img src="MARVEL/zuobiandatu.jpg" />
				</div>
				<!--右边商品-->
				<div class="col-md-10">
					<!--左上角大图-->
					<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
						<img src="MARVEL/zhongjian.jpg" />
					</div>
					<!--其他小商品-->
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/gangtiexia.jpg" />
						<br />
						<p>钢铁侠</p>
						<p>$298</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/gelute.jpg" />
						<br />
						<p>格鲁特</p>
						<p>$9998</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/huangxiong.jpg" />
						<br />
						<p>小浣熊</p>
						<p>$198</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/luoji.jpg" />
						<br />
						<p>洛基</p>
						<p>$998</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/meiguoduizhang.jpg" />
						<br />
						<p>美国队长</p>
						<p>$498</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/mieba.jpg" />
						<br />
						<p>灭霸</p>
						<p>$698</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/wudihaoke.jpg" />
						<br />
						<p>绿巨人</p>
						<p>$98</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/yiren.jpg" />
						<br />
						<p>蚁人</p>
						<p>$298</p>
					</div>
					<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;">
						<img src="MARVEL/zhizhuxia.jpg" />
						<br />
						<p>蜘蛛侠</p>
						<p>$498</p>
					</div>
				</div>
			</div>

			<!--footer图片-->
			<div class="row">
				<div class="col-md-12 hidden-xs">
					<img src="img/footer.jpg" width="100%" />
				</div>
			</div>

			<!--友情链接-->
			<div class="row" align="center">
				<a href="#">关于我们</a>
				<a href="#">联系我们</a>
				<a href="#">招贤纳士</a>
				<a href="#">法律声明</a>
				<a href="#">友情链接</a>
				<a href="#">支付方式</a>
				<a href="#">配送方式</a>
				<a href="#">服务声明</a>
				<a href="#">广告声明</a>
				<br /> Copyright © 1998-2019 郑氏集团 版权所有
			</div>
		</div>
	</body>

</html>

导入

大家学习可以去看黑马程序员的视频，挺详细的
[1]: http://www.itheima.com/

smallAchelous
关注
  • 45
    点赞
  • 踩
  • 359
    收藏
    觉得还不错? 一键收藏
  • 28
    评论
专栏目录
HTML基础——网站首页显示页面
anjiukonghe77852的博客
08-16 966
1、表格标签： border设置边框，align设置位置(居中等)，bgcolor设置背景颜色，cellspacing设置边框之间的空隙，cellpadding设置边框与里面内容的间距。 　　table表，tr行，td单元格 　　　　<table border="" width="" height="" align="" bgcolor="" cellpadding="" c...
使用HTML实现百度首页界面
gxjis_Z的博客
06-30 1万+
本次实验是使用HTML写出百度首页界面。本次实验只需要插入不同的网页跳转，插入文本，图片，最后在调整位置，就可以实现。：插入图片 ：点击实现网页的跳转：插入标签完整代码如下：
前端——HTML百度首页制作
热门推荐
Searchin_R的博客
09-22 2万+
前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。 仿做一个网页之前需要分析该网页的布局，下图是百度首页。 从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百...
HTML如何制作公司网站首页（web前端期末大作业）
最新发布
网页设计与制作 | HTML+CSS+JS
06-13 353
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
html网页制作——HTML做一个公司官网首页页面（纯html代码）
html精品源码
12-18 2019
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站...
HTML5+CSS3实现哔哩哔哩首页（完整版）
m0_63512120的博客
03-22 7240
本篇文章用html和css实现了哔哩哔哩首页面，希望这篇文章能够大家带来帮助，同时该页面的源代码和图片素材放在了文章末尾，需要了可以自行提取！
HTML+CSS+JS网页设计期末课程大作业—— 绿色化妆品HTML+CSS+JavaScript
HTML网页设计
08-10 2263
💄美妆介绍、👜美妆分享、👒 品牌化妆品官网网站 、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设......
HTML+CSS大作业：使用html设计一个简单好看的公司官网首页 浮动布局
网页设计与制作 | HTML+CSS+JS
01-08 1116
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
HTML+CSS购物网站——小米有品
03-23
总的来说，这个HTML+CSS购物网站项目旨在通过实践学习和理解Web开发的基本流程，包括前端界面设计和交互实现，以及与后端的简单通信。通过完成这样一个项目，开发者可以掌握网页开发的核心技能，并对电商网站的常见...
原创简单网站——软件下载网站
05-15
【标题】"原创简单网站——软件下载网站"揭示了这个项目是一个个人开发的、以软件下载为主题的网站。这种类型的网站通常包含多个功能模块，如软件分类、搜索、详情展示、下载链接等，用户可以浏览并下载各种软件。 ...
一个简单的HTML网页——传统节日春节网页(HTML+CSS)
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
html网页简单的个人主页
12-02
了解html代码
网页设计大作业——旅游网站，html、css实现.zip
12-31
HTML、CSS、JS、Vue代码：我提供了完整的网页源代码，详细简单有效 项目文件：除了代码，我还分享了整个项目的文件，包括设计稿、图标、图片等资源。这些资源对于理解项目背景和设计思路至关重要。 MD文档与操作手册...
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
购物网站HTML（首页）
m0_56078449的博客
02-11 1万+
购物网站HTML（首页）
html实现美观有简约的个人主页
qq_55385945的博客
05-02 2201
哈喽，大家好，我们又见面了 下面是小编带给大家的既好看又实用的网站（html）代码模板，大家看看吧！ <html> <head> <meta name="code-stutio" content="code-123" /> </head> <meta charset="utf-8"> <title>My...</title> <style> .a { background...
HTML制作菜鸟教程网站首页
qq_36470686的博客
09-21 2万+
这是我们要制作的网站首页  我们接下来将分块进行解析: 顶端模块: 我们将顶端模块分为两个div,分别通过float属性和margin属性达到我们想要的布局效果. 此处我试用的高和宽皆为像素定值,实际很多地方高都不需为定值,使其根据内容自适应大小即可.因为是像素设置的原因,所以当浏览器窗口缩小,浏览器窗口像素相应减小.此时div的宽又无法自适应调整,如果浏览器一行无法放下的话,di...
【HTML+CSS】小兔鲜儿网站首页（静态网页）
m0_63179877的博客
06-30 2696
小兔鲜儿网站首页是利用HTML+CSS进行开发，网站首页包括四部分内容，分别是快捷导航、banner图区域、新鲜好物、生鲜、尾部版权。
随机点名系统——html初学实战
01-03
以下是一个简单的随机点名系统的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>随机点名系统</title> <style> .container { text-align: center; margin-top: 100px; } .button { padding: 10px 20px; font-size: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h1>随机点名系统</h1> <button class="button" onclick="randomName()">点名</button> <h2 id="result"></h2> </div> <script> var names = ["张三", "李四", "王五", "赵六", "陈七"]; // 姓名列表 function randomName() { var randomIndex = Math.floor(Math.random() * names.length); // 随机生成索引 var randomName = names[randomIndex]; // 获取随机姓名 document.getElementById("result").innerHTML = "被点到的人是：" + randomName; // 显示结果 } </script> </body> </html> ``` 这个随机点名系统使用了HTML和JavaScript来实现。在页面上有一个按钮，点击按钮后会随机选择一个姓名并显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值