This website is an e-commerce website, which is mainly completed by Html, CSS, and JS. The main functions are to purchase products, display products, view orders, etc. The effect is as follows. If you need project code, you can send me a private message or write an article Comment below and I will share the original project and resource files
1. Project style supplement
Goal: Be able to use sprites, add shadow effects to elements, and make elements complete transition effects.
Learning path:
1.Sprite map
1) Introduction to sprite charts
a. Scene: In the project, multiple small pictures are merged into one large picture. This large picture is called a sprite picture.
b. Advantages: Reduce the number of server sending times, reduce server pressure, and improve page loading speed.
2) Steps for using sprite charts
a. Create a box and set the size of the box to be the same as the size of the thumbnail.
b. Set the sprite as the background image of the box
c. Modify the position of the background image
Use PxCook to measure the coordinates of the upper left corner of the small picture, and set negative values to the background-position:x y of the box.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(images/taobao.png);
/* 背景图位置属性，改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要左侧移动图片，位置取负数 */
background-position: -3px 0px;
}
</style>
</head>
<body>
<!-- 精灵图不能设置为图片，会把整个的都显示出来 -->
<!-- <img src="images/taobao.png" alt=""> -->
<!-- 精灵图的标签都用行内标签 span,b,i -->
<span></span>
</body>
2. Background image size
1) Function: Set the size of the background image
2) Syntax: background-size: width height;
3) Value:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 300px;
background-color: pink;
background-image: url(images/1.jpg);
background-repeat: no-repeat;
/* background-size: 300px; */
/* background-size: 50%; */
/* 如果图的宽或者高与盒子的尺寸相同了，另一个方向停止缩放 */
background-size: contain;
/* 保证宽高和盒子尺寸完全相同，导致图片显示不全 */
/* background-size: cover; */
/* 工作中，图的比例和盒子的比例是相同的 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>The effect of setting it to contain is that when the width or height of the image is equal to the smallest of the width and height of the box, the scaling will stop.
When set to cover, the display effect is scaled until the entire box is filled, so the display will be incomplete.
4) Background continuous writing expansion
a. Complete continuous writing: background:color image repeat position/size;
b. Note: When background-size and background continuation are set at the same time, you need to pay attention to the coverage issue.
c.Solve:
Or write the following in a separate style
Or write a separate style inside the continuous script
3. Text shadow
4. Box Shadow
1) Function: Add a shadow effect to the box to attract the user's attention and reflect the production details of the page
2) Attribute name: box-shadow
3) Value:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* box-shadow: 5px 10px 20px 10px green inset; */
box-shadow: 5px 10px 20px 10px green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
5. Transition
1) Function: Let the style of elements slowly change, and be used with hover to enhance the interactive experience of the web page.
2) Attribute name: transition
3) Common values:
4) Points to note:
a. Transition needs: The default state and the hover state have different styles to have a transition effect.
b. The transition attribute is added to the element itself that needs to be transitioned.
c.The transition attribute is set in different states, and the effects are different.
Set the default state, and there will be a transition effect when the mouse moves in and out
Set the hover state. There will be a transition effect when the mouse moves in, and there will be no transition effect when the mouse moves out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200，悬停的时候宽度为600，花费1秒钟 */
/* transition: width 1s, background-color 2s; */
/* 如果过渡变化的属性很多，那么可以设置为all */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color:green;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html> 
2. Pre-project awareness
Goal: Be able to know the three major SEO tags, be able to set the ico icon of the web page, and be able to write the public class code in the center
Learning path:
1. The relationship between web pages and websites
A website is made up of multiple web pages
2. Skeleton structure label
1) DOCTYPE document description
<!DOCTYPE html>Document type declaration tells the browser the HTML version of the web page. The above description is the H5 version.
2) Web page language
<html lang="en">a. Identify the language used by the web page
b. Function: search engine classification + browser translation
c. Common languages: zh-CN Chinese simplified/en English
3) Character encoding (UTF-8)
<meta charset="UTF-8">a. Identify the character encoding used by the web page
b. Function: The character encoding for saving and opening needs to be set uniformly, otherwise garbled characters may appear.
c. Common character encodings:
UTF-8: Universal Code, an international character encoding that includes texts in all national languages.
GB2312:6000+Chinese characters
GBK:200000+Chinese characters
Note: Just use UTF-8 character encoding uniformly during development.
3. SEO three major tags
1) SEO (Search Engine Optimization): Search engine optimization
2) Function: Let the website rank high on search engines
3) Common methods to improve SEO:
a. Bidding ranking
b. Make the web page into html suffix
c. Label semantics (use appropriate labels in appropriate places)
4) Three major SEO tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东-正品低价</title>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类">
<meta name="keywords" content="网上购物，手机，家电，服装，居家">
</head>
<body>
</body>
</html>4.ico icon setting
1) Scenario: The small icon displayed on the left side of the tab title. It is customary to use the .ico format icon.
2) Common codes:
<link rel="shortcut icon" href="favicon.ico">It should be noted that the rel must contain a shortcut icon and cannot be one that was introduced in css before.
5. version heart
3. Project structure construction
Goal: Able to use professional methods to complete project structure construction and basic public styles
Learning path:
1. File and directory preparation
1) Create a new project folder xtx-pc-client and open it in VSCode
a. In actual development, it is not recommended to use Chinese for the project folder.
b. All project-related files are saved in the xtx-pc-client directory
2) Copy favicon.ico to the xtx-pc-client directory
a. It is a general habit to place the ico icon in the project root directory
3) Copy the images and uploads directories to the xtx-pc-client directory
a.imgaes: Stores picture materials that are regularly used on the website, such as logos, style decoration pictures, etc.
b.uploads: Stores image materials that are not used regularly on the website, such as product images, promotional images, etc.
4) Create a new index.html in the root directory
5) Create a new css folder to save the style of the website, and create the following CSS files
a.base.css: basic public styles
b.common.css: Repeating styles of the same module on multiple web pages in this website, such as: header, bottom
c.index.cssHome page style
2.Basic public styles
/* 清除默认样式的代码 */
/* 去除常见标签默认的 margin 和 padding */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd,
input {
margin: 0;
padding: 0;
}
/* 內减模式 */
* {
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "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 {
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
/* 左浮动 */
.fl {
float: left;
}
/* 右浮动 */
.fr {
float: right;
}
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
3.index page skeleton
1) Build quick navigation
Effect:
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<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="#"><span></span>手机版</a></li>
</ul>
</div>
</div>/* 各个页面相同的样式表：头、尾部 */
/* 版心 */
.wrapper {
width: 1240px;
margin: 0 auto;
}
/* 快捷导航 */
.shortcut {
height: 52px;
background-color: #333;
}
.shortcut .wrapper {
height: 52px;
}
.shortcut .wrapper ul {
float: right;
}
.shortcut .wrapper li {
float: left;
line-height: 52px;
}
.shortcut .wrapper a {
padding: 0 16px;
border-right: 1px solid #666;
font-size: 14px;
color: #dcdcdc;
}
.shortcut .wrapper a span {
display: inline-block;
margin-right: 8px;
width: 11px;
height: 16px;
background-image: url(../images/sprites.png);
background-position: -160px -70px;
vertical-align: middle;
}2) Navigation bar
Effect:
html content
<!-- 头部 -->
<div class="header wrapper">
<!-- .logo+.nav+.search+.car -->
<div class="logo">
<!-- 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">
<input type="text" placeholder="搜一搜">
<!-- 定位放大镜 -->
<span></span>
</div>
<div class="car">
<span>2</span>
</div>
</div>.header {
margin: 30px auto;
height: 70px;
/* background-color: pink; */
}
.logo {
float: left;
width: 207px;
height: 70px;
/* background-color: pink; */
}
/* logo 搜索引擎优化做法 */
.logo h1 {
width: 207px;
height: 70px;
}
.logo h1 a {
display: block;
width: 207px;
height: 70px;
background-image: url(../images/logo.png);
background-size: contain;
/* 字号归0，主要是让字隐藏 */
font-size: 0;
}
.nav {
float: left;
margin-left: 40px;
height: 70px;
/* background-color: pink; */
}
.nav li {
float: left;
margin-right: 48px;
line-height: 70px;
}
.nav li a {
padding-bottom: 7px;
}
.nav li a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
}
.search {
float: left;
margin-top: 24px;
margin-left: 34px;
width: 172px;
height: 30px;
border-bottom: 2px solid #e7e7e7;
position: relative;
}
.search input {
padding-left: 30px;
width: 172px;
height: 28px;
}
.search input::placeholder {
font-size: 16px;
color: #ccc;
}
.search span {
display: inline-block;
width: 18px;
height: 18px;
background-image: url(../images/sprites.png);
background-position: -79px -69px;
position: absolute;
left: 2px;
top: 0px;
}
.car {
position: relative;
float: left;
margin-left:15px;
margin-top: 28px;
width: 23px;
height: 23px;
background-image: url(../images/sprites.png);
background-position: -119px -69px;
}
.car span {
/* 因为是绝对定位，盒子具备行内块特点 */
position: absolute;
right: -13px;
top: -6px;
width: 20px;
height: 15px;
background-color: #e26237;
border-radius:8px;
font-size: 13px;
color:#fff;
text-align: center;
line-height: 15px;
}
3) Copyright module
Effect:
html
<div class="footer">
<div class="wrapper">
<div class="top">
<ul>
<li>
<!-- 通过伪元素添加标签实现精灵图 -->
<span>价格亲民</span>
</li>
<li>
<span>物流快捷</span>
</li>
<li>
<span>品质新鲜</span>
</li>
</ul>
</div>
<div class="bottom">
<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>css
.footer {
height: 342px;
background-color: #333;
}
.footer .wrapper {
width: 1393px;
}
.footer .top {
padding-top: 59px;
padding-left: 135px;
height: 175px;
border-bottom: 3px solid #434343;
}
.footer .top li {
float: left;
position: relative;
margin-right: 300px;
width: 195px;
height: 58px;
line-height: 58px;
}
.footer .top li:last-child {
margin-right: 0;
}
/* 伪元素添加的标签 行内 */
.footer .top li::before {
position: absolute;
left: 0;
top: 0;
display: inline-block;
content: '';
width: 58px;
height: 58px;
background-image: url(../images/sprites.png);
vertical-align: middle;
}
/* 如果vertical-align加了，行高加了，还是不能够居中，就进行定位 */
/* 这种情况是在图片和文字一起的时候并且是居中的时候，而且是给图片加定位 */
.footer .top li span {
margin-left: 77px;
font-size: 28px;
color: #fff;
}
/* 第二个li里面的before添加背景图位置属性 */
.footer .top li:nth-child(2)::before {
background-position: -129px 0;
}
.footer .top li:nth-child(3)::before {
background-position: -64px 0;
}
.footer .bottom {
padding-top: 40px;
font-size: 14px;
color: #999;
text-align: center;
}
.footer .bottom a {
font-size: 14px;
color: #999;
}
.footer .bottom p {
margin-bottom: 20px;
}4) Banner diagram module
Effect:
html:
<!-- banner图 -->
<div class="banner">
<div class="wrapper">
<!-- 有几个图，就写多少个li -->
<ul>
<li><a href="#"><img src="uploads/banner_1.png" alt=""></a></li>
</ul>
<!-- 侧导航 -->
<div class="aside">
<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>
<!-- 箭头 -->
<!-- prev 上一个 -->
<a href="#" class="prev"></a>
<!-- next 下一个 -->
<a href="#" class="next"></a>
<!-- 圆点 当前状态：current / active-->
<!-- js 找到用户点击的li 添加类名 li变成白色的 -->
<ol>
<li></li>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
</ol>
</div>
</div>
css:
.banner {
height: 500px;
background-color: #f5f5f5;
}
.banner .wrapper {
position: relative;
height: 500px;
background-color: pink;
}
/* 侧导航 */
.banner .aside {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background-color: rgba(0, 0, 0, .8);
}
.banner .aside li {
height: 50px;
line-height: 50px;
}
.banner .aside a {
position: relative;
/* 宽度和父级一样 */
padding-left: 36px;
display: block;
height: 50px;
/* background-color: pink; */
height: 50px;
color: #fff;
}
.banner .aside a span {
margin-left: 15px;
font-size: 14px;
}
.banner .aside a:hover {
background-color: #27ba9b;
}
/* a的里面最后的位置添加箭头 */
.banner .aside a::after {
position: absolute;
right: 19px;
top: 19px;
content: '';
width: 6px;
height: 11px;
background-image: url(../images/sprites.png);
background-position: -80px -110px;
}
/* 箭头 */
.prev,
.next {
position: absolute;
top: 228px;
width: 45px;
height: 45px;
background-color: rgba(0, 0, 0, .2);
background-image: url(../images/sprites.png);
border-radius: 50%;
}
/* 背景图负责2件事情：改变箭头在盒子里面的位置，改变精灵图的位置 */
/* 导致在精灵图中测量的尺寸不准确 */
/* 解决方案有两种
1.书写背景图位置属性，借助谷歌的调试工具调试具体的位置数值
2.书写标签的时候，a负责盒子，里面在添加一个标签负责箭头
*/
.prev {
left: 260px;
background-position: 14px -60px;
}
.next {
right: 10px;
background-position: -23px -60px;
}
/* 圆点 */
.banner ol {
position: absolute;
left: 680px;
bottom: 30px;
height: 10px;
/* background-color: pink; */
}
.banner ol li {
float: left;
width: 10px;
margin-right: 24px;
height: 10px;
background-color: rgba(255, 255, 255, .4);
border-radius: 50%;
cursor: pointer;
}
.banner ol .current {
background-color: #fff;
}5)Fresh food module
Effect:
html:
<!-- 新鲜好物 -->
<div class="goods wrapper">
<!-- hd header -->
<div class="hd">
<h2>新鲜好物 <span>新鲜出炉 品质保障</span></h2>
<a href="#">查看全部</a>
</div>
<!-- bd 身体 内容 -->
<div class="bd clearfix">
<ul>
<li>
<a href="#">
<img src="uploads/new_goods_1.jpg" alt="">
<h3>睿米无线吸尘器F8</h3>
<div>￥<span>899</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="uploads/new_goods_2.jpg" alt="">
<h3>智能环绕3D空调</h3>
<div>￥<span>1299</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="uploads/new_goods_3.jpg" alt="">
<h3>广东软软糯米煲仔饭</h3>
<div>￥<span>129</span></div>
<b>新品</b>
</a>
</li>
<li>
<a href="#">
<img src="uploads/new_goods_4.jpg" alt="">
<h3>罗西机械智能手表</h3>
<div>￥<span>3399</span></div>
<b>新品</b>
</a>
</li>
</ul>
</div>
</div>css:
/* 新鲜好物 */
.goods .hd {
height: 120px;
/* background-color: pink; */
line-height: 114px;
}
.goods .hd h2 {
float: left;
font-size: 29px;
font-weight: normal;
height: 114px;
}
.goods .hd h2 span {
margin-left: 34px;
font-size: 16px;
color: #999;
}
.goods .hd a ,
.shengxian .hd .more{
float: right;
color: #999;
}
/* 如果样式一样的话就使用并集选择器 用,隔开两个标签使用同样的样式 */
.goods .hd a::after,
.shengxian .hd .more::after {
content: '';
display: inline-block;
margin-left: 13px;
width: 7px;
height: 13px;
background-image: url(../images/sprites.png);
background-position: 0 -110px;
vertical-align: middle;
}
.goods .bd li {
position: relative;
float: left;
width: 304px;
height: 405px;
background-color: #fff;
background-color: #f0f9f4;
margin-right: 8px;
text-align: center;
}
.goods .bd li:last-child {
margin-right: 0;
}
.goods .bd li img {
width: 304px;
}
.goods .bd li h3 {
margin-top: 16px;
margin-bottom: 10px;
font-size: 20px;
font-weight: 400;
}
.goods .bd li div {
color: #9a2e1f;
font-size: 17px;
}
.goods .bd li div span {
font-size: 23px;
}
.goods .bd li b {
position: absolute;
left: 17px;
top: 18px;
width: 28px;
height: 51px;
border: 1px solid #27ba9b;
border-radius: 2px;
font-size: 18px;
color: #27ba9b;
font-weight: 400;
line-height: 24px;
}