HTML5+CSS3初学尝试(小米官网首页)
2024-06-07 11:12:51
刚学完html 和 css 自己尝试写了个小米官网首页的静态页面,不包含js部分(还在学)
效果如下:
问题总结:
- 页面资源和布局尺寸皆是从原网站扣下来的(并非自己测量)
- 类命名较少,基本通过各种元素后代选择器,伪类选择器等来书写样式
- css代码量冗余度很高,不会那种可复用css单独提出来写(哪些样式会被复用,写的时候想不到)
就介于上面几点来说, 总感觉自己不是真正的会写html和css(脑子里没有模型)
html代码(没写注释)
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8" /><link rel="shortcut icon" href="./favicon.ico" /><link rel="stylesheet" href="css/index.css" /><title>小米商城</title></head><body><div class="top_bg"><a href="#"></a></div><div class="nav"><div class="nav_nav w"><div class="nav_nav_left"><ul><li><a href="#">小米商城</a><span>|</span></li><li><a href="#">MIUI</a><span>|</span></li><li><a href="#">loT</a><span>|</span></li><li><a href="#">云服务</a><span>|</span></li><li><a href="#">天星数科</a><span>|</span></li><li><a href="#">有品</a><span>|</span></li><li><a href="#">小爱开放平台</a><span>|</span></li><li><a href="#">企业团购</a><span>|</span></li><li><a href="#">资质证照</a><span>|</span></li><li><a href="#">协议规则</a><span>|</span></li><li><a href="#">下载app</a><span>|</span></li><li><a href="#">智能生活</a><span>|</span></li><li><a href="#">Select Location</a></li></ul></div><div class="nav_nav_right"><ul><li class="gouwuche"><a href="#" class="gwc">购物车 (0)</a><div class="pop_window">购物车中还没有商品, 赶紧选购吧!</div></li><li><a href="#">消息通知</a></li><li><a href="#">注册</a><span>|</span></li><li><a href="#">登录</a><span>|</span></li></ul></div></div></div><div class="logo"><div class="logo_nav w"><div class="logo_png"><a href="#" class="logo_a"></a></div><div class="logo_nav_c"><ul><li><a href="#">小米手机</a></li><li><a href="#">Redmi红米</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><li><a href="#">服务</a></li><li><a href="#">社区</a></li></ul></div><div class="logo_search"><form action="#"><inputtype="search"name=""id=""placeholder="手机"autocomplete="off"/><input type="submit" value="" /></form></div><div class="pop_nav"></div></div></div><div class="banner w"><div class="banner_nav"><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><li><a href="#">电源 配件</a></li><li><a href="#">健康 儿童</a></li><li><a href="#">耳机 音箱</a></li><li><a href="#">生活箱包 电话卡</a></li></ul></div><div class="banner_image"><a href="#"><img src="images/note9.webp" alt="图片加载失败" /></a><div class="left"></div><div class="right"></div><ul class="dian"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul></div></div><div class="cp"><div class="chanping w"><div class="home_list"><ul><li><a href=""><img src="images/小米秒杀.png " alt="" />小米秒杀</a></li><li><a href=""><img src="images/企业团购.png " alt="" />企业团购</a></li><li><a href=""><img src="images/F码通道.png " alt="" />F码通道</a></li><li><a href=""><img src="images/米粉卡.png " alt="" />米粉卡</a></li><li><a href=""><img src="images/以旧换新.png " alt="" />以旧换新</a></li><li><a href=""><img src="images/话费充值.png " alt="" />话费充值</a></li></ul></div><div class="chanping_banner"><ul><li><a href="#"><img src="images/K30.jpg" alt="" /></a></li><li><a href="#"><img src="images/10X.jpg" alt="" /></a></li><li><a href="#"><img src="images/手表.jpg" alt="" /></a></li></ul></div></div></div><div class="miaosha"><div class="xiaomimiaosha w"><div class="miaosha_text">小米秒杀</div><div class="miaosha_img"><ul><li><div><p>22:00 场</p><img src="images/闪电.jpg" alt="" /><p>距离结束还有</p><div><span>00</span><i>:</i><span>00</span><i>:</i><span>00</span></div></div></li><li><a href="#"><div><img src="images/手表.webp" alt="" /></div><h3>小米手表</h3><p>超长续航</p><p><span>678元</span><span>999元</span></p></a></li><li><a href="#"><div><img src="images/电视.webp" alt="" /></div><h3>只能电视你的最爱</h3><p>超高清离子屏幕</p><p><span>1678元</span><span>1999元</span></p></a></li><li><a href="#"><div><img src="images/笔记本.webp" alt="" /></div><h3>小米笔记本</h3><p>超强性能,畅玩3A打坐</p><p><span>3678元</span><span>3999元</span></p></a></li><li><a href="#"><div><img src="images/扫地机.webp" alt="" /></div><h3>扫地机器人</h3><p>360°无死角清扫</p><p><span>2678元</span><span>2999元</span></p></a></li></ul></div></div><div class="note9 w"><a href=""><img src="images/a59db7dac2804ee2b5c7be1b02b3770e.webp" alt=""/></a></div><div class="phone w"><div class="mi-phone-hd"><h3>手机</h3><a href="#">查看全部 <span></span></a></div><div class="mi_class"><ul><li class="mi11"><a href="#"><img src="images/mi11.webp" alt="" /></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li><li><a href=""><div class="phone_img"><img src="/images/小米11.webp" alt="" /></div><h3>小米11</h3><p>骁龙888 | 2K四曲面屏</p><p>3999元起</p></a></li></ul></div></div></div><footer><div class="server w"><ul><li><a href="#">预约维修服务</a></li><li><a href="#">7天无理由退货</a></li><li><a href="#">15天免费换货</a></li><li><a href="#">满99元包邮</a></li><li><a href="#">520余家售后网点</a></li></ul></div><div class="help w"><div class="help_center"><ul><li><dt>帮助中心</dt><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></li><li><dt>服务支持</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">自助服务</a></dd><dd><a href="#">相关下载</a></dd></li><li><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">服务网点</a></dd><dd><a href="#">授权体验店</a></dd></li><li><dt>关于小米</dt><dd><a href="#">了解小米</a></dd><dd><a href="#">加入小米</a></dd><dd><a href="#">投资者关系</a></dd><dd><a href="#">企业社会责任</a></dd><dd><a href="#">廉洁举报</a></dd></li><li><dt>关注我们</dt><dd><a href="#">新浪微博</a></dd><dd><a href="#">官方微博</a></dd><dd><a href="#">联系我们</a></dd><dd><a href="#">公益基金会</a></dd></li><li><dt>特色服务</dt><dd><a href="#">F码通道</a></dd><dd><a href="#">礼物码</a></dd><dd><a href="#">防伪查询</a></dd></li></ul><div class="title"><h3>400-100-5678</h3><p>8:00-18:00（仅收市话费)</p><div><a href="">人工客服</a></div></div></div></div><div class="fott"><div class="copy w"><div class="logo_footer"></div><div class="copy_fotter"><p><a href="#">小米商城</a> | <a href="#">MIUI</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> |<a href="#">小米商城隐私政策</a> |<a href="#">小米商城用户协议</a> | <a href="#">问题反馈</a> |<a href="#">Select Location</a></p><p><a href="#">北京互联网法院法律服务工作站</a> |<a href="#">中国消费者协会 </a> |<a href="#">北京市消费者协会 </a></p><p class="copy_info">© mi.com 京ICP证110507号 京ICP备10046444号京公网安备11010802020134号 京网文[2020]0276-042号<br />（京）网械平台备字（2018）第00005号 互联网药品信息服务资格证(京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br />增值电信业务许可证 网络食品经营备案 京食药网食备202010048食品经营许可证<br />违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p><div><img src="images/truste.png" alt="" /><img src="images/v-logo-2.png" alt="" /><img src="images/v-logo-1.png" alt="" /><img src="images/ba10428a4f9495ac310fd0b5e0cf8370.png" alt="" /><img src="images/8f962cacf8634116eeea141abfb31bd7.png" alt="" /></div></div></div></div></footer></body>
</html>* {padding: 0;margin: 0;box-sizing: border-box;
}a {text-decoration: none;
}ul li {list-style: none;
}.w {width: 1226px;margin: 0 auto;
}@font-face {font-family: 'iconfont';src: url('../fonts/iconfont.eot');src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg');
}.top_bg,
.top_bg a {display: block;position: relative;top: 0;width: 100%;height: 120px;background-image: url(../images/top_bg.jpg);background-size: auto 120px;background-position: 50% 50%;
}.nav {position: relative;width: 100%;height: 40px;background-color: #333;font-size: 12px;color: #b0b0b0;line-height: 40px;
}.nav_nav .nav_nav_left {float: left;
}.nav_nav .nav_nav_left li {float: left;
}.nav_nav .nav_nav_left li a {color: #b0b0b0;
}.nav_nav .nav_nav_left li span {color: #424242;margin: 0 6px;
}.nav_nav li a:hover {color: #f2fff2;
}.nav_nav_right {float: right;
}.nav_nav_right li {float: right;
}.nav_nav_right li a {color: #b0b0b0;
}.gouwuche .gwc::before {font-family: 'iconfont';content: "\e607";font-size: 14px;margin-right: 5px;
}.nav_nav_right li span {color: #424242;margin: 0 6px;
}.nav_nav_right .gouwuche {position: relative;width: 120px;text-align: center;margin-left: 15px;background-color: #424242;z-index: 32;
}.nav_nav_right .gouwuche a {display: inline-block;width: 100%;z-index: 32;
}.nav_nav_right .gouwuche:hover a {background-color: #fff;color: #ff6700;
}.nav_nav_right .gouwuche:hover .pop_window {height: 100px;
}.nav_nav_right li .pop_window {position: absolute;top: 40px;right: 0;height: 0;width: 316px;line-height: 100px;text-align: center;box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);transition: height 0.3s;overflow: hidden;color: #424242;background-color: #fff;
}.logo {position: relative;width: 100%;height: 100px;/*background-color: #444;*/font-size: 16px;
}.logo_nav {position: relative;height: 100%;
}.logo_png {position: relative;float: left;width: 55px;height: 55px;margin-top: 22px;overflow: hidden;
}.logo_png .logo_a:before,
.logo_png .logo_a:after {content: "";position: absolute;top: 0;left: 0;width: 55px;height: 55px;background-color: #ff6700;background-repeat: no-repeat;background-size: 100%;transition: all 0.3s;
}.logo_png .logo_a:before {background-image: url(../images/mi-logo.png);
}.logo_png .logo_a:after {background-image: url(../images/mi-home.png);margin-left: -55px;
}.logo_png:hover .logo_a::after {margin-left: 0;
}.logo_png:hover .logo_a::before {margin-left: 55px;
}.logo_nav_c {float: left;margin-left: 180px;
}.logo_nav a {color: #333;
}.logo_nav a:hover {color: #ff6700;
}.logo_nav ul li {float: left;line-height: 100px;padding: 0 10px;
}.logo_search {float: right;line-height: 100px;z-index: 1;
}.logo_search input {position: relative;
}.logo_search input[type="submit"] {position: relative;top: 4.5px;font-family: 'iconfont';font-size: 24px;right: 0;width: 50px;height: 50.3px;color: #616161;border: 1px solid #e0e0e0;outline: 0;background-color: #fff;cursor: pointer;transition: all 0.3s;
}.logo_search input[type="submit"]:hover {background-color: #ff6700;color: #ffffff;z-index: 1;
}.logo_search input[type="search"] {width: 223px;height: 48px;padding: 0 10px;box-sizing: content-box;color: inherit;border: 1px solid #e0e0e0;outline: 0;-webkit-appearance: none;margin-right: -7px;cursor: text;
}.banner_image a img {width: 100%;height: 460px;
}.banner {position: relative;height: 460px;
}.banner_nav {position: absolute;top: 0;left: 0;height: 100%;width: 234px;vertical-align: center;background: rgba(0, 0, 0, .3);z-index: 1;
}.banner_image {position: absolute;top: 0;left: 0;
}.banner_nav ul {margin-top: 30px;
}.banner_nav li {height: 40px;font-size: 14px;line-height: 40px;
}.banner_nav li a {position: relative;display: block;padding-left: 30px;height: 100%;width: 100%;color: #Fff;
}.banner_nav li a::after {position: absolute;right: 15px;font-family: 'iconfont';content: "\e618";
}.banner_nav li:hover a {background-color: #ff6700;
}.banner_image div {font-family: 'iconfont';position: absolute;top: 50%;transform: translate(0, -50%);height: 80px;width: 45px;font-size: 32px;text-align: center;line-height: 80px;color: #616161;
}.banner_image .left {left: 234px;border-radius: 0 3px 3px 0;
}.banner_image .right {right: 0;border-radius: 3px 0 0 3px;
}.banner_image div:hover {background: rgba(0, 0, 0, .5);color: rgba(255, 255, 255, 0.603);
}.banner_image ul {position: absolute;bottom: 26px;right: 32px;
}.banner_image ul li {float: left;width: 8px;height: 8px;background: rgba(0, 0, 0, .4);border-radius: 50%;margin: 0 4px;border: 1.5px solid rgba(255, 255, 255, 0.603);
}.dian li:nth-child(2) {background: rgba(255, 255, 255, .4);
}.banner_image ul li a {float: left;width: 100%;height: 100%;
}.banner_image ul li:hover {background: rgba(255, 255, 255, .4);
}.chanping {margin-top: 14px;height: 170px;
}.home_list {float: left;width: 234px;height: 170px;font-size: 12px;background-color: #5f5750;
}.home_list ul {margin-left: 10px;
}.home_list ul li {position: relative;float: left;width: 70px;height: 82px;text-align: center;
}.home_list ul li a {display: block;position: relative;color: #fff;opacity: .7;text-align: center;margin-top: 16px;margin-bottom: 10px;
}.home_list ul li a::before {top: -10px;left: 0;width: 1px;height: 65px;position: absolute;content: "";background: #665e57;
}.home_list ul li::after {width: 56px;height: 1px;position: absolute;top: 0;left: 8px;content: "";background: #665e57;
}.home_list ul li img {display: block;height: 24px;width: 24px;margin: 20px auto 5px;
}.home_list ul li a:hover {opacity: 1;
}.chanping_banner {float: left;height: 100%;
}.chanping_banner li {float: left;margin-left: 14.6px;
}.chanping_banner li img {width: 316px;height: 170px;
}.miaosha {margin-top: 25px;width: 100%;background-color: #f5f5f5;padding-bottom: 30px;
}.miaosha_text {height: 58px;font-size: 22px;line-height: 58px;font-weight: 200;color: #333;
}.miaosha_img {position: relative;height: 340px;
}.miaosha_img::after,
.miaosha_img::before {font-family: 'iconfont';position: absolute;top: -35px;height: 24px;width: 36px;border: 1px solid #e0e0e0;text-align: center;line-height: 24px;font-size: 12px;color: #b0b0b0;
}.miaosha_img::after {content: "\e680";right: 37px;
}.miaosha_img::before {content: "\e618";right: 0px;
}.miaosha_img ul li {float: left;width: 234px;height: 340px;background-color: rgba(255, 255, 255, 0.794);border-top: 1px solid red;
}.miaosha_img ul li>div {padding-top: 39px;text-align: center;height: 340px;background-color: #f1eded;
}.miaosha_img ul li>div img {margin: 25px 0;
}.miaosha_img ul li>div p:nth-of-type(1) {color: red;font-size: 21px;
}.miaosha_img ul li>div p:nth-of-type(2) {color: rgba(0, 0, 0, .54);font-size: 15px;
}.miaosha_img ul li>div div {width: 168px;margin: 28px auto 0;
}.miaosha_img ul li>div div span {display: inline-block;width: 46px;height: 46px;font-size: 24px;line-height: 46px;color: #Fff;background-color: #605751;
}.miaosha_img ul li>div div i {font-style: normal;display: inline-block;width: 15px;font-size: 24px;line-height: 46px;
}.miaosha_img ul li:nth-child(n+2) {margin-left: 14px;border-top: 1px solid blue;
}.miaosha_img ul li:nth-child(n+2) a {margin-top: 39px;display: inline-block;width: 234px;text-align: center;
}.miaosha_img ul li:nth-child(n+2) a img {width: 160px;height: 160px;
}.miaosha_img ul li:nth-child(n+2) a h3 {font-size: 14px;font-weight: 400;line-height: 30px;color: #212121;
}.miaosha_img ul li:nth-child(n+2) a p:first-of-type {font-size: 12px;color: #b0b0b0;
}.miaosha_img ul li:nth-child(n+2) a p:last-of-type {margin-top: 15px;
}.miaosha_img ul li:nth-child(n+2) a p:last-of-type span {font-size: 14px;
}.miaosha_img ul li:nth-child(n+2) a p:last-of-type span:first-child {color: #ff6709;
}.miaosha_img ul li:nth-child(n+2) a p:last-of-type span:last-child {color: #b0b0b0;text-decoration: line-through;
}.note9 {height: 120px;margin: 25px auto;
}.note9 a img {width: 100%;
}.phone {height: 672px;
}.mi-phone-hd {height: 58px;
}.mi-phone-hd h3 {float: left;height: 58px;font-weight: 200;color: #333;line-height: 58px;font-size: 22px;
}.mi-phone-hd a {float: right;height: 58px;color: #424242;line-height: 68px;transition: all .3s;
}.mi-phone-hd a:hover {color: #ff6700;
}.mi-phone-hd a span {position: relative;display: inline-block;width: 20px;height: 20px;background-color: #b0b0b0;border-radius: 50%;font-size: 12px;color: #ffffff;vertical-align: -4px;font-size: 12px;transition: all .3s;
}.mi-phone-hd a:hover span {background-color: #ff6700;
}.mi-phone-hd a span::before {content: "";position: absolute;width: 5px;height: 5px;border-top: 2px solid #ffffff;border-right: 2px solid #ffffff;top: 6px;left: 5px;transform: rotate(45deg);
}.mi11 {float: left;width: 234px;height: 614px;
}.mi11 a img {width: 100%;height: 100%;
}.mi_class {float: left;height: 100%;
}.mi_class ul li:nth-child(n+2) {float: left;width: 234px;height: 300px;background-color: #Fff;margin: 0 0 14px 14px;
}.mi_class ul li:nth-child(n+2) a {display: block;width: 234px;height: 300px;text-align: center;
}.phone_img {height: 160px;width: 160px;margin: 20px auto;
}.phone_img img {width: 100%;height: 100%;
}.mi_class ul li:nth-child(n+2) a h3 {font-weight: 400;font-size: 14px;color: #333;margin-bottom: 5px;
}.mi_class ul li:nth-child(n+2) a p:nth-of-type(1) {font-size: 12px;color: #b0b0b0;margin-bottom: 15px;
}.mi_class ul li:nth-child(n+2) a p:nth-of-type(2) {color: #ff6700;font-size: 14px;
}.mi_class ul li:hover {box-shadow: 0 15px 15px rgba(0, 0, 0, .2);/* transform: translate3d(0, -3px, 0); */transform: translateY(-3px);
}.mi_class ul li {transition: all .3s;
}.server {height: 80px;/* background-color: #666; */border-bottom: 1px solid #ccc;
}.server ul li {float: left;font-size: 16px;width: 20%;border-right: 1px solid #e0e0e0;text-align: center;
}.server ul li a {color: #616161;transition: all .2s;
}.server ul li a:hover {color: #ff6700;
}.server ul li:last-child {border: 0;
}.server ul li a::before {font-family: 'iconfont';content: "\e607";font-size: 30px;margin-right: 6px;vertical-align: -3px;
}.help {padding: 40px 0;
}.help ul li {float: left;width: 163px;
}.help ul li dt {margin-bottom: 20px;color: #424242;font-size: 14px;
}.help ul li dd {margin: 10px 0;
}.help ul li dd a {color: #757575;font-size: 12px;
}.help ul li dd a:hover {color: #ff6700;
}.title {float: left;border-left: 1px solid #e0e0e0;width: 230px;text-align: center;
}.title h3 {color: #ff6700;font-size: 22px;margin-bottom: 10px;
}.title p {font-size: 12px;color: #616161;text-align: center;margin-bottom: 20px;
}.title div {width: 120px;height: 30px;border: 1px solid #ff6700;margin: 0 auto;color: #ff6700;
}.title div a {display: block;height: 30px;width: 120px;color: #ff6700;font-size: 12px;line-height: 30px;transition: all .3s;
}.title div a::before {font-family: 'iconfont';content: "\e7b3";font-size: 16px;vertical-align: -1px;
}.title div a:hover {background-color: #ff6700;color: #Fff;
}.help_center {overflow: hidden;
}.logo_footer {float: left;width: 57px;background: url(../images/logo-footer.png) no-repeat;height: 157px;margin-right: 10px;
}.copy_fotter p,
.copy_fotter p a {color: #757575;font-size: 12px;
}.copy_fotter p:last-of-type {color: #b0b0b0;
}.copy_fotter div img:nth-of-type(-n+4) {height: 28px;
}.copy_fotter div img:last-child {height: 40px;
}.fott {background-color: #f5f5f5;
}.copy {padding-top: 30px;
}
资源图片就不传了
HTML5+CSS3初学尝试(小米官网首页)相关推荐
- 【Web】HTML+CSS（No.55）实现小米官网首页静态效果
模仿实现小米官网首页静态布局 需要素材点击图片联系我或私信.评论 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...
- HTML+CSS小米官网首页 (1页侧拉菜单)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
- Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
- 仿写小米官网 简单的HTML+CSS练习
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- 仿写小米官网 右边工具导航栏
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
- HTML5+CSS3实现小米官网（完整版）
前言 小米官网其实是一个结构非常简单的网页,相比与小米商城,难度降低了很多很多.我也写过一次小米商城,可以移步到我的主页.本篇文章简单分析一下小米官网的静态结构,文章末尾附源代码和素材. 一.效果展示 ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业：商城网站设计——防锤子手机商城官网首页模板(HTML+CSS+JavaScript ) 电商网页HTML代码...
HTML5期末大作业:商城网站设计--防锤子手机商城官网首页模板HTML+CSS+JavaScript 电商网页HTML代码 学生网页课程设计期末作业下载 商城网页大学生网页设计制作成 临近期末, 你 ...
- HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品 常见网页设计作业题材有 个人. 美食 ...
- HTML5期末大作业：官网时尚购物(网站设计——美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3
HTML5期末大作业:官网时尚购物(网站设计--美丽说官网时尚购物(1页) HTML+CSS+JavaScript 网页设计成品DW静态网页Html5响应式css3 常见网页设计作业题材有 个人. 美 ...
最新文章
- 计算机二级理工类报哪个,计算机二级考哪一科目，毕业后找工作会对科目有要求吗？还是说不管什么科目有证就行了？...
- 网站推广——网站推广优化期间突然发现网站收录降低怎么回事？
- 用property声明属性时,strong,copy,weak的一般用法
- 站着办公有助减轻体重
- 清北·NOIP2017济南考前冲刺班 DAY1 morning
- 烟台大学计算机专业调剂贴吧,烟台大学计算机与控制工程学院2021年考研复试与调剂的说明...
- Java 中 Vector、ArrayList、List 使用深入剖析
- Windows rundll32的用法-批处理管理打印机
- css+div排版如何支持所有浏览器
- Java程序员春招三面蚂蚁金服，丹丹丹学妹哭着对我说：学长
- python怎么读write_python中write方法是如何使用？
- Oracle内部错误ORA-07445[kpopfr()+339] [SIGFPE]一例
- 网页隐藏index.php,如何隐藏url中的index.php
- 高手对中科院考博英语的分享
- ai人工智能写歌词app，ai写歌词网站，ai作词软件创作版，作词人的辅助工具，押韵助手
- 基于C++实现DBSCAN聚类算法
- 及时复盘的好处_及时复盘，促进成长
- Stack overflow (CVF, IVF)
- （Python）视频生成器
- 键盘驱动程序设计(中)