前端开发快速入门（四）进阶实战篇

已于 2023-06-07 20:09:57 修改
阅读量231 收藏
点赞数
分类专栏： 前端开发 文章标签： css css3 前端
于 2023-06-07 20:08:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangxy7894/article/details/130951236
版权

CSS进阶

简介

本篇介绍css的实战进阶，本部分将从网页中经常使用到的一些布局为例，进行加强css的实战应用。

案例1-京东服务

知识概要

本部分主要为css定位、修饰的一些要点，其核心思想在于父子元素之间的绝对位置、相对位置，以及一些布局相关的属性。

页面效果

在这里插入图片描述

相关代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>京东服务</title>
		<!-- 京东脚标：多快好省的布局 -->
		<style>
			/* 清除原有的盒子模型 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			/* 清除li无序列表的样式 */
			li{
				list-style: none;
			}
			
			/* 京东service */
			.service{
				/* 外边距：上下100，左右自动 */
				margin: 100px auto;
				width: 1190px;
				height: 42px;
				/* background-color: pink; */
			}
			
			.service ul{
				display: flex;
			}
			
			.service li{
				display: flex;
				padding-left: 40px;
				width: 297px;
				height: 42px;
				/* background-color: skyblue; */
			}
			
			.service li h5{
				margin-right: 10px;
				width: 36px;
				height: 42px;
				/* background-color: pink; */
				/* 设置背景信息，backgraound表示整体的背景，0水平不做移动，-192表示向上移动 */
				background: url(images/sprite.png) 0 -192px;
			}
			
			.service li:nth-child(2) h5{
				/* 更改图片 */
				background-position: -41px -192px;
			}
			
			.service li:nth-child(3) h5{
				background-position: -82px -192px;
			}
			
			.service li:nth-child(4) h5{
				background-position: -123px -192px;
			}
			
			/* 修饰文字信息 */
			.service li p{
				font-size: 18px;
				color: #444;
				font-weight: 700;
				line-height: 42px;
			}
			
		</style>
	</head>
	<body>
		<!-- 本案例练习使用css精灵：也就是当很多个元素在同一张图片中时
		 通过像素位置来定位显示的具体图片内容-->
		 <div class="service">
			 <ul>
				 <li>
					 <h5></h5>
					 <p>品类齐全，轻松购物</p>
				 </li>
				 <li>
				 	<h5></h5>
				 	<p>品类齐全，轻松购物</p>
				 </li>
				 <li>
				 	<h5></h5>
				 	<p>品类齐全，轻松购物</p>
				 </li>
				 <li>
				 	<h5></h5>
				 	<p>品类齐全，轻松购物</p>
				 </li>
			 </ul>
		 </div>
	</body>
</html>

案例2-淘宝轮播图

知识概要

本案例只从布局页面的角度来进行实现，后期可根据js来进行轮播图自动切换与手动切换等交互功能。

页面效果

在这里插入图片描述

相关代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝轮播图</title>
		<!-- 引入其他的样式库。图标 -->
		<link rel="stylesheet" href="iconfont/iconfont.css" />
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
			li{
				list-style: none;
			}
			
			.banner{
				/* 父级添加相对位置 */
				position: relative;
				
				margin: 100px auto;
				width: 564px;
				height: 315px;
				/* background-color: pink; */
				/* 设置溢出banner区域的显示隐藏起来 */
				overflow: hidden;
				
			}
			/* 轮播图的图片 */
			.banner img{
				width: 564px;
				border-radius: 12px;
				/* 与父级元素之间对齐：也就是上下对齐去除了中间的空隙 */
				vertical-align: middle;
			}
			
			.banner ul{
				display: flex;
			}
			
			/* 箭头，使用相对位置进行布局，压在图片的上方显示 */
			.banner .prev,
			.banner .next{
				/* 隐藏 */
				display: none;
				/* 子级添加绝对位置 */
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				
				width: 20px;
				height: 30px;
				background-color: rgba(0,0,0,0.3);
				
				text-decoration: none;/* 去掉下划线 */
				color: #fff;
				line-height: 30px;
			}
			
			/* 鼠标悬停上方在显示图标 */
			.banner:hover .prev,
			.banner:hover .next{
				display: block;
			}
			
			/* 左右分布，并且添加圆角 */
			.banner .prev{
				left: 0;
				/* 添加圆角，从左上角顺时针添加每个需要圆角化的角度 */
				border-radius: 0 15px 15px 0;
			}
			
			.banner .next{
				right: 0;
				border-radius: 15px 0 0 15px;
				/* 文本居中 */
				text-align: center;
			}
			
			/* 布局底部脚标圆点 */
			.banner ol{
				position: absolute;
				bottom: 20px;
				left: 50%;
				transform: translateX(-50%);
				height: 13px;
				background-color: rgba(255,255,255,0.3);
				
				display: flex;
				border-radius: 10px;
			}
			
			.banner ol li{
				margin: 3px;
				width: 8px;
				height: 8px;
				background-color: #fff;
				
				border-radius: 50%;
				/* 光标类型，变为点击的小手 */
				cursor: pointer;
				
			}
			
			/* 被选中显示的图片 */
			.banner ol .active{
				background-color: #ff5000;
			}
			
			
		</style>
	</head>
	<body>
		<!-- 练习使用淘宝轮播图的效果 -->
		<!-- 三张图片转换，底部有显示按钮，鼠标放上左右端显示上一张下一张图标 -->
		<div class="banner">
			<!-- 轮播图 -->
			<ul>
				<li><a href="#"><img src="images/banner1.jpg"/></a></li>
				<li><a href="#"><img src="images/banner2.jpg"/></a></li>
				<li><a href="#"><img src="images/banner3.jpg"/></a></li>
			</ul>
			<!-- 轮播图的上下箭头 -->
			<a href="#" class="prev">
				<!-- 引入文字图标库 -->
				<i class="iconfont icon-zuoce"></i>
			</a>
			<a href="#" class="next">
				<!-- 引入文字图标库 -->
				<i class="iconfont icon-youce"></i>
			</a>
			<!-- 轮播图的下标：圆点 -->
			<ol>
				<li></li>
				<li class="active"></li>
				<li></li>
			</ol>
		</div>
	</body>
</html>

案例3-生鲜官网主页

知识概要

本部分主要对所有html与css样式的所有知识点进行综合实践案例，通过本部分可以属性商城类官网的主要布局思路以及样式的基本排版与使用，进而加深对前端网页设计的理解与学习。

页面效果

  1. shortcut 顶部快捷导航条
  2. header 头部导航
  3. banner 首页
  4. goods 新鲜好物推荐
  5. recomment 人气推荐
  6. brand 热门品牌
  7. fresh 生鲜
  8. topic 最新专题
  9. footer 底部标识
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

相关代码

1. 基础样式
/* 去除常见标签默认的 margin 和 padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
  font: 16px/1.5  "Microsoft Yahei",
    "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  color: #333;
}

/* 去除列表默认样式 */
ul,
ol {
  list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
  font-style: normal;
}

/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
  text-decoration: none;
  color: #333;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* 去除input默认样式 */
input {
  border: none;
  outline: none;
  color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}
2. 公共样式
/* 设置公共的样式 */
/* 版心 */
.wrapper{
    margin: 0 auto;
    width: 1240px;
    /* border: 1px solid red; */
}

/* 最顶部的快捷导航条 */
.shortcut{
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper{
    /* 水平布局 */
    display: flex;
    /* 主轴对齐方式：右对齐 */
    justify-content: flex-end;
    height: 52px;
    /* background-color: pink; */

}

.shortcut ul{
    display: flex;
    line-height: 52px;
}


.shortcut a{
    padding: 0 15px;
    border-right: 1px solid #999;
    font-size: 14px;
    color: #fff;
}
/* 去除最后一个边框线 */
/* 注意通过li标签选中最后一个，然后将最后一个a标签的border去掉 */
.shortcut li:last-child a{
    border-right: 0;
}

/* 在最后一个前面添加一个手机的图标 */
.shortcut li .iconfont{
    margin-right: 4px;
    /* 垂直对齐 */
    vertical-align: middle;
}

/* 修饰一下登录按钮的颜色 */
.shortcut li .login{
    color: #5eb69c;
}

.header{

    display: flex;

    margin-top: 22px;
    margin-bottom: 22px;
    height: 88px;
    /* background-color: pink; */
}

/* logo页面 */
.logo{
    margin-right: 40px;
    width: 200px;
    height: 88px;
    /* background-color: skyblue; */
}

/* 加载图片，并隐藏文字 */
.logo a{
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(../images/logo.png);
    font-size: 0;
}

/* 首页导航 */
.nav{
    margin: 33px 28px 0 0;
}

.nav ul{
    display: flex;
}

.nav li{
    margin-right: 47px;
}

.nav li a{
    padding-bottom: 10px;
    /* background-color: skyblue; */
}

/* 鼠标悬停，添加文字颜色与下划线 */
.nav li a:hover{
    border-bottom: 2px solid #5EB69C;
    color: #5EB69C;
}

/* 搜索区域 */
.search{
    display: flex;
    margin-top: 33px;
    margin-right: 45px;
    width: 170px;
    height: 34px;
    border-bottom: 2px solid #F4F4F4;
}

.search .iconfont{
    margin-right: 8px;
    font-size: 18px;
    color: #ccc;
}

.search input::placeholder{
    font-size: 16px;
    color: #ccc;
}

/* 购物车 */
.cart{
    position:relative;
    margin-top: 32px;
}

.cart .iconfont{
    font-size: 24px;
}

/* 利用位置将2移动到购物车右上角 */
.cart i{
    position: absolute;

    top: 1px;
    left: 15px;

    padding: 0 6px;
    height: 15px;
    background-color: #E26237;
    border-radius: 8px;
    font-size: 14px;
    color: #FFFEFE;

    line-height: 15px;
}

/* 底部样式进行布局 */
.footer{
    /* 设置整体的布局信息 */
    height: 580px;
    /* 颜色灰白效果 */
    background-color: #F5F5F5;
}

/* 服务信息，四块，图片加文字 */
.service{
    padding: 60px 0;
    height: 178px;
    border-bottom: 1px solid #E8E8E8;
}

.service ul{
    display: flex;
    /* 剩余空间平分四份 */
    justify-content: space-evenly;
}

/* 每一个li的宽高 */
.service li{
    display: flex;
    width: 190px;
    height: 58px;
    /* background-color: pink; */
}

/* 修饰每一个li中的内容信息，图片与文字 */
.service li h5{
    margin-right: 20px;
    width: 58px;
    height: 58px;
    /* background-color: blue; */
    background-image: url(../images/sprite.png);
}

.service li p{
    font-size: 28px;
    line-height: 58px;
}

/* 设置其余的四个图标信息 */
.service li:nth-child(2) h5{
    /* 图片向上移动58个像素，也就是一个图标的高度 */
    background-position: 0 -58px;
}
/* 其余的图片以此类推进行累加移动 */
.service li:nth-child(3) h5{
    background-position: 0 -116px;
}
.service li:nth-child(4) h5{
    background-position: 0 -174px;
}

/* 最底部的帮助信息 */
/* 帮助信息分为：左边区域，与右边区域 */
.help{
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 300px;
    /* background-color: pink; */
}

.help .left{
    display: flex;
}

.help .left dl{
    margin-right: 84px;
}
.help .left dl:last-child{
    margin-right: 0;
}

.help .left dt{
    margin-bottom: 30px;
    font-size: 18px;
}

.help .left dd{
    margin-bottom: 10px;
}

.help .left .iconfont{
    color: #5EB69C;
}

/* 右边区域 */
.help .right ul{
    display: flex;
}

.help .right li:first-child{
    margin-right: 55px;
}

.help .right .pic{
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
}

.help .right p{
    color: #969696;
    text-align: center;
}

/* 修饰最底部的版权信息 */
/* 整体居中，在对文字进行布局修饰 */
.copyright{
    text-align: center;
}

.copyright p{
   margin-bottom: 10px; 
   color: #A1A1A1;
}

.copyright p a{
    margin: 0 10px;
    color: #A1A1A1;
}
3. 首页样式
/* 本部分样式为首页的样式内容 */
.banner{
    height: 500px;
    background-color: #F5F5F5;
}

.banner .wrapper{
    position: relative;
    height: 500px;
    /* background-color: pink; */
    overflow: hidden;
}

.banner .pic{

    display: flex;
    /* flex 布局，父级宽度不够，子级被挤小，不想挤小，增大父级尺寸 */
    width: 3720px;
}

/* 左侧导航栏 */
.subnav{
    position: absolute;
    /* 左上角开始 */
    top: 0;
    left: 0;
    /* 整体的宽高背景色 */
    width: 250px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.42);
}

.subnav li{
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 12px;
    height: 50px;
    /* background-color: pink;   */

    line-height: 50px;
    color: #FFF;

    /* 鼠标改为小手 */
    /* cursor光标 */
    cursor: pointer;
}

/* 对字体进行修饰，思路：先修饰整体，在修饰特殊的 */
.subnav li a{
    margin-right: 5px;
    font-size: 14px;
    color: #FFF;
}


.subnav li .classify{
    margin-right: 14px;
    font-size: 16px;
}

.subnav li .iconfont{
    font-size: 14px;
}

/* 鼠标悬停，更改背景颜色 */
.subnav li:hover{
    background-color: #00BE9A;
}

/* 圆点指示器 */
.banner ol{
    position: absolute;
    bottom: 17px;
    right: 16px;
    display: flex;
}

.banner ol li{
    margin-left: 8px;
    width: 22px;
    height: 22px;
    /* background-color: pink; */
    border-radius: 50%;
    cursor: pointer;
}

.banner ol li i{
    display: block;
    margin: 4px;
    width: 14px;
    height: 14px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 50%;
}

/* 选中的效果 */
.banner ol .current{
    background-color: rgba(255,255,255,0.5);
}

.banner ol .current i{
    background-color: #fff;
}

/* 新鲜好物 */
/* 标题，公共样式 */
.title{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-bottom: 30px;
    height: 42px;
    /* background-color: pink; */
}

.title .left{
    display: flex;
}

.title .left h3{
    margin-right: 35px;
    font-size: 30px;
}

.title .left p{
    align-self: flex-end;
    color: #A1A1A1;
}

.title .right .more{
    
    line-height: 42px;
    color: #A1A1A1;

}

.title .right .more .iconfont{
    margin-left: 10px;
}

/* 新鲜好物：内容区域：公共样式 */
/* 内容区域 */
.bd ul{
    display: flex;
    justify-content: space-between;
}

.bd li{
    width: 304px;
    height: 404px;
    background-color: #EEF9F4;
    border-radius: 10px;
}
/* 修饰图片 */
.bd li .pic{
    width: 304px;
    height: 304px;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}

/* 修饰下面的描述文字 */
.bd li .txt{
    text-align: center;
}

.bd li h4{
    margin-top: 18px;
    margin-bottom: 8px;
    font-size: 20px;
}

.bd li p{
    font-size: 18px;
    color: #AA2113;
}

.bd li p span{
    margin-left: 3px;
    font-size: 22px;
}

/* 对于人气推荐区域，对特殊的进行专门的设置 */
.recomment .bd li{
    background-color: #FFF;
}

.recomment .bd .pic{
    border-radius: 10px;
}

.recomment .bd .txt p{
    color: #A1A1A1;
}

/* 热门品牌的所有修饰 */
/* 总区域 */
.brand{
    margin-top: 60px;
    height: 468px;
    background-color: #F5F5F5;
}

.brand .wrapper{
    overflow: hidden;
    height: 468px;
    /* background-color: pink; */
}

.brand .title{
    position: relative;
    margin-bottom: 40px;
    /* background-color: blue; */
}

.brand .title .button{
    position: absolute;
    right: 0;
    /* 向下移动25个像素 */
    bottom: -25px;
    /* background-color: pink; */

    display: flex;
}

.brand .button a{
    margin-left: 12px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: #FFF;
}

.brand .button .prev{
    background-color: #ddd;
}

.brand .button .next{
    background-color: #00BE9A;
}

/* 调整图片与间距 */
.brand .bd li{
    width: 244px;
    height: 306px;
}

/* 生鲜页面 */
.fresh .title{
    margin-top: 60px;
    margin-bottom: 20px;
}

.title .right{
    display: flex;
}

.title .right ul{
    display: flex;
    margin-top: 10px;
    margin-right: 58px;
}

.title .right li a{
    display: block;
    margin-left: 6px;
    padding: 0 7px;
    height: 20px;
    /* background-color: pink; */
    line-height: 20px;
}

.title .right ul .active{
    background-color: #00BE9A;
    color: #FFF;
}

/* 生鲜的内容 */
.content{
    display: flex;
    justify-content: space-between;
}

/* 对左右整体的区域进行布局 */
.content .left{
    width: 248px;
    height: 610px;
}

.content .right{
    width: 968px;
    height: 610px;
    /* background-color: pink; */
}

/* 对右边的列表进行布局 */
.content .right ul{
    display: flex;
    /* 自动换行 */
    flex-wrap: wrap;
}

/* 修饰每一个右侧的卡片列表 */
.content .right li{
    position: relative;
    padding: 10px 21px 0 21px;
    
    width: 242px;
    height: 305px;
    border: 2px solid #FFF;

    /* 为了影藏绿色的cover */
    overflow: hidden;
}

/* 产品内容 */
.content .pic{
    width: 200px;
    height: 180px;
}

.content .info{
    margin-top: 14px;
    margin-bottom: 5px;
    height: 60px;
    line-height: 19px;
}

.content .price{
    color: #AF2F22;
}

.content .price span{
    margin-left: 5px;
    font-size: 22px;
}

/* 底部的绿色区域 */
.content li .cover{
    position: absolute;
    left: 0;
    /* bottom: 0; */
    bottom: -86px;

    padding-top: 15px;

    width: 242px;
    height: 84px;
    background-color: #00BE9A;
    text-align: center;
    color: #FFF;
    /* 过渡效果 */
    transition: all 0.5s;
}

.content .cover p:nth-child(1){
    font-size: 18px;
}
.content .cover p:nth-child(2){
    margin: 3px auto 6px;
    width: 120px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.11);
}

.content .cover p:nth-child(3){
    font-size: 13px;
}

.content .cover p:nth-child(3) .iconfont{
    font-size: 14px;
}

/* 鼠标悬停，更改cover的位置，放到底部区域显示 */
.content .right li:hover .cover{
    bottom: 0;
}

.content .right li:hover{
    border: 2px solid #00BE9A;
}

/* 最新专题 */
.topic{
  margin-bottom: 40px;  
}

.topic .title{
    margin-top: 100px;
}

/* 最新专题的内容 */
.topic-bd ul{
    display: flex;
    justify-content: space-between;
}

.topic-bd li{
    width: 405px;
    height: 355px;
    /* background-color: pink; */
}

.topic-bd .pic{
    position: relative;
    width: 405px;
    height: 288px;
}

.topic-bd .txt{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    width: 405px;
    height: 67px;
    /* background-color: skyblue; */
    font-size: 14px;
    color: #666;
}

.topic-bd .txt .left{
    display: flex;
}

.topic-bd .txt .left p{
    margin-right: 20px;
}

.topic-bd .txt .left p:nth-child(1){
    color: #AA2113;
}

/* 使用定位，将文字挪到图片中 */
.topic-bd .pic .cover{
    position: absolute;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 0 15px;
    width: 405px;
    height: 90px;
    /* 最底部的渐变深黑色 */
    background-image: linear-gradient(180deg,rgba(137,137,137,0.00),rgba(0,0,0,0.90) 100%);

}

.topic-bd .cover .left{
    color: #FFF;
}

.topic-bd .cover .left h4{
    margin-bottom: 6px;
    font-size: 20px;
}

.topic-bd .cover .right{
    padding: 0 7px;
    height: 25px;
    background-color: #FFF;
    color: #AA2113;
    font-size: 15px;
}

.topic-bd .cover .right span{
    font-size: 18px;
}
4. 首页页面
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- SEO搜索引擎优化 -->
    <!-- title标题 description描述 keywords关键字 -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
    <title>小兔鲜儿-新鲜、惠民、快捷！</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入ico图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入字体以及图标的样式库 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <div class="wrapper">
            <ul>
                <li><a href="#" class="login">请先登录</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="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
            </ul>
        </div>
    </div>

    <!-- header头部导航栏：logo，标签栏，搜索， -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>
        <!-- 导航 -->
        <div class="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>
            </ul>
        </div>
        <!-- 搜索 -->
        <!-- 一个搜索的图标+一个输入框 -->
        <div class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜一搜">
        </div>
        <!-- 购物车 -->
        <!-- 一个购物车图标+一个角标2 -->
        <div class="cart">
            <span class="iconfont icon-cart-full"></span>
            <i>2</i>
        </div>
    </div>


    <!-- 中间的主页内容区域，样式写在index区域中 -->
    <!-- banner区域 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 图片，整个的背景图片是一张大图1240*500 -->
            <ul class="pic">
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
            </ul>
            <!-- 左侧，有标题菜单栏 -->
            <div class="subnav">
                <ul>
                    <li>
                        <div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被枕</a>
                        </div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a>
                        </div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a>
                        </div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                    <li>
                        <div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
                        <span class="iconfont icon-arrow-right-bold"></span>
                    </li>
                </ul>


            </div>

            <!-- 圆点指示器 -->
            <ol>
                <li class="current"><i></i></li>
                <li><i></i></li>
                <li><i></i></li>
            </ol>
        </div>
    </div>

    <!-- 新鲜好物：标题、内容 -->
    <div class="goods wrapper">
        <!-- 标题 -->
        <div class="title">
            <!-- 标题里面：左边，右边 -->
            <div class="left">
                <!-- 标题+描述 -->
                <h3>新鲜好物</h3>
                <p>新鲜出炉，品质靠谱</p>
            </div>
            <div class="right">
                <!-- 查看全部 -->
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 内容 -->
        <div class="bd">
            <!-- 卡片列表，可以点击跳转连接 -->
            <ul>
                <li><a href="#">
                        <!-- 图片+标题+价格 -->
                        <!-- 图片 -->
                        <div class="pic"><img src="./uploads/goods1.png" alt=""></div>
                        <!-- 标题+价格 -->
                        <div class="txt">
                            <h4>KN95级莫兰迪色防护口罩</h4>
                            <p>¥<span>79</span></p>
                        </div>
                    </a></li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods2.png" alt=""></div>
                        <div class="txt">
                            <h4>紫檀外独板三层普洱茶盒</h4>
                            <p>¥<span>566</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods3.png" alt=""></div>
                        <div class="txt">
                            <h4>法拉蒙高颜值记事本可定制</h4>
                            <p>¥<span>58</span></p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods4.png" alt=""></div>
                        <div class="txt">
                            <h4>科技布布艺沙发</h4>
                            <p>¥<span>3579</span></p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 人气推荐：使用公共样式，其余不同部分在特殊设置样式 -->
    <div class="recomment wrapper">
        <!-- 标题 -->
        <div class="title">
            <!-- 左边 -->
            <div class="left">
                <h3>人气推荐</h3>
                <p>人气爆款 不容错过</p>
            </div>
            <!-- 右边 -->
            <div class="right">
                <!-- 查看全部 -->
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>

        <div class="bd">
            <!-- 内容 -->
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend1.png" alt=""></div>
                        <div class="txt">
                            <h4>特惠推荐</h4>
                            <p>我猜得到 你的需要</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend2.png" alt=""></div>
                        <div class="txt">
                            <h4>爆款推荐</h4>
                            <p>人气好物推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend3.png" alt=""></div>
                        <div class="txt">
                            <h4>节日礼品一站买全</h4>
                            <p>编辑尽心整理推荐</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend4.png" alt=""></div>
                        <div class="txt">
                            <h4>鲜花园艺</h4>
                            <p>给生活增加仪式感</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!-- 热门品牌 -->
    <!-- 热门品牌 -->
    <div class="brand">
        <div class="wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>热门品牌</h3>
                    <p>国际经典 品质认证</p>
                </div>
                <!-- 上一页 下一页按钮 -->
                <div class="button">
                    <a href="#" class="prev">
                        <i class="iconfont icon-arrow-left-bold"></i>
                    </a>
                    <a href="#" class="next">
                        <i class="iconfont icon-arrow-right-bold"></i>
                    </a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="bd">
                <ul>
                    <li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
                    <li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="fresh wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>生鲜</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#" class="active">热门</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>
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 内容 -->
        <div class="content">
            <!-- 左边的图片 -->
            <div class="left">
                <a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
            </div>
            <!-- 右边的图片列表 -->
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>双味千层，手抓饼烤肉组合</h4>
                                    <p>240g/袋 4片装</p>
                                    <p>加热即食</p>
                                </div>
                                <p class="price">¥<span>89.99</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>云南甘蔗慢熬红糖馒头</h4>
                                    <p>220g/袋 5个装</p>
                                    <p>加热即食</p>
                                </div>
                                <p class="price">¥<span>9.00</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>日式风味小圆饼</h4>
                                    <p>圆形【海盐味】</p>
                                    <p>糖果零食</p>
                                </div>
                                <p class="price">¥<span>588.00</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>全麦奶油浓香小面包</h4>
                                    <p>50g*12袋</p>
                                    <p>美味西点</p>
                                </div>
                                <p class="price">¥<span>69.00</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>秘制外皮五福摩提大福点心</h4>
                                    <p>150g/盒</p>
                                    <p>美味西点</p>
                                </div>
                                <p class="price">¥<span>39.99</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>水果面膜韩国蜂蜜柚子茶</h4>
                                    <p>560g/瓶</p>
                                    <p>冲调饮品</p>
                                </div>
                                <p class="price">¥<span>39.99</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>浓情比利时巧克力礼盒装</h4>
                                    <p>205克/盒</p>
                                    <p>糖果零食</p>
                                </div>
                                <p class="price">¥<span>120.00</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
                            <div class="txt">
                                <div class="info">
                                    <h4>抹茶奶油小蛋糕礼盒装</h4>
                                    <p>220克/盒</p>
                                    <p>美味西点</p>
                                </div>
                                <p class="price">¥<span>60.00</span></p>
                            </div>
                        </a>
                        <div class="cover">
                            <p>找相似</p>
                            <p></p>
                            <p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 最新专题 -->
    <div class="topic wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>最新专题</h3>
            </div>
            <div class="right">
                <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
            </div>
        </div>
        <!-- 最新专题得到内容 -->
        <div class="topic-bd">
            <ul>
                <li>
                    <a href="#">
                        <!-- 图片 -->
                        <div class="pic">
                            <img src="./uploads/topic1.png" alt="">
                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>吃这些美食才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                </div>
                                <div class="right">
                                    ￥<span>29.9</span><span>起</span>
                                </div>
                            </div>
                        </div>
                        <!-- 图片下方的文字 -->
                        <div class="txt">
                            <!-- 左边：喜欢+浏览量 -->
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-favorites-fill"></i>
                                    <span>1220</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-browse"></i>
                                    <span>1800</span>
                                </p>
                            </div>
                            <!-- 右边：评论消息 -->
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-comment"></i>
                                    <span>246</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic2.png" alt="">
                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>吃这些美食才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                </div>
                                <div class="right">￥<span>29.9</span><span>起</span></div>
                            </div>
                        </div>
                        <div class="txt">
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-favorites-fill"></i>
                                    <span>1220</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-browse"></i>
                                    <span>1800</span>
                                </p>
                            </div>
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-comment"></i>
                                    <span>246</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic3.png" alt="">
                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>吃这些美食才不算辜负自己</h4>
                                    <p>餐厨起居洗护好物</p>
                                </div>
                                <div class="right">￥<span>29.9</span><span>起</span></div>
                            </div>
                        </div>
                        <div class="txt">
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-favorites-fill"></i>
                                    <span>1220</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-browse"></i>
                                    <span>1800</span>
                                </p>
                            </div>
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-comment"></i>
                                    <span>246</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>

            </ul>
        </div>

    </div>




    <!-- 底部标签栏 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务信息，参考京东的多快好省，可以使用css精灵来进行制作 -->
            <div class="service">
                <ul>
                    <li>
                        <h5></h5>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>物流快捷</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>品质新鲜</p>
                    </li>
                    <li>
                        <h5></h5>
                        <p>售后无忧</p>
                    </li>
                </ul>
            </div>

            <!-- 帮助中心 -->
            <div class="help">
                <div class="left">
                    <!-- 左边区域的所有信息 -->
                    <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="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
                        <dd><a href="#">客服电话 400-0000-000</a></dd>
                        <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
                    </dl>
                </div>

                <!-- 右边的二维码区域 -->
                <div class="right">
                    <ul>
                        <li>
                            <div class="pic"><img src="./images/wechat.png" alt=""></div>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <div class="pic"><img src="./images/app.png" alt=""></div>
                            <p>APP下载二维码</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 最底部的版权信息 -->
            <!-- 版权 -->
            <div class="copyright">
                <p>
                    <a href="#">关于我们</a>|
                    <a href="#">帮助中心</a>|
                    <a href="#">售后服务</a>|
                    <a href="#">配送与验收</a>|
                    <a href="#">商务合作</a>|
                    <a href="#">搜索推荐</a>|
                    <a href="#">友情链接</a>
                </p>
                <p>CopyRight © 小兔鲜</p>
            </div>

        </div>
    </div>

</body>

</html>

结束语

本篇案例相对来说难度稍难，主要对于整体页面布局，盒子模型，相对位置需要比较属性，对页面的一些简单的鼠标滑动效果进行开发，前端代码整体来说不难，难的地方主要在于对于页面设计的理解与合理的使用元素的位置，相信通过练习自己对于这块的把握与熟练度会越来越好！

小张的java之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Uniapp 从入门到进阶
sybh的博客
08-19 380
阿面，资深前端，现任职于广州某电商公司，上线过多款小程序和 app。对移动开发、Hybrid 和 Node.js 等方向有较深研究，拥有十年以上的前端开发和架构经验。热爱开源，热爱分享。掘金「阿面」monw3c随着小程序的热度越来越高，小程序开发已经成为了前端工程师的必修课。与此同时出现了大量地小程序框架，像Wepy、Mpvue、Uniapp、Taro等等。在众多框架中我选择了Uniapp进行开发，原因是Uniapp。
Webpack实战：入门、进阶与调优（第2版）
华章IT官方博客
04-08 2317
你是否经常听到项目组的同事抱怨：“为什么Webpack这么慢？”“为什么Webpack又出错了？” “发布到线上的代码为什么不能正常工作？”我切身体会到，一个稳定、高效的构建工具能帮助开发者大幅提升效率，但很多时候效率问题是无法通过简单地在网上搜索一下就解决的。尽管Webpack作为构建工具已经在开发者社区中被广泛使用了很多年，网络上也有不少关于它的资料、教程和文档，然而...
js--轮播图
m0_59642141的博客
08-03 82
js轮播图、利用偏移量实现左右点击轮播图
前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！
BOM485480的博客
07-09 3121
我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。 作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，希望对你能够有所帮助。 前言 前端学习是一个螺旋上升的过程，既要反复地看书，也要抓紧时间进行实战。只看书，看了就会忘，所以必须将看书和写代码相结合。只要你认真学，入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线，帮助你提升前端
Kotlin零基础入门到进阶实战
爱酷码的博客
03-23 484
Kotlin现在是Google官方认定Android一级开发语言，与Java100%互通，并具备诸多Java尚不支持的新特性，每个Android程序员必备的Kotlin课程，每个Java程序员都需要了解的Kotlin，掌握kotlin可以开发Web前端、Web后端、Android移动端、Server脚本、桌面游戏等，采用真实案例讲解，拒绝纸上谈兵。pwd=h95b提取码：h95b。
前端开发核心知识进阶
GitChat
07-02 4222
Vue3.0从入门到进阶实战
njkd5的博客
10-15 2332
在本套课程里，我们将基于Vue3.0新特性完成仿豆瓣评分项目的开发。 简单来讲，除了项目开发的流程和常用技巧，课程涉及到的编程思想主要有两方面内容： 一、组件化编程思想，这个是我们一直强调的，它解决的是代码的可维护性。 二、代码的逻辑复用，这个是我们在学习完Vue3.0新特性后，需要重点掌握与深刻体会的。 我们在选项式开发过程中，涉及到的数据与方法分散在不同选项，虽然组件化了，但是对于某一集中功能，还没有做到高内聚。 其与组件的关系是强耦合，可能在别的组件中依然需要编写类似的代码。 Vue3的组
速学Django：Web开发从入门到进阶
06-09 3252
本书是一本关于Django开发快速入门的图书。本书清晰明了地讲解了使用Django进行Web项目开发时所涉及的常用知识点，包括框架配置、路由配置、模型、视图、模板、表单、中间件、上下文处理器、代码测试、网站缓存和网站部署等内容。本书的宗旨是以尽可能简洁的流程引领读者快速入门Web项目开发，并能够在实战项目中充分体会使用Django进行Web项目开发的各种技术与方法。本书主要包含两部分内容：第一部分（第1~6章）为读者介绍Django的用途与特点、设计理念以及Django开发所依赖的知识体系。
《速学Django：Web开发从入门到进阶》学习导读
sixpp的博客
06-08 1万+
速学Django：Web开发从入门到进阶》是一本全面而深入的Django学习指南。它从Python基础开始，逐步引导读者进入Django的世界，涵盖了从安装配置、基础知识到高级应用的各个方面。书中不仅详细介绍了Django的核心概念和组件，还通过实际案例展示了如何将这些知识应用到实际项目中。
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
热门推荐
2201_76017170的博客
12-24 1万+
40个web前端实战项目，练完即可就业，从入门到进阶，基础到框架，html_css【附视频+源码】
vue实战入门进阶篇：从零开始实现网站后台实例
05-05
vue实战入门进阶篇：从零开始实现网站后台实例，使用vue+elementui实现网站管理系统后台管理界面框架搭建，实现首页、新闻、访问记录、内容发布、系统管理等界面的增删改查功能。
11章2023 React 18 系统入门 进阶实战《欢乐购》
08-29
[11章]2023 React 18 系统入门 进阶实战《欢乐购》带你系统构建 React 18 技术体系，并结合“欢乐购”项目，快速积累企业级前端项目实战经验，落地 React 18 与 TypeScript 结合的实用开发技巧。
前端学习 第二阶段、高级进阶与实战
08-13
文档内含有全套前端的网盘分享，分为基础和高级两模块，包括小程序，公众号的界面，有视频讲解和文本介绍，适合小白入门学习
史上最强NDK入门项目实战.zip
04-07
【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、...
麦子前端基础第四阶段
07-23
前端的综合使用，商城实例，h5绘图，项目管理，响应式web，backbone入门，knockout入门到精通
CSS中，设置 0.5px 会生效吗
最新发布
Keep trying, keep going
06-12 344
在高分辨率屏幕（例如 Retina 屏幕）上，0.5px 的设置通常会生效，因为这些屏幕具有更高的像素密度，可以显示更细的细节。在这些设备上，1 个 CSS 像素可能对应多个设备像素，因此可以实现 0.5px 的效果。，因为这些屏幕的像素密度较低，可能无法精确地显示半个像素的大小。在这种情况下，浏览器会对 0.5px 的值进行。在 CSS 中，设置 0.5px 是有效的，浏览器会尝试渲染出这种细微的大小差异。然而，在低分辨率屏幕上，0.5px 的设置可能无法完美呈现。
CSS 列表样式（ul）全面解析
2401_83810323的博客
06-11 251
属性用于定义列表项的标记类型。常见的值包括disc（实心圆）、circle（空心圆）、square（方块）以及none（无标记）。此外，也可以使用decimal（十进制数字）、（小写字母）、（大写罗马数字）等来生成不同的编号效果。ul {/* 方块标记 */ol {/* 大写罗马数字 */
CSS从入门到精通——背景样式
m0_73614626的博客
06-12 1259
当页面较长时，滚动页面，背景图像也会随之滚动。从上面的实例中，大家学习了多种背景属性的设置，为了简化这些属性的书写，我们可以将这些属性合并在同一个属性中。当图像作为背景和文本显示在同一个位置时，为了页面排版更优美、更易于文本的阅读，我们可以使用。请在右侧的编辑框中修改。属性设置元素的背景属性，常见的网页背景图就是这样设置的。文档的所有内容，所以如果要改变整个页面的背景颜色，只需要设置。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。本关任务：在本关中，我们将学习如何使用。
HOW - CSS 常见效果实现
weixin_58540586的博客
06-11 905
常见 CSS 效果实现总结。
vue.js全家桶 零基础入门到进阶项目实战 pdf
01-08
Vue.js全家桶是指Vue.js框架及其相关的生态工具，包括Vue Router、Vuex、Vue CLI等。它们共同构成了一整套丰富的前端开发工具。如果你想从零基础开始学习Vue.js全家桶，可以通过阅读《Vue.js全家桶 零基础入门到进阶项目实战pdf》这本书来快速掌握相关知识。 这本书首先会介绍Vue.js框架的基本概念和语法，以及如何构建简单的Vue应用程序。然后，逐步深入介绍Vue Router和Vuex的使用方法，让你可以更好地管理Vue应用的路由和状态。除此之外，还会介绍Vue CLI的使用，让你能够更高效地创建和部署Vue项目。 在掌握了这些基础知识之后，这本书还会通过一些实际项目来帮助你深入理解Vue.js全家桶的应用。通过实战项目，你可以学会如何构建复杂的交互式应用程序，以及如何使用Vue.js全家桶来进行数据管理和页面导航。 总的来说，《Vue.js全家桶 零基础入门到进阶项目实战pdf》这本书是一本适合零基础入门的Vue.js初学者的教程，通过学习它，你可以快速进入Vue.js的世界，并通过实际项目的实战来提升自己的技能水平。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值