1000字范文 > CSS练手小项目

CSS练手小项目

时间：2022-01-28 20:27:01

相关推荐

CSS练手小项目

刚学了一些CSS和HTML视频的百度搜索哔哩哔哩然后搜索尚硅谷CSS李立超，这个视频里面有HTML和CSS视频，老师讲的我认为是非常好，反正我听得懂，然后写出了这个项目，把小米首页几乎所有的模块都实现了一下，没有学JavaScript所以有的功能就没有实现，有些布局也很勉强，通过这次写项目，让我可以自主的去解决很多问题。如果我以下的源码有问题，或者编码的格式有不好的地方希望大佬们能提出来

对比效果

首先原网站图与自定义实现对比

首先是原图

自定实现的效果

通过如上的图可以看出并不是完全一样的。

声明

在这里附上html代码和css代码这里有一些网上资源的样式和图片都不会出现在下面。如果有想要的兄弟请私信我或者文章底下评论，我看见就会给你回。

CSS代码

/* 设置顶部容器的样式 */.top-wrapper{/* 设置宽度和高度以及行高背景颜色 */width: 100%;line-height: 40px;height: 40px;background-color: #333;}/* 设置内部容器中a的样式 */.outer-wrapper a{color: #b0b0b0;font-size: 12px;/* 使a转变为块元素 */display: block;}/* 设置移入超链接状态变化 */.outer-wrapper a:hover{color: white;}.outer-wrapper .line{color: #424242;font-size: 12px;margin: -1px 8px 0 8px;}/* 设置所有元素的浮动情况 */.title li{float: left;}.app{position: relative;}/* 设置app下的小三角 */.app::after{/* 先进行隐藏 */display: none;content: '';/* 设置这个高度宽度最小 */height: 0;width: 0;/* 开启绝对定位 */position: absolute;border: 8px solid transparent;/* 去除上边框 */border-top: none;/* 单独设置下边框的颜色 */border-bottom-color: #fff;/* 设置箭头的位置 */bottom: 0;left: 0;right: 0;margin: 0 auto;}/* 设置APP的下拉 */.app .qrcode{display: none;width: 124px;height: 148px;left: -35px;position: absolute;line-height: 1;/* 设置文字居中 */text-align: center;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, .3);z-index: 9999;}/* 开启app鼠标移入 */.app:hover .qrcode,.app:hover::after{/* 如上表示app的hover发生以后再进行app的after事件 */display: block;}/* 设置二维码图片 */.app .qrcode img{width: 90px;margin: 17px;margin-bottom: 14px;}/* 设置span字体样式 */.app .qrcode span{/* span是a的子元素，sapn先前的样式是继承a的，由于继承无优先级，现在给span设置新的样式就覆盖了继承的样式 */color: black;font-size: 14px;}.shop-cart{margin-left: 26px;}.shop-cart, .user-info li{float: right;}/* 设置购物车的超链接 */.shop-cart a{width: 120px;background-color: #424242;/* 设置内容水平居中 */text-align: center;}.shop-cart:hover a{background-color: #fff;color: #ff6700;}/* 设置购物图标 */.shop-cart i{margin-right: 2px;}/* 设置阴影 */.shop-cart .cart-content{box-shadow: 0 0 10px rgba(0, 0, 0, .3);padding: 79px 55px;background-color: blanchedalmond;position: relative;}/* 在购物车hover发生以后生成一个div */li:hover > .cart::after{/* 设置内容 */content: '购物车中还没有商品，赶紧选购吧！';/* 设置宽高 */width: 270px;height: 100px;/* 目的居中 */line-height: 100px;/* 移动生成div的位置 */margin-left: -253px;margin-top: 40px;/* 开启绝对定位 */position: absolute;box-shadow: 0 0 10px rgba(0, 0, 0, .3);color: #b0b0b0;/* 设置层级高 */z-index: 9999;background-color: #fff;}/* logo左边的位置 */.header-wrapper{position: relative;}/* 设置中间的header */.header{height: 100px;}/* logo设置向左浮动 */.header .logo{float: left;margin: 22.5px 0;}/* 将a变为块元素 */.header .logo a{display: block;width: 55px;height: 55px;}/* 设置图片的大小 */.header .logo a img{width: 55px;height: 55px;}/* 设置logo移入的效果 */.header .logo a img:hover{width: 53px;height: 53px;}/* 设置中间导航条浮动 */.header .nav-wrapper{float: left;margin-left: 7px;}/* 设置ul中的li浮动 */.nav > li{float: left;}/* 设置中间导航条的状态以及文字居中 */.header .nav{height: 100px;line-height: 100px;padding-left: 58px;}/* 设置导航条的字体样式 */.nav-wrapper li{font-size: 16px;padding-right: 20px;}/* 隐藏全部商品 */.hidden-li{/* 开启相对定位 */position: relative;}.all-goods{visibility: hidden;}/* 设置导航条文字移入样式 */.nav-wrapper li a:hover{color: #ff6700;}/* 设置每个分类下商品详细信息的下拉框 */.nav .goods-info{height: 0;width: 100%;overflow: hidden;/* 开启绝对定位 */position: absolute;top: 100px;left: 0;transition: height 0.4s;background-color: #fff;z-index: 9999;}/* 设置导航条鼠标移入状态的变化 */.nav li:not(:nth-of-type(9),:nth-of-type(10),:first-of-type):hover ~ .goods-info,.goods-info:hover{height: 228px;border: 1px solid rgba(224, 224, 224);box-shadow: 0 5px 3px rgba(0, 0, 0, .2);}/* 设置搜索框的容器 */.search-wrapper{width: 296px; float: right;margin-top: 25px;}/* 设置搜索输入框 */.search-input{box-sizing: border-box;height: 50px;width: 244px;border: none;padding: 0 10px;float: left;font-size: 15px;color: rgba(51, 51, 51);border: rgba(224, 224, 224) 1px solid;/* 去除轮廓线 */outline: none;}/* 设置搜索按钮 */.search-button{height: 50px;width: 52px;float: left;background-color: #fff;padding: 0;border: none;color: #616161;font-size: 18px;border: rgba(224, 224, 224) 1px solid;border-left: none;}/* 设置input获取焦点后的样式 */.search-input:focus,.search-input:focus + button{border-color: #ff6700;}/* 设置搜索按钮鼠标移入状态的变化 */.search-button:hover{background-color: #ff6700;color: #fff;border: none;}/* 设置左侧导航条的样式 */.left-menu{width: 234px;height: 420px;background-color: rgba(0, 0, 0, .6);position: absolute;left: -120px;line-height: 1;padding: 20px 0;z-index: 999;}/* 设置左侧导航条的超链接 */.left-menu a{display: block;height: 42px;line-height: 42px;color: white;padding: 0 30px;font-size: 14px;}/* 设置左侧导航条鼠标移入状态 */ul .left-menu a:hover{color: white;background-color: #ff6700;}/* 调整图标字体小箭头 */.left-menu a i{float: right;line-height: 42px;}/* 设置li相对banner相对定位 */.banner{position: relative;height: 460px;}/* 设置banner让他们重叠起来 */.banner .img-list li{position: absolute;}/* 设置banner */.banner img{width: 100%;vertical-align: top;}/* 设置导播图的小圆点 */.pointer{position: absolute;bottom: 22px;right: 35px;}/* 设置小按钮 */.pointer a{float: left;width: 6px;height: 6px;background-color: rgba(0, 0, 0, .4);border: 3px rgba(255, 255, 255, .4) solid;border-radius: 50%;margin-left: 6px;}/* 设置鼠标移入的状态 */.pointer a:hover,.pointer .active{border-color: rgba(0, 0, 0, .4);background-color: rgba(255, 255, 255, .4);}/* 设置箭头 */.prev-next a{width: 41px;height: 69px;background-image: url(./img/icon-slides.png);position: absolute;top: 0;bottom: 0;margin: auto 0;}/* 设置向前箭头的样式 */.prev-next .prev{left: 234px;background-position: 82px;}/* 设置下一个箭头的样式 */.prev-next .next{right: 0;background-position: 41px;}/* 设置向前箭头的鼠标移入 */.prev-next .prev:hover{background-position: 166px;}/* 设置下一个箭头的鼠标移入 */.prev-next .next:hover{background-position: 124px;}/* 设置回到顶部的元素 */.back-top{width: 27px;height: 220px;/* 开启固定定位 */position: fixed;bottom: 60px;right: 50%;margin-right: -639px;}/* 设置li */.back-top li{width: 26px;height: 42px;border: rgba(0, 0, 0, .2) 1px solid;border-bottom: none;}.back-top .shop{border-bottom: rgba(0, 0, 0, .2) 1px solid;}/* 设置图片 */.back-top img{width: 20px;padding-top: 12px;}/* 设置a的左右内边距 */.back-top li a{padding: 0 3px;}/* 设置工具条鼠标移入事件 */.back-top li:hover{background-color: #ff6700;}/* 广告部分的样式 */.ad-wrapper{height: 170px;margin-top: 14px;}/* 设置向左浮动 */.ad-wrapper .shortcut,.ad-wrapper li,.ad-wrapper .ad-img{float: left;}/* 设置左侧的快捷方式 */.ad-wrapper .shortcut{width: 231px;height: 170px;padding-top: 2px;padding-left: 3px;background-color: #5F5750;margin-right: 14px;}/* 设置超链接的字体 */.ad-wrapper .shortcut li{color: #cfccca;width: 76px;height: 84px;text-align: center;}/* 设置鼠标移入左侧事件 */.shortcut a:hover{color: #fff;}/* 设置图标字体 */.ad-wrapper .shortcut i{display: block;margin-top: 24px;margin-bottom: 6px;font-size: 20px;}.shortcut li{position: relative;}/* 设置上边框 */.shortcut li::before{content: '';position: absolute;width: 64px;height: 1px;left: 0;top: 0;right: 0;margin: 0 auto;background-color: #665e57;}/* 设置左边框 */.shortcut li::after{content: '';position: absolute;height: 70px;width: 1px;background-color: #665e57;top: 0;bottom: 0;margin: auto 0;left: 0;}/* 设置左侧的照片 */.ad-wrapper .ad-img li{width: 316px;margin-right: 15px;}/* 清除父元素带来的印影响 */.ad-wrapper .ad-img li:last-child{margin: 0;}/* 设置照片 */.ad-img img{width: 100%;vertical-align: top;}.set-backcolor{background-color: rgba(245, 245, 245);width: 100%;height: 720px;}/* 设置内容区的样式 */.content-wrapper{width: 1226px;height: 679px;margin: 14px auto;border-top: none;}/* 设置图片上方的字体 */.content-wrapper .content-font{font-size: 22px;font-family:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;font-weight: 200;line-height: 66px;}/* 设置箭头的样式 */.content-font i{font-size: 20px;border-radius: 50%;width: 20px;text-align: center;background-color: rgb(176,176,176);color: white;float: right;margin-top: 23px;}/* 单独设置查看更多的样式 */.content-font .find-more{float: right;margin-right: 5px;font-size: 16px;}/* 设置左侧图片 */.contents-img .big-phone img{width: 234px;height: 614px;}/* 设置浮动 */.contents-img .big-phone,.small-phone li{float: left;}/* 设置所有内容区的li */.content-wrapper .small-phone li{background-color: #fff;margin-bottom: 14px;margin-left: 14px;width: 234px;height: 300px;padding: 20px auto;}/* 设置内容区的小图片 */.contents-img .small-phone img{padding-top: 20px;padding-left: 40px;width: 160px;}/* 将文字居中 */.small-phone p{text-align: center;}/* 设置手机简介的字体的颜色 */.small-phone .phone-info{color: rgba(0, 0, 0, .3);}/* 设置手机价格 */.small-phone .phone-price{margin-top: 10px;color: #ff6700;}/* 给所有内容区的li设置阴影 */.content-wrapper li:hover{box-shadow: 0 0 10px rgba(0, 0, 0, .3);}/* 设置移入查看更多的样式 */.content-font span:hover{color: #ff6700;}/* 设置最外层的样式 */.bottom-wrapper{width: 100%;}.backcolors{background-color: rgb(245,245,245);width: 100%;height: 100px;}/* 设置货物操作的样式 */.bottom-wrapper .operate-goods{width: 1226px;height: 100px;margin: 14px auto; background-color: white;}/* 设置浮动 */.operate-goods li{float: left;width: 245px;height: 50px;text-align: center;margin-top: 26px;font-size: 16px;position: relative;}/* 设置图标字体的样式 */.operate-goods i{width: 30px;height: 30px;font-size: 30px;}/* 设置竖直的边框 */.operate-goods li::after{content: '';position: absolute;height: 25px;width: 1px;background-color: #c2b8af;top: 0;bottom: 0;margin: auto 0;left: 0;}/* 设置移入a的样式 */.operate-goods a:hover{color: #ff6700;}/* 设置底层块的宽高样式 */.information{width: 1226px;height: 200px;margin: 0 auto;border-top: #a7a29f 1px solid;padding-top: 30px;position: relative;}/* 设置每个分区的大小 */.help-info .information ul{float: left;width: 163.25px;height: 170px;}/* 设置每一列的头部 */.information .info-header{font-size: 20px;font-weight: 200;color: black;}/* 设置每一列超链接的字体颜色 */.information a{color: #757575;}/* 设置鼠标移入超链接样式 */.information a:hover{color: #ff6700;}/* 设置右侧联系方式 */.information .linked{text-align: center;float: left;width: 246px;}.information ol::before{content: '';position: absolute;height: 120px;width: 1px;background-color: #c2b8af;top: 0;bottom: 0;margin: auto 0;left: 979px;}/* 设置内边距 */.information li{padding: 10px 0;}/* 设置电话号码的大小 */.linked .number{font-size: 22px;color: #ff6700;}/* 设置客服的样式 */.linked .people{width: 120px;border: #ff6700 1px solid;color: #ff6700;margin: 5px auto;line-height: 30px;}/* 设置鼠标移入人工客户的样式 */.linked .people:hover{background-color: #ff6700;color: white;}/* 设置联系方式的图标 */.linked div a i{font-size: 25px;}

HTML

<!DOCTYPE html><html lang="en"><head><title>小米商场</title><link rel="stylesheet" href="../exc/res.css"><link rel="stylesheet" href="../tools/css/all.css"><link rel="stylesheet" href="./base.css"><link rel="stylesheet" href="./mi.css"><link rel="stylesheet" href="../tools/icon/iconfont.css"><link rel="icon" href="./img/favicon.ico"></head><body><div class="top-wrapper"><div class="outer-wrapper w clearfix"><ul class="title"><li><a href="javascript:;">小米商场</a></li><li class="line">|</li><li><a href="javascript:;">MIUI</a></li><li class="line">|</li><li><a href="javascript:;">loT</a></li><li class="line">|</li><li><a href="javascript:;">云服务</a></li><li class="line">|</li><li><a href="javascript:;">天星数科</a></li><li class="line">|</li><li><a href="javascript:;">有品</a></li><li class="line">|</li><li><a href="javascript:;">小爱开发平台</a></li><li class="line">|</li><li><a href="javascript:;">企业团购</a></li><li class="line">|</li><li><a href="javascript:;">资质证照</a></li><li class="line">|</li><li><a href="javascript:;">协议规则</a></li><li class="line">|</li><li><a class="app" href="javascript:;">下载app<div class="qrcode"><img src="./img/download.png"><span>小米商场APP</span></div></a></li><li class="line">|</li><li><a href="javascript:;">智能生活</a></li><li class="line">|</li><li><a href="javascript:;">Select Location</a></li></ul><ul class="shop-cart"><li><a class="cart" href="javascript:;"><i class="fas fa-shopping-cart"></i>购物车（0）</a></li></ul><ul class="user-info"><li><a href="javascript:;">消息通知</a></li><li class="line">|</li><li><a href="javascript:;">注册</a></li><li class="line">|</li><li><a href="javascript:;">登录</a></li></ul></div></div><div class="header-wrapper"><div class="header w"><h1 class="logo"><a href="/"><img src="./img/logo-mi2.png"></a></h1><div class="nav-wrapper clearfix"><ul class="nav"><li class="hidden-li"><a class="all-goods" href="#">全部商品分类</a><nav class="left-menu"><div><a href="#">手机电话卡<i class="fas fa-angle-right"></i></a></div><div><a href="#">电视盒子<i class="fas fa-angle-right"></i></a></div><div><a href="#">笔记本显示器<i class="fas fa-angle-right"></i></a></div><div><a href="#">家电插线板<i class="fas fa-angle-right"></i></a></div><div><a href="#">出行穿戴<i class="fas fa-angle-right"></i></a></div><div><a href="#">智能路由器<i class="fas fa-angle-right"></i></a></div><div><a href="#">电源配件<i class="fas fa-angle-right"></i></a></div><div><a href="#">健康儿童<i class="fas fa-angle-right"></i></a></div><div><a href="#">耳机音箱<i class="fas fa-angle-right"></i></a></div><div><a href="#">生活箱包<i class="fas fa-angle-right"></i></a></div></nav></li><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><div class="goods-info"></div></ul></div><div class="search-wrapper"><form class="search" action="#"><input class="search-input" type="text"><button class="search-button"><i class="fas fa-search"></i></button></form></div></div></div><div class="banner-wrapper w"><div class="banner"><ul class="img-list"><li><a href="#"><img src="./img/banner1.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner2.jpg" alt=""></a></li><li><a href="#"><img src="./img/banner3.jpg" alt=""></a></li></ul><div class="pointer"><a class="active" href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div><div class="prev-next"><a class="prev" href="javascript:;"></a><a class="next" href="javascript:;"></a></div></div></div><div class="back-top "><ul class="clearfix"><li><a class="phone" href="#"><img src="./img/phone1.png" alt=""></a></li><li><a class="user" href="#"><img src="./img/user1.png" alt=""></a></li><li><a class="tools" href="#"><img src="./img/tools1.png" alt=""></a></li><li><a class="ear" href="#"><img src="./img/ear1.png" alt=""></a></li><li class="shop"><a href="#"><img src="./img/shop1.png" alt=""></a></li></ul></div><div class="ad-wrapper w"><ul class="shortcut"><li><a href="#"><i class="fas fa-clock"></i>小米秒杀</a></li><li><a href="#"><i class="fas fa-building"></i>企业团购</a></li><li><a href="#"><i class="fas fa-frog"></i>F码通道</a></li><li><a href="#"><i class="fas fa-robot"></i>米粉卡</a></li><li><a href="#"><i class="fas fa-keyboard"></i>以旧换新</a></li><li><a href="#"><i class="fas fa-sim-card"></i>话费充值</a></li></ul><ul class="ad-img"><li><a href="#"><img src="./img/add1.jpg" alt=""></a></li><li><a href="#"><img src="./img/add2.jpg" alt=""></a></li><li><a href="#"><img src="./img/add3.png" alt=""></a></li></ul></div><div class="set-backcolor"><div class="content-wrapper clearfix"><div class="content-font"><span>手机</span><a href="javasript:;"><i class="fas fa-angle-right"></i><span class="find-more">查看更多</span></a></div><div class="contents-img"><ul class="big-phone"><li><a href="#"><img src="./img/content1.webp"></a></li></ul><ul class="small-phone"><li><a href="#"><img src="./img/content-phone.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone2.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone2.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone2.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li><li><a href="#"><img src="./img/content-phone2.webp" alt=""><p class="namespace">Note 10 Pro</p><p class="phone-info">天玑1100年度旗舰芯，VC液冷散热</p><p class="phone-price">1699元起</p></a></li></ul></div></div></div><div class="bottom-wrapper"><div class="operate-goods"><ul><li><a href=""><i class="iconfont"></i>预约维修服务</a></li><li><a href=""><i class="iconfont"></i>七天无理由退货</a></li><li><a href=""><i class="iconfont"></i>15天免费换货</a></li><li><a href=""><i class="iconfont"></i>满69包邮</a></li><li><a href=""><i class="iconfont"></i>520余家售后网点</a></li></ul></div><div class="help-info"><div class="information"><ul><li class="info-header">帮助中心</li><li><a href="javascript:;">账户管理</a></li><li><a href="javascript:;">购物指南</a></li><li><a href="javascript:;">订单操作</a></li></ul><ul><li class="info-header">服务支持</li><li><a href="javascript:;">售后政策</a></li><li><a href="javascript:;">自助服务</a></li><li><a href="javascript:;">相关下载</a></li></ul><ul><li class="info-header">线下门店</li><li><a href="javascript:;">小米之家</a></li><li><a href="javascript:;">服务网点</a></li><li><a href="javascript:;">授权体验店</a></li></ul><ul><li class="info-header">关于小米</li><li><a href="javascript:;">了解小米</a></li><li><a href="javascript:;">加入小米</a></li><li><a href="javascript:;">投资者关系</a></li><li><a href="javascript:;">企业社会责任</a></li><li><a href="javascript:;">廉洁举报</a></li></ul><ul><li class="info-header">关注我们</li><li><a href="javascript:;">新浪微博</a></li><li><a href="javascript:;">官方微信</a></li><li><a href="javascript:;">联系我们</a></li><li><a href="javascript:;">公益基金会</a></li></ul><ul><li class="info-header">特色服务</li><li><a href="javascript:;">F码通道</a></li><li><a href="javascript:;">礼物码</a></li><li><a href="javascript:;">防伪查询</a></li></ul><ol class="linked"><p class="number">400-100-5678</p><p class="time">8:00-18:00(仅收市话费)</p><div class="people"><i class="fas fa-bell"></i>人工客服</div><div>关注小米：<a href="javascript:;"><i class="fas fa-cat"></i></a></div></ul></div></div></div></body></html>

如果对你有帮助，请留下你的赞

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。