CSS案例之小米首页样面
小米首页样面案例
学了几天的css，做了一个小实例。那先来说说感受：发现做一个页面说简单也简单，说不简单也不简单。对于刚开始学习的我，里面的每个小数据都要经过几次修改（无奈╮(╯▽╰)╭）。有的时候看着视频里的老师做的那么轻松简单，我都有一种复杂的感情（捂脸哭）。我发现这个没法表情真的不太好哎。在制作的过程中有一个小地方真的要把我气吐血了，就是有的时候呢父盒子不好定高度，而子盒子又浮动，所以导致父盒子高度就变成零，然后你给父盒子设置的背景颜色就没啦。刚开始一直没想起来是因为这个因素，因为在制作的过程中，中间隔了几天，然后前面的知识难免有些淡忘（嘿嘿）。后来发现了要清除浮动，后来试了试，还是老样子，也不知道自己到底错哪了，整了好久也没整出来整个人都不好了。最后看了看视频才知道，自己到底错哪了…
下面时我做的一个截图
做到最后那一点怎么改数据都没用（估计自己又错哪啦😂），那就先这样吧，算是对之间几天学的用于实例吧。下面附上自己写的代码，以后只要有电脑打开自己的博客随时看。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米样页</title><link rel="stylesheet" type="text/css" href="style.css">
</head>
<body><!-- 头部的开始 --><div class="header w"><!-- logo --><div class="logo"><img src="images/images/logo.jpg"></div><!-- nav导航栏 --><div class="nav"> <!--当导航栏里面的字数不一样时，不给盒子宽度，用padding撑大即可 --><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><!-- search搜索框 --><div class="search"><input type="text" value="小米9Pro5G Redmi Note8"><button></button></div></div><!-- 头部的结束 --><!-- banner部分开始 --><div class="banner"><div class="w"><!-- 左侧 subnav --><div class="subnav"><ul><li><a href="#">手机 电话卡<span>></span></a></li><li><a href="#">电视 盒子<span>></span></a></li><li><a href="#">笔记本 显示器 平板<span>></span></a></li><li><a href="#">家电 插线板<span>></span></a></li><li><a href="#">出行 穿戴<span>></span></a></li><li><a href="#">智能 路由器<span>></span></a></li><li><a href="#">电源 配件<span>></span></a></li><li><a href="#">健康 儿童<span>></span></a></li><li><a href="#">耳机 音箱<span>></span></a></li><li><a href="#">生活 箱包<span>></span></a></li></ul></div></div></div><!-- banner部分结束 --><!-- 第二个大盒子开始 --><div class="nihao"><div class="w"><div class="left"><ul><li><a href="#">小米秒杀</a></li><li><a href="#">企业团购</a></li><li><a href="#">F码通道</a></li><li><a href="#">米粉卡</a></li><li><a href="#">以旧换新</a></li><li><a href="#">话费充值</a></li></ul></div><div class="right"><ul><li><a href="#"><img src="images/images/555.jpg"></a></li><li><a href="#"><img src="images/images/444.jpg"></a></li><li><a href="#"><img src="images/images/333.jpg"></a></li></ul></div></div></div><!-- 第二个大盒子结束 --><!-- 第三个大盒子开始 --><div class="three w"><div class="box-hd"><h3>小米闪购</h3></div><div class="box-bd"><ul><li><img src="images/images/666.jpg"><h4>米家LED吸顶灯 白色</h4><h6>用光线，还原理想生活</h6><p>349元 <del>399元</del></p></li><li><img src="images/images/777.jpg"><h4>小米净水器500G 白色</h4><h6>直出纯净水更畅快</h6><p>1399元 <del>2199元</del></p></li><li><img src="images/images/888.jpg"><h4>烟灶套装（天然气）</h4><h6>点火排烟，风随火动</h6><p>1699元 <del>2298元</del></p></li><li><img src="images/images/999.jpg"><h4>玺佳机械表.T系列 太空</h4><h6>颠覆创新—腕间悬浮时光</h6><p>499元<del>599元</del></p></li><li><img src="images/images/666.jpg"><h4>米家LED吸顶灯 白色</h4><h6>用光线，还原理想生活</h6><p>349元 <del>399元</del></p></li></ul></div></div><!-- 第三个大盒子结束 --><!-- 第四个盒子开始 --><div class="four w"><img src="images/images/000.jpg"></div><!-- 第四个盒子结束 --><!-- 第五个盒子开始 --><div class="five w"><div class="box-hd"><h3>手机</h3></div><div class="box-bd clearfix"><div class="ff"><a href="#"><img src="images/images/112.png"></a> </div><div class="tt"><ul><li><a href="#"><img src="images/images/221.png"></a><h4>小米CC9 Pro</h4><h5>一忆像素 五摄四闪</h5><p>2599元起<del>2799元</del></p></li><li><a href="#"><img src="images/images/223.png"></a><h4>Redmi K30 5G</h4><h5>双模5G，120Hz流速屏</h5><p>1999元起</p></li><li><a href="#"><img src="images/images/224.png"></a><h4>Redmi K30</h4><h5>120Hz流速屏，全速热爱</h5><p>1599元起</p></li><li><a href="#"><img src="images/images/225.png"></a><h4>小米10</h4><h5>骁龙865/1亿像素相机</h5><p>3999元起</p></li><li><a href="#"><img src="images/images/226.png"></a><h4>Redmi Note 8</h4><h5>千元4800万四摄</h5><p>899元起<del>999元</del></p></li><li><a href="#"><img src="images/images/227.png"></a><h4>Redmi Note 8 Pro</h4><h5>6400万全场景四摄</h5><p>1199元起<del>1399元</del></p></li><li><a href="#"><img src="images/images/228.png"></a><h4>Redmi 8A</h4><h5>5000mAh超长续航</h5><p>599元起<del>699</del></p></li><li><a href="#"><img src="images/images/229.png"></a><h4>Redmi 8</h4><h5>5000mAh超长续航</h5><p>699元起<del>799元</del></p></li></ul></div></div></div><!-- 第五个盒子结束 --><!-- 底部开始 --><div class="foot"><div class="w"><div class="hh"><a href="#">预约维修服务</a> |<a href="#">七天无理由退货</a>|<a href="#">15天免费换货</a> |<a href="#">满99元包邮</a> |<a href="#">520余家售后网点</a></div><div class="xx"> <dl><dt>帮助中心</dt><dd><a href="#">账户管理</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>服务支持</dt><dd><a href="#">售后政策</a></dd><dd><a href="#">自主服务</a></dd><dd><a href="#">相关下载</a></dd></dl><dl><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl><dl><dt>线下门店</dt><dd><a href="#">小米之家</a></dd><dd><a href="#">购物指南</a></dd><dd><a href="#">订单操作</a></dd></dl></div><div class="hehe"><p class="ww">400-100-5678</p><p>周一至周日 8:00-18:00 <br>(仅收市话费)</p></div></div></div><!-- 底部结束 -->
</body>
</html>
*{margin: 0;padding: 0;
}
li {list-style: none;
}.body{background-color: #ffffff;}
/*版心*/
.w {width: 1473px;margin: auto;
}
.header {height: 67px;margin: 27px auto;/*background-color: pink;*/
}
.logo {float: left;margin-right: 217px;
}
.nav ul li {float: left;}
.nav ul li a {display: block;height: 67px;font-size: 16px;color: #333333;padding: 22px 10px; /*没有宽度，padding不会撑大盒子*/text-align: 67px;text-decoration: none;
}
.nav ul li a:hover {color: #ff6700;
}
.search input {float: left;/*表单为行内块，之间有空隙，让其浮动紧挨*/width: 222px;height: 63px;margin-left: 198px;border:2px solid #e0e0e0;border-right: 0;font-size: 16px;color: #ccc;padding-left: 73px;
}
.search button {float: left;/*表单为行内块，之间有空隙，让其浮动紧挨*/width: 64px;height: 67px;background:url(images/images/111.jpg);
}
/*banner开始*/
.banner {height: 553px;background:url(images/images/222.jpg) no-repeat;background-position: top center;
}
.subnav {width: 266px;height: 543px;padding: 5px 10px;background:rgba(0,0,0,0.2);
}
.subnav ul li {margin: 32px 36px ;height: 20px;line-height: 20px;
}
.subnav span {float: right;/*将 > 到右边去*/
}
.subnav li a {font-size: 16px;color: #ffffff;text-decoration: none;
}
.subnav li a:hover {color: #ff6700;
}
/*banner结束*/
/*第二个大盒子开始*/
.nihao {margin-top: 16px;
}
.left {float: left;width: 286px;height: 205px;background-color: #5f5750;
}
.left li {float: left;width: 76px;height: 100px;border: 1px solid #ceccca;border-right: 0;border-bottom: 0;padding-left: 15px;
}
.left li a {color: #ceccca;text-align: center;text-decoration: none;line-height: 100px;
}
.left li a:hover {color: #fff;
}
.right ul li {float: right;width: 381px;height: 205px;margin-left: 14px;/*background-color: yellow;*/
}
/*第二个大盒子结束*/
/*第三个大盒子开始*/
.three {margin-top: 240px;
}
.box-hd h3 {height: 50px;line-height: 50px;margin-bottom: 20px;/*border: 1px solid #000;*/color: #333;font-weight: 200;/*background-color: pink;*/
}
.box-bd {width: 1500px;
}
.box-bd li {float: left;width: 285px;height: 409px;margin-right: 12px;/*background-color: pink;*/
}
.three .box-bd li img {widows: 100%;
}
.three .box-bd li h4 {margin: 30px 55px 0 55px;font-weight: 400;
}
.three .box-bd li h6 {margin: 10px 80px;font-weight: 400;color: #adadad;
}
.three .box-bd li p {margin: 30px 80px;font-weight: 400;color: #fa7c09;
}
.box-bd li del {color: #adadad;
}
/*第三个大盒子结束*/
.four {margin-top: 30px;margin-bottom:20px;
}
.box-bd .ff {float: left;
}
/*第五个盒子开始*/
/*清除浮动*/
.clearfix:before,
.clearfix:after{content: "";display: table;
}
.clearfix:after{*zoom:1; /*ie6,7专用清除浮动的样式*/
}
.clearfix:after{clear: both;
}
.tt li {float: right;width: 285px;height: 360px;margin-bottom: 15px;border: 1px solid #adadad;box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);/*background-color: red;*/
}
.tt li img {margin: 0 20px;height: 250px;
}
.tt li h4 {margin: 20px 55px 0 80px;font-weight: 400;
}
.tt li h5 {margin: 10px 65px;font-weight: 400;color: #adadad;
}
.tt li p {margin: 10px 80px;font-weight: 400;color: #fa7c09;
}
.tt li a:hover {box-shadow: 2px 2px 2px 2px rgba(0,0,0,.3);
}
/*第五个盒子结束*/
/*底部开始*/
.foot {height: 300px;/*background-color: pink;*/
}
.hh {border-bottom: 2px solid #e0e0e0;
}
.hh a {display: inline-block;height: 95px;width: 282px;text-align: center;text-decoration: none;color: #616179;line-height: 95px;/*background-color: yellow;*/
}
.hh a:hover {color: #ff6700;
}
.xx dt {margin: 50px 120px 30px 0;
}
.xx dd {margin: 0 120px 20px 0;
}
.xx dd a {color: #757575;font-size: 14px;text-decoration: none;
}
.xx dd a:hover {color: #ff6700;
}
.xx dl {float:left;
}
.hehe .ww {font-size: 22px;padding: 50px 50px 5px 100px;color: #ff6700;
}
/*底部结束*/
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！