时间：2023-08-29 15:42:01 | 来源：网站运营
时间：2023-08-29 15:42:01 来源：网站运营
HTML的学习（例子1）：
在线咨询
<!DOCTYPE html><html><head><body> <style> body { font-family: PingFang SC, Helvetica Neue, Helvetica, Arial, Hiragino Sans GB, Microsoft Yahei, //5FAE/8F6F/96C5/9ED1, STHeiti, //534E/6587/7EC6/9ED1, sans-serif; color: #777; font-size: 14px; background: #f5f5f5 } * { margin: 0; padding: 0 } #wrapper { width: auto; position: relative } header { background: #000; height: 100px; position: relative; text-align: center; padding: 0 80px } header h1 { float: left; line-height: 100px } header ul.nav-list { list-style: none; display: inline-block; line-height: 100px } header ul.nav-list li { float: left } header ul.nav-list a { color: #c8c8c8; display: block; margin: 0 35px 0 0; text-decoration: none } header ul.nav-aside { float: right; line-height: 100px; margin-right: 50px } header ul.nav-aside li { float: left; list-style: none } header ul.nav-aside li a { color: #c8c8c8; display: block; margin: 0 0 0 20px; text-decoration: none } header div.container h1 a { height: 50px; width: 50px; background: url(file:///C:/Users/admin/Desktop/%E6%8D%95%E8%8E%B7.PNG) no-repeat; color: transparent; font-size: 45px; background-size: contain; } #main { width: 100%; padding: 0 80px } div#main div.topnav { height: 100px; width: 100%; position: relative; } div#main div.topnav>ul { height: 100%; } div#main div.topnav>ul li { float: left; list-style: none; height: 100px; line-height: 100px; position: relative } div#main div.topnav>ul li a { display: block; margin: 0 50px 50px 0; padding-left: 0; text-decoration: none } div#main div.topnav>ul li>ul { position: absolute; top: 100px; left: 0; width: 960px; height: 350px; display: none; border-top: 1px solid; background: white } div#main div.topnav>ul li:hover>ul { display: block } #topnav:after { content: "", clear:both; height: 0 } #banner { border: 1px solid; width: 88%; height: 500px; border-radius: 20px } #main section.sideimg { width: 90%; height: 200px; text-align: center; margin: 50px 0 } #main section.sideimg li { display: inline-block; list-style: none; } #main section.sideimg li img { width: 300px; } section.hotitem { border: 1px solid; border-radius: 10px; height: 500px; width: 90%; background: #fff } section.hotitem h1 { border-bottom: 1px solid; height: 10%; line-height: 50px; padding: 10px 38px; background: #f5f5f5; border-radius: 10px 10px 0 0 } section.hotitem div.container { height: 86%; position: relative } section.hotitem div.container>div { float: left; width: 25%; box-sizing: border-box; height: 100%; text-align: center; position: relative } section.hotitem div.container div+div { border-left: 1px solid } section.hotitem div.container img { margin: 20px 0 } section.hotitem div.container h5 { font-size: 16px; overflow: hidden; } section.hotitem div.container p { padding-top: 7px; font-size: 12px; color: #b2b2b2; line-height: 1.2 } section.hotitem div.container div div { display: inline-block; font-size: 18px; color: #de4037; position: absolute; bottom: 15px; left: 150px; } section.hotitem div.container ul { height: 18px; position: absolute; bottom: 80px; z-index: 20; width: 100%; left: 140px; } section.hotitem div.container ul li { list-style: none; margin: 0 10px; float: left; border: 3px solid #d4d4d4; width: 12px; height: 12px; border-radius: 8px; background: black; } footer { margin: 60px auto 0; border-top: 1px solid #e6e6e6; width: 100%; height: 350px; background: #fff; position: absolute; padding: 0 40px 0; } footer ul { float: left; } footer a { text-decoration: none } footer ul:nth-child(1) { width: 75%; } footer ul:nth-child(1) h3 { padding: 0 0 14px; font-size: 12px } footer div#footnav { ; height: 120px; padding: 50px } footer ul:nth-child(2) { width: 15%; } footer ul:nth-child(1) li { float: left; list-style: none; position: relative; width: 150px; } footer ul:nth-child(1) li ul { position: absolute; color: #c3c3c3 } footer ul:nth-child(1) li ul li { font-size: 12px; padding: 6px 0; } footer ul:nth-child(2) li { list-style: none; } footer ul.hh li:first-child { font-size: 30px; } footer ul.hh li:nth-child(2) { font-size: 12px; margin-top: 5px; width: 250px } footer ul.hh li:nth-child(3) a { font-size: 14px; margin-top: 5px; width: 100px; height: 40px; display: block; text-align: center; color: #5079d9; border: 1px solid #dcdcdc; line-height: 40px; border-radius: 5px; margin: 20px 0 0 55px; } footer div#info { padding: 40px 0; border-top: 1px solid; width: 88%; font-size: 12px; } footer div#info p { float: left; width: 36%; margin: 0 0 0 40px; } footer div#info ul { width: 30% } footer div#info ul li { float: left; border-left: 1px solid; margin-right: 10px; padding: 0 0 0 10px } footer div#info ul li {} footer li { list-style: none; } footer div.last { clear: both; margin: 25px 0 0 40px; color: #bdbdbd; font-size: 12px; } footer div.last span { margin-right: 20px } #totop { position: fixed; width: 54px; height: 54px; bottom: 20px; right: 17px; opacity: .62; z-index: 50; background: #ddd; line-height: 54px; font-size: 12px; cursor: pointer } </style> </head> <body> <div id="wrapper"> <header> <div class="container"> <h1><a href="#">Smartisan</a></h1> <ul class="nav-list"> <li><a href="#">在线商城</a></li> <li><a href="#">坚果 Pro2S </a></li> <li><a href="#">坚果R1 / M1L </a></li> <li><a href="#">坚果TNT工作坊</a></li> <li><a href="#">Smartisan OS </a></li> <li><a href="#">欢喜云 </a></li> <li><a href="#">应用</a></li> <li><a href="#">论坛</a></li> <li><a href="#">荣誉与奖项</a></li> </ul> <ul class="nav-aside"> <li><a href="#">个人中心</a></li> <li><a href="#">购物车</a></li> </ul> </div> </header> <div id="main"> <div class="topnav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">手机</a> </li> <li><a href="#">官方配件</a></li> <li><a href="#">服饰箱包</a></li> <li><a href="#">畅呼吸</a></li> <li><a href="#">服务</a></li> </ul> </div> <div id="banner"> <image src="" />轮播图 </div> <section class="sideimg"> <ul> <li> <img src=""> </li> <li> <img src=""> </li> <li> <img src=""> </li> <li> <img src=""> </li> </ul> </section> <section class="hotitem"> <h1>热门产品</h1> <div class="container"> <div> <img src="" /> <h5>Smartisan 帆布鞋</h5> <p>一双踏实、舒适的帆布鞋</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>199.00</span></div> </div> <div> <img src="" /> <h5>坚果 QuickCharge 4+ 快速充电器</h5> <p>全面兼容的 18W 快速充电</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>59.00</div> </p> </div> <div> <img src="" /> <h5>各色DNA检测套装</h5> <p>千万级基因位点数据解读</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>499.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>999.00</span></div> </div> </div> </section> <section class="hotitem"> <h1>服饰箱包</h1> <div class="container"> <div> <img src="" /> <h5>Smartisan 帆布鞋</h5> <p>一双舒适、踏实的帆布鞋</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>199.00</span></div> </div> <div> <img src="" /> <h5>坚果 QuickCharge 4+ 快速充电器</h5> <p>全面兼容的 18W 快速充电</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</div> </p> </div> <div> <img src="" /> <h5>各色DNA检测套装</h5> <p>千万级基因位点数据解读</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>169.00</span></div> </div> </div> </section> <section class="hotitem"> <h1>畅呼吸系列产品</h1> <div class="container"> <div> <img src="" /> <h5>Smartisan 帆布鞋</h5> <p>一双舒适、踏实的帆布鞋</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>199.00</span></div> </div> <div> <img src="" /> <h5>坚果 QuickCharge 4+ 快速充电器</h5> <p>全面兼容的 18W 快速充电</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</div> </p> </div> <div> <img src="" /> <h5>各色DNA检测套装</h5> <p>千万级基因位点数据解读</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>169.00</span></div> </div> </div> </section> <section class="hotitem"> <h1>官方精选配件</h1> <div class="container"> <div> <img src="" /> <h5>Smartisan 帆布鞋</h5> <p>一双舒适、踏实的帆布鞋</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>199.00</span></div> </div> <div> <img src="" /> <h5>坚果 QuickCharge 4+ 快速充电器</h5> <p>全面兼容的 18W 快速充电</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</div> </p> </div> <div> <img src="" /> <h5>各色DNA检测套装</h5> <p>千万级基因位点数据解读</p> <ul> <li><span></span></li> </ul> <div><i>¥</i><span>69.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>169.00</span></div> </div> </div> </section> <section class="hotitem"> <h1>坚果手机及配件</h1> <div class="container"> <div> <img src="" /> <h5>地平线 8 号 28 寸旅行箱</h5> <p>一款让旅行箱挑剔者满意的旅行箱</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>599.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号 全功能城市背包 Atlas X</h5> <p>一款通行城市的全功能双肩包</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>299.00</div> </p> </div> <div> <img src="" /> <h5>地平线 8 号旅行箱</h5> <p>简约设计、德国拜耳 PC 箱体</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>299.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>169.00</span></div> </div> </div> </section> <section class="hotitem"> <h1>论坛精选</h1> <div class="container"> <div> <img src="" /> <h5>地平线 8 号 28 寸旅行箱</h5> <p>一款让旅行箱挑剔者满意的旅行箱</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>599.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号 全功能城市背包 Atlas X</h5> <p>一款通行城市的全功能双肩包</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>299.00</div> </p> </div> <div> <img src="" /> <h5>地平线 8 号旅行箱</h5> <p>简约设计、德国拜耳 PC 箱体</p> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>299.00</span></div> </div> <div> <img src="" /> <h5>地平线 8 号商务旅行箱</h5> <p>为了野心和远方</p> <ul> <li><span></span></li> <li><span></span></li> </ul> <div><i>¥</i><span>169.00</span></div> </div> </div> </section> </div> <footer> <div id="footnav"> <ul> <li> <h3>订单服务 </h3> <ul> <li><a href="#">购买指南</a></li> <li><a href="#">送货政策</a></li> </ul> </li> <li> <h3>服务支持 </h3> <ul> <li><a href="#">自助服务</a></li> <li><a href="#">使用帮助</a></li> <li><a href="#">维修门店</a></li> </ul> </li> <li> <h3>媒体中心</h3> <ul> <li><a href="#">新闻动态 </a></li> <li><a href="#">官方视频 </a></li> <li><a href="#">图片资源 </a></li> </ul> </li> <li> <h3>关于我们</h3> <ul> <li><a href="#">新浪微博 </a></li> <li><a href="#">官方微信 </a></li> <li><a href="#">荣誉奖项</a></li> </ul> </li> <li> <h3> </h3> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> </ul> <ul class="hh"> <li>400 - 626 - 5666</li> <li>周一至周日 9:00-18:00</li> <li> （仅收市话费）</li> <li><a>在线帮助</a></li> </ul> </div> <div id="info"> <p>Copyright © 2019 smartisan.com 版权所有</p> <ul> <li><a href="#">法律声明</a></li> <li><a href="#">隐私条款</a></li> </ul> <div class="last"> <span>京ICP备18020659号</span> </div> </div> </footer> <div id="totop">返回顶部</div> </div> </body></html>关键词：例子,学习
