HTML——简单的网站首页
2024-06-08 00:38:22
学习记录帖（一） 简单的网站首页
这是我的一个记录帖，我是按照黑马程序员的视频学习的。
使用的是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="data: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/
HTML——简单的网站首页相关推荐
- 一个简单的网站首页制作
源代码 <!doctype html> <html> <head><meta charset="utf-8"/><title& ...
- 全国默哀 网站首页都要变成灰色的简单解决办法
今天全国默哀 网站首页都要变成灰色 给大家一个简单的解决办法 在首页的body中加上 style="FILTER: alphaopacity=80 gray" 大家也可以在自己的b ...
- Asp.net MVC 仿照博客园的简单网站首页 列表设计
本来我打算采用ajax提交请求,异步的请求获取数据,但是我发现如果这样的话就会拖慢开发的进度,拖长时间.所以在这篇博客中仿照首页的列表设计其实和左侧列表网站分类采用了同样的方式,通过局部视图的方式呈现 ...
- html+css+js制作简单网站首页
一个简单的网站主页 主要由html+css+js制作 1.图片展示 这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
- vue+element简单实现商城网站首页，模仿电商商城
1.安装启动vue项目可参考 vue+element简单实现商城网站首页,模仿小米电商商城https://blog.csdn.net/lucky_fang/article/details/121544 ...
- 网络推广外包——网络推广外包专员如何做好网站首页设计
一般来说用户在浏览网站过程中大多都会将视线集中在网站的头部和中间页面的位置,这也是网站建设中的重点,很少有用户会详细看网站页面的底部,但是作为一个专业的网站建设人员自然也不能忽视对网站底部的建设.那么 ...
- Django 3.2.5博客开发教程:实现网站首页
实现首页模板前,我们先把共公的页面模板base.html调用好.首先我们先看导航部分,除开首页和关于博主之外,其它的其实是我们的文章分类名.如图: 我们只需要在首页视图函数里,查询出所有的文章分类名称 ...
- 网站不大但加载很慢怎么优化_博客网站首页加载优化
Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用,其他就是对接口优化等 1. ve ...
- 编制网站首页的基本原则
编制网站首页的基本原则如下: 1.编制网站首页的超文本文档的组织结构应清晰,条理分明,重点突出,可读性强,尽可能吸引用户的注意力. 2.说明文字应简明扼要,切中要害,每项内容介绍尽可能简单明确,以不超 ...
- 解决方案：OpenResty 网站首页数据缓存
解决方案:OpenResty 网站首页数据缓存 关键词 Web 应用服务器,封装Nginx,集成LUA脚本 lua脚本实现缓存预热 lua脚本实现二级缓存读取 openresty本地缓存 需求: 将网 ...
最新文章
- templateclass T函数模板
- c语言statistics函数,Statistics基本定理
- CentOS 7.2 时间同步与时区设置
- Linux Makefile
- 计算机考试模拟系统无法进入,全国计算机等级考试上机考试模拟系统使用说明...
- 桶排序，冒泡排序，快速排序三者比较（例子说名）
- Linux-安全加固
- Checkra1n 越狱常见问题大全
- VARCHART XGantt与活动互动教程指南
- 李南江的前端课程知识点（七）CSS的继承、层叠、优先
- html 设置div背景颜色,CSS设置网页背景颜色技术教程篇
- 厦门龙凤419_福建生物工程职业技术学校2019招生通知书EMS单号
- Linux Kernel Makefiles
- 查看服务器系统密码,服务器系统查看密码
- 小哈智能机器人的功能_小哈智能教育机器人H2产品外观参数说明
- linux下如何捕捉方向键
- VBS 请求WebAPI接口_C#进阶系列——WebApi 路由机制剖析：你准备好了吗？
- power Designer VBS 脚步 通过 excel 生成实体，不用一个一个的输入。
- 就是用计算机判断一个句子的语义,英语汉语词汇语义及句子结构对比
- nodejs 设置API代理