admin管理员组文章数量:1530012
1、引言
你是否有过相关设计结课作业,课程设计无处下手，网页要求的总数量太多？没有合适的模板？数据库，java，python，vue，html作业复杂工程量过大？毕设毫无头绪等等一系列问题。你想要解决的问题，在微信公众号“coding加油站”中全部会得到解决
2、作品介绍
360官网采用html5，css3技术来实现，符合所学知识体系，适用于常见的作业以及课程设计，需要获取更多的作品，请关注微信公众号：coding加油站，获取，如需更多资料，可在微信后台留言。欢迎大家来提问，交流学习。这个页面使用了html和css，特别适合新手练习的页面，360网站相对于来说比较简洁，看起来比较简单但是实现所有的样式还是有点难度。熟练搭建静态网页是前端工程师的必备技能
2.1、作品简介方面
360官网采用常规方式来实现，符合绝大部分的要求。代码配置有相关文档讲解，如需从代码中学到知识点，那么这个作品将是你的不二之选
2.2、作品二次开发工具
此作品代码相对简单，基本使用课堂中所学知识点来完成，只需要修改相关的介绍文字，一些图片，就可以改为自己独一无二的代码，网页作品下载后可使用任意编辑软件（例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用），java，python等相关作业使用自己常使用的工具亦可完成相关二次开发。
2.3、作品技术介绍
html网页作品技术方面：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等相关技术来美化相关界面，部分采用了javascript来做校验。 使用html5，以及css3等相关技术完成技术的布局，在本作品中，会使用常见的布局，常见的浮动布局，flex布局都会有使用到哦。同时利用弹性布局(display:flex)+float+position定位布局+轮播图+css3动画效果
效果图：
3、搭建流程
3.1、搜索栏和导航栏
<!-- 搜索栏 -->
<div class="headfixed clearfix">
<div class="head wrapper">
<h1>
<a href="#"><img src="./image/logo.png" alt=""></a>
</h1>
<div class="search">
<div class="input">
<select name="" id="">
<option value="">网页</option>
<option value="">新闻</option>
<option value="">问答</option>
<option value="">视频</option>
<option value="">图片</option>
</select>
<input type="text">
<button>360搜索</button>
</div>
<ul>
<li><a href="#">全面安全</a></li>
<li><a href="#">勒索病毒</a></li>
<li><a href="#">中小企业勒索防护</a></li>
<li><a href="#">办公必备</a></li>
</ul>
<a href="#" class="more">更多></a>
</div>
<ul class="right">
<li><a href="#">中文版</a></li>
<li><a href="#">Global</a></li>
<li><a href="./sign in.html">登录</a></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
<div class="tuobiao" id="top"></div>
<!-- 菜单栏 -->
<div class="nav">
<div class="list wrapper">
<ul class="ul1">
<li class="li1"><a href="#">电脑软件</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li31.png" alt="" width="40px">
360安全卫士</a></li>
<li class="li3"><a href="#"> <img src="./image/li32.png" alt="" width="40px">
360安全卫士极速版</a></li>
<li class="li3"><a href="#"> <img src="./image/li33.png" alt="" width="40px">
360企业安全云</a></li>
<li class="li3"><a href="#"> <img src="./image/li34.png" alt="" width="40px">
360杀毒</a></li>
<li class="li3"><a href="#"> <img src="./image/li35.png" alt="" width="40px">
360反勒索服务</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li36.png" alt="" width="40px">
360安全浏览器</a></li>
<li class="li3"><a href="#"> <img src="./image/li37.png" alt="" width="40px">
360急速浏览器×64位</a></li>
<li class="li3"><a href="#"> <img src="./image/li38.png" alt="" width="40px">
360安全云盘</a></li>
<li class="li3"><a href="#"> <img src="./image/li39.png" alt="" width="40px">
360搜索</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li310.png" alt="" width="40px">
急救系统箱</a></li>
<li class="li3"><a href="#"> <img src="./image/li311.png" alt="" width="40px">
重装大师</a></li>
<li class="li3"><a href="#"> <img src="./image/li312.png" alt="" width="40px">
勒索病毒救灾版</a></li>
<li class="li3"><a href="#"> <img src="./image/li313.png" alt="" width="40px">
高危病毒免疫</a></li>
</ul>
</li>
<li class="li2">系统工具
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li314.png" alt="" width="40px">
360压缩</a></li>
<li class="li3"><a href="#"> <img src="./image/li315.png" alt="" width="40px">
驱动大师</a></li>
<li class="li3"><a href="#"> <img src="./image/li316.png" alt="" width="40px">
桌面助手</a></li>
<li class="li3"><a href="#"> <img src="./image/li317.png" alt="" width="40px">
苏打办公</a></li>
</ul>
</li>
<li class="li2">生活休闲
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li318.png" alt="" width="40px">
360游戏大厅</a></li>
<li class="li3"><a href="#"> <img src="./image/li319.png" alt="" width="40px">
360软件管家</a></li>
<li class="li3"><a href="#"> <img src="./image/li320.png" alt="" width="40px">
360画报</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">手机软件</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li31.png" alt="" width="40px">
360安全卫士</a></li>
<li class="li3"><a href="#"> <img src="./image/li32.png" alt="" width="40px">
360安全卫士极速版</a></li>
<li class="li3"><a href="#"> <img src="./image/li33.png" alt="" width="40px">
360企业安全云</a></li>
<li class="li3"><a href="#"> <img src="./image/li34.png" alt="" width="40px">
360杀毒</a></li>
<li class="li3"><a href="#"> <img src="./image/li35.png" alt="" width="40px">
360反勒索服务</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li36.png" alt="" width="40px">
360安全浏览器</a></li>
<li class="li3"><a href="#"> <img src="./image/li37.png" alt="" width="40px">
360急速浏览器×64位</a></li>
<li class="li3"><a href="#"> <img src="./image/li38.png" alt="" width="40px">
360安全云盘</a></li>
<li class="li3"><a href="#"> <img src="./image/li39.png" alt="" width="40px">
360搜索</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li310.png" alt="" width="40px">
急救系统箱</a></li>
<li class="li3"><a href="#"> <img src="./image/li311.png" alt="" width="40px">
重装大师</a></li>
<li class="li3"><a href="#"> <img src="./image/li312.png" alt="" width="40px">
勒索病毒救灾版</a></li>
<li class="li3"><a href="#"> <img src="./image/li313.png" alt="" width="40px">
高危病毒免疫</a></li>
</ul>
</li>
<li class="li2">系统工具
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li314.png" alt="" width="40px">
360压缩</a></li>
<li class="li3"><a href="#"> <img src="./image/li315.png" alt="" width="40px">
驱动大师</a></li>
<li class="li3"><a href="#"> <img src="./image/li316.png" alt="" width="40px">
桌面助手</a></li>
<li class="li3"><a href="#"> <img src="./image/li317.png" alt="" width="40px">
苏打办公</a></li>
</ul>
</li>
<li class="li2">生活休闲
<ul class="ul3">
<li class="li3"><a href="#"> <img src="./image/li318.png" alt="" width="40px">
360游戏大厅</a></li>
<li class="li3"><a href="#"> <img src="./image/li319.png" alt="" width="40px">
360软件管家</a></li>
<li class="li3"><a href="#"> <img src="./image/li320.png" alt="" width="40px">
360画报</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">政企安全</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">视频·直播</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">金融科技</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">个人服务</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">360商城</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">安全理赔</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">企业服务</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">游戏</a>
<ul class="ul2 ">
<div>
<li class="li2">电脑安全
<ul class="ul3">
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360企业安全云</a></li>
<li class="li3"><a href="#">360杀毒</a></li>
</ul>
</li>
<li class="li2">安全上网
<ul class="ul3">
<li class="li3"><a href="#">360安全浏览器</a></li>
<li class="li3"><a href="#">360急速浏览器</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
<li class="li2">急救系统
<ul class="ul3">
<li class="li3"><a href="#">急救系统箱</a></li>
<li class="li3"><a href="#">360安全卫士极速版</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
<li class="li3"><a href="#">360安全卫士</a></li>
</ul>
</li>
</div>
</ul>
</li>
<li class="li1"><a href="#">社区</a>
</li>
</ul>
</div>
</div>3.2、最新动态和安全态势
<!-- 轮播图 -->
<div class="banner">
<div class="center">
<a href="#">
<img src="./image/banner1.png" alt="" height="443px">
<div class="download">
<div class="box">
<div class="left ">立即下载</div>
<div class="right ">卫士+杀毒</div>
</div>
<p>安全卫士安装失败-解决方案</p>
<div class="top">
<span class="bata">bata版</span>
<span class="fast">极速版</span>
</div>
<div class="bot">
<span class="exe1">离线安装包</span>
<span class="exe2">国际版</span>
<span class="exe3">中小企业版</span>
</div>
</div>
</a>
</div>
<div class="choose wrapper">
<ul>
<li>
<a href="#">
<img src="./image/li31.png" alt="" width="56px">
<div class="content">
<h2>360安全卫士</h2>
<p>大安全时代，提供全面安全服务</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/li36.png" alt="" width="56px">
<div class="content">
<h2>360浏览器/杀毒</h2>
<p>全面防护，性能出众</p>
</div>
</a>
</li>
<li>
<a href="#">
<img src="./image/choose3.png" alt="" width="56px">
<div class="content">
<h2>360商城</h2>
<p>官方直营，开启智能物联新时代</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 最新动态\快速下载 -->
<div class="news wrapper">
<div class="lnew">
<div class="words">
<h3> <a href="#">最新动态</a> </h3>
<a href="#">更多></a>
</div>
<ul>
<li>
<div class="img">
<a href="#"> <img src="./image/news1.png" alt=""></a>
</div>
<div class="title">
<a href="#">新型勒索软件WannaRen解密工具</a>
</div>
</li>
<li>
<div class="img">
<a href="#"> <img src="./image/news2.png" alt=""></a>
</div>
<div class="title">
<a href="#">周鸿祎两会建言城市数字安全体系、智能网联车安全、中小微安全等</a>
</div>
</li>
<li>
<div class="img">
<a href="#"> <img src="./image/news3.png" alt=""></a>
</div>
<div class="title">
<a href="#">外交部回应260揭秘美国全球无差别网络攻击</a>
</div>
</li>
</ul>
</div>
<!-- 快速下载 -->
<div class="rfastdown">
<div class="words">
<h3> <a href="#">快速下载</a> </h3>
<a href="#">更多></a>
</div>
<ul>
<li><a href="#">
<img src="./image/down1.png" alt="" width="24px">
<p>安全卫士</p>
<button>下载</button>
</a>
</li>
<li><a href="#">
<img src="./image/down2.png" alt="" width="24px">
<p>安全浏览器</p>
<button>下载</button>
</a>
</li>
<li><a href="#">
<img src="./image/down3.png" alt="" width="24px">
<p>360杀毒</p>
<button>下载</button>
</a>
</li>
<li><a href="#">
<img src="./image/down4.png" alt="" width="24px">
<p>360压缩</p>
<button>下载</button>
</a>
</li>
<li><a href="#">
<img src="./image/down5.png" alt="" width="24px">
<p>桌面助手</p>
<button>下载</button>
</a>
</li>
<li><a href="#">
<img src="./image/down6.png" alt="" width="24px">
<p>一键上网</p>
<button>下载</button>
</a>
</li>
</ul>
</div>
</div>
<!-- 安全热点关注 -->
<div class="hot wrapper">
<div class="title">
<h3> <a href="#">安全热点关注</a> </h3>
</div>
<ul class="clearfix">
<li><a href="#">
<img src="./image/hot1.png" alt="" width="100px">
<div class="content">
<h2>安全大脑·极致守护</h2>
<p> 建立基于安全大脑的开放生态赋能大安全时代各行业 </p>
</div>
</a>
</li>
<li><a href="#">
<img src="./image/hot2.png" alt="" width="100px">
<div class="content">
<h2>勒索病毒救助</h2>
<p> 全球疫情实时监控，操作免疫防护，中毒自救，文件自助解密</p>
</div>
</a>
</li>
<li><a href="#">
<img src="./image/hot3.png" alt="" width="100px">
<div class="content">
<h2>高危漏洞免疫</h2>
<p> 专业检测防护，一键免疫修复全部重大高危漏洞业 </p>
</div>
</a>
</li>
</ul>
</div>3.3、新闻动态和关于
<div class="mixbox wrapper clearfix">
<div class="softwarehub">
<a href="#">
<h2>360安全软件</h2>
</a>
<ul class="softwareul clearfix">
<li class="softwareli"><a href="#">
<img src="./image/software1.png" alt="">
<div class="content">
<p>360安全卫士</p>
<button>下载</button>
<button>论坛</button>
<br>
<a href="#" class="team">团队版</a>
<a href="#" class="team">安装失败帮助</a>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software2.png" alt="">
<div class="content">
<p>360杀毒</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software3.png" alt="">
<div class="content">
<p>360安全浏览器</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software4.png" alt="">
<div class="content">
<p>360极速浏览器X</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software5.png" alt="">
<div class="content">
<p>360手机卫士</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software6.png" alt="">
<div class="content">
<p>360手机助手</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software7.png" alt="">
<div class="content">
<p>360驱动大师</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
<li class="softwareli"><a href="#">
<img src="./image/software8.png" alt="">
<div class="content">
<p>360企业安全云</p>
<button>下载</button>
<button>论坛</button>
<br>
</div>
</a>
</li>
</ul>
<!-- 软件下面字列表 -->
<div class="p1">
<dl>
<dt class="jingling1">电脑软件:
<dd><a href="#">360压缩</a></dd>
<dd><a href="#">功能大全</a></dd>
<dd><a href="#">安全卫士团队版</a></dd>
<dd><a href="#">软件管家</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
<div class="p2">
<dl>
<dt class="jingling2">手机软件:
<dd><a href="#">360防骚扰大师</a></dd>
<dd><a href="#">手机助手</a></dd>
<dd><a href="#">手机浏览器</a></dd>
<dd><a href="#">清理大师</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
<div class="p3">
<dl>
<dt class="jingling3">开放平台:
<dd><a href="#">点睛营销平台</a></dd>
<dd><a href="#">奇胜效果联盟</a></dd>
<dd><a href="#">加固保</a></dd>
<dd><a href="#">260小程序</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
</div>
<!-- 360商城 -->
<div class="shop">
<a href="#">
<h2>360商城</h2>
</a>
<div class="lilbanner">
<img src="./image/360shop1.png" alt="">
</div>
<ul class="clearfix">
<li class="goodsli"><a href="#">
<img src="./image/shop1.png" alt="">
<div class="content">
<a href="#">360智能穿戴</a>
<p>定位安全 为爱守护</p>
</div>
</a>
</li>
<li class="goodsli"><a href="#">
<img src="./image/shop2.png" alt="">
<div class="content">
<a href="#">360智能网络</a>
<p>家庭防火墙 路由器</p>
</div>
</a>
</li>
<li class="goodsli"><a href="#">
<img src="./image/shop3.png" alt="">
<div class="content">
<a href="#">360家庭安防</a>
<p>安全无盲区</p>
</div>
</a>
</li>
<li class="goodsli"><a href="#">
<img src="./image/shop4.png" alt="">
<div class="content">
<a href="#">360行车记录仪</a>
<p>为您保驾护航</p>
</div>
</a>
</li>
</ul>
<!-- 360商城下面的一堆文字 -->
<div class="p1">
<dl>
<dt class="jingling1">儿童手表:
<dd><a href="#">儿童手表9X</a></dd>
<dd><a href="#">儿童手表8XS</a></dd>
<dd><a href="#">儿童手表Kido S2</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
<div class="p2">
<dl>
<dt class="jingling2">智能家居:
<dd><a href="#">路由器</a></dd>
<dd><a href="#">摄像机</a></dd>
<dd><a href="#">扫地机器人</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
<div class="p3">
<dl>
<dt class="jingling3">行车安全:
<dd><a href="#">G380畅行版</a></dd>
<dd><a href="#">G300 Pro</a></dd>
<dd><a href="#">G580</a></dd>
<dd><a href="#">G600 4G</a></dd>
<dd><a href="#">更多></a></dd>
</dt>
</dl>
</div>
</div>
</div>
<!-- 新闻动态\安全咨询\社区热帖\电脑安全 -->
<div class="other wrapper">
<div class="p1">
<h2>新闻动态</h2>
<div class="borderbox">
<a href="#">
<div class="img">
<img src="./image/other1.png" alt="">
<h3>周鸿祎:元宇宙最大的风险是数字安全</h3>
</div>
</a>
<ul>
<li>
<a href="#">2022年2月勒索病毒态势分析</a>
</li>
<li>
<a href="#">安全成两会热词 周鸿袆委员5年682次谈安全</a>
</li>
<li>
<a href="#">全国政协委员周鸿祎建议:加强开源软件安全</a>
</li>
<li>
<a href="#">周鸿祎两会建言城市数字安全体系、智能联网车安全、中小微安全等</a>
</li>
<li>
<a href="#">360企业安全云产品介绍</a>
</li>
</ul>
<a href="#" class="more">更多></a>
</div>
</div>
<div class="p1">
<h2>安全资讯</h2>
<div class="borderbox">
<a href="#">
<div class="img">
<img src="./image/other2.png" alt="">
<h3>数字化安全-周观察04期:周鸿祎央视《对话》谈数字化安全及元宇宙等</h3>
</div>
</a>
<ul>
<li>
<a href="#">数字安全一周观察08期：360漏洞研究院问鼎首届“信创关键产品安全挑战赛”</a>
</li>
<li>
<a href="#">中国首份“隐私考卷”发布，测测你能得几分</a>
</li>
<li>
<a href="#">数字安全元年开启 360推出中国首本大安全日历</a>
</li>
<li>
<a href="#">十万人围观360战略级产品发布 刷屏海报成网友许愿池</a>
</li>
<li>
<a href="#">数据安全管理条例明确个人信息保护 360呼吁隐私保护重在企业</a>
</li>
</ul>
<a href="#" class="more">更多></a>
</div>
</div>
<div class="p1">
<h2>社区热帖</h2>
<div class="borderbox">
<a href="#">
<div class="img">
<img src="./image/other3.png" alt="">
<h3>客服小百科 | 浏览器收藏夹找不到了该怎么办，速看！</h3>
</div>
</a>
<ul>
<li>
<a href="#">360安全云盘PDF转换功能正式上线啦！</a>
</li>
<li>
<a href="#">360画报让你忙碌的时候也能不忘生活</a>
</li>
<li>
<a href="#">存图指南如何无损批量压缩图片</a>
</li>
<li>
<a href="#">360扫地机器人解决扫地烦恼！</a>
</li>
<li>
<a href="#">2021第三期产品交流会活动回顾</a>
</li>
</ul>
<a href="#" class="more">更多></a>
</div>
</div>
<div class="p1 p4">
<h2>电脑安全</h2>
<div class="borderbox">
<a href="#">
<div class="img">
<img src="./image/other4.png" alt="">
<h3>数字安全公开赛正式开赛 探寻真实场景下安全风险最优解</h3>
</div>
</a>
<ul>
<li>
<a href="#">家长如何预防青少年沉迷网络？专家做客360搜索安全直播间</a>
</li>
<li>
<a href="#">90后是诈骗主要目标人群 70 后人均损失最重 360揭露手机诈骗新动向</a>
</li>
<li>
<a href="#">未成年人互联网普及率高于全国普及率 360频频发力守护其上网安全</a>
</li>
<li>
<a href="#">360企业安全云产品介绍</a>
</li>
<li>
<a href="#">3周鸿祎谈关基保护条例发布：回应了国家对网络安全的重大关切</a>
</li>
</ul>
<a href="#" class="more">更多></a>
</div>
</div>
</div>
<!-- 关于 -->
<div class="about">
<div class="content wrapper">
<ul class="ul1">
<li class="li1">关于360
<ul class="ul2">
<li class="li2"><a href="#">公司简介</a></li>
<li class="li2"><a href="#">创始人</a></li>
<li class="li2"><a href="#">大事记</a></li>
<li class="li2"><a href="#">获奖记录</a></li>
<li class="li2"><a href="#">品牌宣传片</a></li>
<li class="li2"><a href="#">360失信人员查询</a></li>
</ul>
</li>
<li class="li1">投资者关系
<ul class="ul2">
<li class="li2"><a href="#">公司公告</a></li>
</ul>
</li>
<li class="li1">加入360
<ul class="ul2">
<li class="li2"><a href="#">公司简介</a></li>
<li class="li2"><a href="#">创始人</a></li>
<li class="li2"><a href="#">大事记</a></li>
<li class="li2"><a href="#">获奖记录</a></li>
<li class="li2"><a href="#">品牌宣传片</a></li>
<li class="li2"><a href="#">360失信人员查询</a></li>
</ul>
</li>
<li class="li1">用户服务
<ul class="ul2">
<li class="li2"><a href="#">公司简介</a></li>
<li class="li2"><a href="#">创始人</a></li>
<li class="li2"><a href="#">大事记</a></li>
<li class="li2"><a href="#">获奖记录</a></li>
<li class="li2"><a href="#">品牌宣传片</a></li>
<li class="li2"><a href="#">360失信人员查询</a></li>
</ul>
</li>
<li class="li1">商务合作
<ul class="ul2">
<li class="li2"><a href="#">公司简介</a></li>
<li class="li2"><a href="#">创始人</a></li>
<li class="li2"><a href="#">大事记</a></li>
<li class="li2"><a href="#">获奖记录</a></li>
<li class="li2"><a href="#">品牌宣传片</a></li>
</ul>
</li>
</ul>
<div class="contact">
<div class="top">
<span>关于我们</span>
<span><a href="#">官网微博</a></span>
</div>
<div class="left">
<img src="./image/QR code1.png" alt="" width="120px">
</div>
<div class="right">
<img src="./image/QR code2.png" alt="" width="120px">
</div>
</div>
</div>
</div>获取完整代码，请关注公众号（coding加油站）回复“360官网” 获取。
版权声明：本文标题：【HTML5作业】实现360官网静态首页 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726118329a1056249.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论