【练习】emmet插件，京东移动端

最新推荐文章于 2022-01-06 11:12:06 发布
最新推荐文章于 2022-01-06 11:12:06 发布
阅读量210 收藏
点赞数
分类专栏： 前端学习 文章标签： emmet 京东移动端案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40326021/article/details/79632058
版权

1.emmet插件

http://blog.csdn.net/JourneyWT/article/details/53839952

按照上面网站步骤装完，发现html+tab出不来html页面，但是meta:vp能出来，ul>li*10可以出来，说明emmet已经装上了。

http://blog.csdn.net/sunshinegirl_7/article/details/49802579

上面网站解决了这个问题，输入html:5+tab就会出来了。

另外发现保存文件的对话框很小，昨天没找到保存在想要的地方，都得保存在桌面再拖进想保存的地方。今天发现第一行最右边的小按钮可以解决这个问题。

2. 京东移动端样式

base.css 有一些补充

*,::before,::after{
padding:0;
margin: 0;
font-size: 14px;
-webkit-tap-highlight-color:transparent;
-webkit-box-sizing:border-box;
}
input{
border: none;
-webkit-appearance:none;
}
a{
text-decoration: none;
}
ul,ol{
list-style: none;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix::before,.clearfix::after{          每一次用浮动之后都要对它的父盒子清除浮动，否则父盒子没有高
content: ""; 
display: block;
line-height: 0;
height: 0;
visibility: hidden;
clear: both;
}                  
.main_container{
width: 100%;
padding: 0 5px;
margin-top: 10px;
}
.main{
width: 100%;
background-color: white;
margin-top: 10px;
box-shadow: 0 0 2px gray;      /*阴影*/
}
.main_top{
height: 32px;
width: 1005;
border-bottom: 1px solid #ccc
}
.main_bottom{
width: 100%;

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>京东移动端</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css"> 如何引入css文件不要忘记
</head>
<body>
<div class="jd_container">
<div class="header">
<a href="javascript:void(0);" class="header_logo"></a>
<input type="search" class="header_search" placeholder="请输入内容">
<span class="header_glass"></span>
<a href="javascript:void(0);" class="header_login">登陆</a>
</div>
<div class="banner">
<ul class="banner_img clearfix">
<li class="fl"><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l1.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l2.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l3.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l4.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l5.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l6.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l7.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l8.jpg" alt=""></a></li>
<li class="fl"><a href="#"><img src="images/l1.jpg" alt=""></a></li>
</ul>
<ul class="banner_index chearfix">
<li class="fl current"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</div>
<div class="nav">
<ul class="clearfix">
<li class="fl">
<a href="#"><img src="images/nav0.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav1.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav2.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav3.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav4.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav5.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav6.png" alt=""></a>
<p>分类查询</p>
</li>
<li class="fl">
<a href="#"><img src="images/nav7.png" alt=""></a>
<p>分类查询</p>
</li>
</ul>
</div>
<div class="main_container">
<div class="main">
<div class="main_top clearfix">
<span></span>
<p>掌上秒杀</p>
<ul class="clearfix">
<li>0</li>
<li>0</li>
<li>:</li>
<li>0</li>
<li>0</li>
<li>:</li>
<li>0</li>
<li>0</li>
</ul>
<a href="#">更多</a>
</div>
<div class="main_bottom">
<ul class="clearfix">
<li>
<a href="#"><img src="images/detail01.jpg" alt=""></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
<li>
<a href="#"><img src="images/detail02.jpg" alt=""></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
<li>
<a href="#"><img src="images/detail01.jpg" alt=""></a>
<p>¥10.00</p>
<p>¥100.00</p>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="main_top">
<span class="fl">京东超市</span>
</div>
<div class="main_bottom">
<ul class="clearfix">
<li><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="main">
<div class="main_top">
<span class="fl">京东超市</span>
</div>
<div class="main_bottom">
<ul class="clearfix">
<li><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
</ul>
</div>
</div>
<div class="main">
<div class="main_top">
<span class="fl">京东超市</span>
</div>
<div class="main_bottom">
<ul class="clearfix">
<li><a href="#"><img src="images/cp1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/cp3.jpg" alt=""></a></li>
</ul>
</div>
</div>
</div>

</div>
</body>

</html>

今天有一个关于选择什么元素的收获：一搬好几个类似的东西：如4～5张图片，都用ul li，里面放a img,一半需要点的东西都用a，如“更多”，图片，a里面再放图片。如果不需要点击超级链接的文字就用p，不需要点击的图片就用span，设置它的背景为图片即可。

index.css

.jd_container{
width: 100%;
}
.header{
width: 100%;
height: 40px;
background-color: rgb(201,21,35);
position: fixed;       /* 固定*/
padding-left: 70px;
padding-right: 60px;
z-index: 99;        /*层级增加才能显示出来*/
}
.header_logo{
background-image: url("../images/sprites.png");
background-position: 0 -103px;
background-size: 200px 200px;
position: absolute;
top: 2px;
left: 5px;
height: 36px;
width: 60px;        /*没有设置宽高的时候，图片就出不来*/
}
.header_search{
height: 30px;
width: 100%;         /*高度百分之百是因为header往左右padding留出了位置*/
border-radius: 15px;
margin-top: 5px;
padding-left: 22px;       /*把文字往右边挤一挤*/
}
.header_glass{
background-image: url("../images/sprites.png");
background-position: -60px -109px;
background-size: 200px 200px;      
position: absolute;
top:10px; 
left:75px;
width: 20px;
height: 20px;           /*没有设置宽高的时候，图片就出不来*/
}
.header_login{
color: white;
position: absolute;
right: 10px;
top: 0px;
font-size: 17px;
line-height: 40px;
}
.banner{
width: 100%;
overflow: hidden;
position: relative;
}
.banner .banner_img{
width: 1000%;
}
.banner .banner_img li{
width: 10%;
}
.banner .banner_img li a{
display: block;
width: 100%;
}
.banner .banner_img li a img{
display: block;
width: 100%;
}
.banner .banner_index{
position: absolute;
bottom: 10px;
left:50%;
margin-left: -44px;
}
.banner .banner_index li{
height: 6px;
width: 6px;
border-radius: 50%;
border: 1px solid white;
margin-left: 5px;
}
.banner .banner_index li.current{
background-color: white;
}
.nav{
width: 100%;     /* 在这给border-bottom: 1px solid #ccc;发现边框在最上面，因为盒子的高度只有padding，浮动没有清楚*/
border-bottom: 1px solid #ccc;
background-color: white
}
.nav ul{
width: 100%;
padding-top: 10px;
}
.nav ul li{
width: 25%;
}
.nav ul li a{
display: block;
width: 100%;
}
.nav ul li a img{
display: block;
width: 60%;
margin: 0 auto;         /*想让图片和文字一起居中，把margin:0 auto; 放在li中没有作用，只有图片单独居中文字单独居中*/
}
.nav ul li p{
padding-top: 5px;
text-align: center;
}
.main:nth-child(1){
width: 100%;
}
.main:nth-child(1) .main_top{
border: none;
}
.main:nth-child(1) .main_top span{
background-image: url("../images/seckill-icon.png");
height: 25px;
width: 20px;
float: left;
margin-top: 3.5px;
margin-left: 5px;
background-size: 20px 25px;        /*不写这一行图片出不来*/
}
.main:nth-child(1) .main_top p{
color:rgb(201,21,35);
margin-left: 5px;
line-height: 32px;
float: left;            /*也要浮动，否则margin-left: 5px;没用*/
}
.main:nth-child(1) .main_top ul{
float: left;           /*这一行一个元素浮动，每一个元素都要浮动*/
/*line-height: 32px;  
height: 32px;            这两行都没有用*/
padding-top: 8.5px
}
.main:nth-child(1) .main_top ul li{
float: left;               /*li浮动，ul要清除浮动*/
background-color: black;
height: 15px;
width: 15px;
color: white;
text-align: center;
line-height: 15px;
margin-left: 3px;
}
.main:nth-child(1) .main_top ul li:nth-child(3n){     /*取3,6*/
/*background-color: white;      这两行都一样*/
background-color: transparent;
color: black;
}
.main:nth-child(1) .main_top a{
float: right;
color: gray;
line-height: 32px;
margin-right: 5px;        /*没写li的样式的时候让a浮动，跑到下一行，等li写好了就跑上来了，可能是因为ul没有加浮动*/
} 
.main:nth-child(1) .main_bottom{
width: 100%;
}
.main:nth-child(1) .main_bottom ul{
width: 100%;
}
.main:nth-child(1) .main_bottom ul li{
float: left;
width: 33.3333%;          /*浮动配合宽度百分数使用*/
}
.main:nth-child(1) .main_bottom ul li a{
width: 100%;
border-right: 1px solid gray;
display: block;
}
.main:nth-child(1) .main_bottom ul li:nth-child(3) a{
border: none;
}
.main:nth-child(1) .main_bottom ul li a img{
display: block;
width: 60%;
margin: 0 auto;       /*和上面居中遇到一样的问题，改li没有用，必须单独让图片文字分别居中*/
}
.main:nth-child(1) .main_bottom ul li p{
text-align: center;
padding: 3px 0;
font-size: 12px;
}
.main:nth-child(1) .main_bottom ul li p:nth-child(2){        /*因为p是第二个元素*/
color: rgb(201,21,35);
}
.main:nth-child(1) .main_bottom ul li p:nth-child(3){
color: black;
text-decoration: line-through;    /* 删除线*/
}
.main:nth-child(n+2){       /*除了第一个之外的盒子*/
width: 100%;
}
.main:nth-child(n+2) .main_top span{
position: relative;
color: rgb(201,21,35);
line-height: 32px;
margin-left: 15px;
}
.main:nth-child(n+2) .main_top span::before{       /* 小方块用伪元素*/
content:"";
position: absolute;
top: 8.5px;
left: -10px;                           /* 因为span已经margin-left:15px;*/
background-color: rgb(201,21,35);
height: 15px;
width: 5px;
}
.main:nth-child(n+2) .main_bottom{
width: 100%;
}
.main:nth-child(n+2) .main_bottom ul{
width: 100%;
}
.main:nth-child(n+2) .main_bottom ul li{
float: left;
width: 50%;
}
.main:nth-child(n+2) .main_bottom ul li a{
width: 100%;
display: block;
}
.main:nth-child(n+2) .main_bottom ul li a img{
width: 100%;
display: block;

}

今天写代码速度太慢，这个京东案例从头到尾写下来花了近两个小时，不过这两个小时里收获还可以，今天视频时间有点短，而且后面讲的less还没有下载使用。

视频上推荐一个学习布局的网站还有没看：http://zh.learnlayout.com/

YIYIYI1205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
LearnEmmet:小马“ Emmet爆速开发”练习
03-21
LearnEmmet:小马“ Emmet爆速开发”练习
07emmet使用笔记
WLB 的博客
09-14 245
文章目录小样例: div基本上是转移的~生成兄弟,父`div+p+bq`,兄弟元素`div+div>p>span+em^bq`,父元素自定义类名,id`ul>.item`,指定是li元素的类名`#name`自动生成id=name直接明确生成的结构生成内容编号`ul>li.item$*3`,生成item1,...反向生成序号指定起始数,不从1开始自定义属性,标签文本自定义属性自定义文本练习3个小样例注意事项 安装VScode并使用Miniconda环境: 参考: 视频-教你配置Pyt
emmet插件学习，练习中遇到一些问题
weixin_30470643的博客
05-29 117
emmet插件学习：帮助提高敲代码效率的插件 参考文献：Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/116906.html 首先 需要记住的是光标必须在代码末尾，按ctrl+e，切记 若输入(.test$>p)*2,按下ctrl+e，将得到 <div class="t...
京东移动端组件库 React 版如约而来
m0_63247283的博客
01-06 635
NutUI 是一款京东风格的多端统一开发组件库，之前只有 Vue 语言版。它也支持使用Vue3来编写可以同时在小程序和 H5 平台上运行的应用，帮助开发者提升效率，改善开发体验，降低多端开发成本。 2018 年开源以来，NutUI 逐渐受到业界关注。其打造开发体验佳的初心及持续的打磨升级受到内外开发者的广泛认可，对于我们来说无疑是一件备受鼓舞的事情。随着用户的增多，社区交流群里对 React 版本的呼声也越来越高。我们积极响应社区的呼声，2021 年 6 月开始规划并启动 React 版的开发，经..
仿京东HTML5手机网站
03-19
HTML网站,移动端, 电商类, 购物车, 商品详情...大家相互探讨.
sublime text3 的Emmet插件
02-28
5. `emmet-plugin.py`：这是Emmet插件的Python源代码文件，实现了Emmet的大部分功能，如语法解析、代码扩展等。 6. `Default.sublime-commands`：定义了Sublime Text 3 中Emmet插件的命令和快捷键，用户可以通过...
Dreamweaver安装emmet插件的图文教程
09-22
在Dreamweaver中集成Emmet插件，可以使这款已经功能丰富的IDE（集成开发环境）变得更加高效。下面我们将详细介绍如何在Dreamweaver中安装Emmet插件。 首先，确保你已经安装了最新版本的Dreamweaver，最好是带有完整...
Dreamweaver8 emmet插件
12-16
Dreamweaver 8是一款经典的网页设计软件，虽然现在有更新的版本，但Dreamweaver 8用户仍然可以通过安装Emmet插件来提升其代码编辑体验。 Emmet的核心功能在于它的缩写语法，这种语法允许开发者用简洁的命令快速生成...
emmet Eclipse 插件(包含源代码)
10-29
Eclipse 插件的出现使得Emmet的功能得以在Eclipse集成开发环境中无缝集成，为Eclipse用户带来了极大的便利。这款“emmet Eclipse 插件(包含源代码)”正是基于官方最新源代码编译而来的，提供了完整的开发源码，对于...
Sublime的emmet插件
07-10
Sublime Text是一款广受欢迎的轻量级、高度可定制的文本编辑器，支持多种编程语言和插件，其中Emmet插件是其增强代码编写体验的重要组件。 **Emmet插件的核心功能** 1. **自动补全**: Emmet提供了一套基于缩写的...
＜前端练习＞ 京东移动端首页
weixin_47816527的博客
07-14 714
1.技术选型 方案：采取单独制作移动页面方案 技术：布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"/> <link rel="stylesheet" type="text/css" href="css/nor
Emmet快速编写html
wwwwwwwwwwwwdi的博客
12-15 5557
前面我们通过《超高速前端开发工具——Emmet》简单介绍了Emmet以及在编辑器中的安装，今天我们再来看用Emmet超高速的编写HTML代码。缩写是Emmet工具的核心，这些特殊的表达式通过Emmet解析并转化为结构化的代码块，而语法用CSS选择器，HTML标签和一些Emmet特定的代码生成，所以对于任何一个前端开发人员都可以很容易地掌握和使用。 你可以使用标签名称为div、p等生成HTML标签，
emmet 写法复习
extendworld的博客
08-25 297
元素的文本内容和属性的写法 div&gt;p[class="p$"]{非静无以成学，非学无以广才}*4 &lt;div&gt; &lt;p class="p1"&gt;非静无以成学，非学无以广才&lt;/p&gt; &lt;p class="p2"&gt;非静无以成学，非学无以广才&lt;/p&gt; &lt;p class=
Emmet：HTML/CSS代码快速编写神器
04-26 3690
Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：    Zen coding下的编码演示 去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。  一、快速编写HTML代码
前端与移动开发-----CSS（emmet 语法+CSS 复合选择器+元素的显示模式）
東三城的博客
10-15 265
css emmet 语法 —— 开发效率 emmet 的特点和作用：通过简写提高编码效率。 emmet 生成 HTML 结构语法： emmet 语法快速生成 css 样式： 1，常用属性大多用英文单词的首字母连写即可，示例如下： tac → text-align: center; ti2em → text-indent: 2em; lh26px → line-height: 26px; tdn → text-decoration: none; 2，设置宽高： w100 → width: 100px; h2
2021京东移动端模拟JD test
夜林的博客
04-10 318
<!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.
Emmet语法快速学习
持续学习中
01-24 470
在进行前端开发的时候，经常要手动写一些Html和CSS代码，有时候手写比较的繁琐。所以Emmet语法就出现了，主要作用就是类似于快捷键的作用，只需要敲出几个字母就可以快速自动生成一段代码，大大提高开发效率。 Emmet是一款插件，只要能安装他的编辑器都能使用，大部分编辑器都可以使用该语法规则,我们平时开发的Sublime Text、Eclipse、Notepad++、VS code、Atom、Dreamweaver等等编辑器都可以使用。 那么接下来，就通过官方的文档给大家讲解，简单直接。 一、基础..
【练习】小程序动态生成页面
weixin_40326021的博客
04-11 6705
1.数据放入data文件中的data.js   var swiper_content=[ { url:"/images/3.jpg", title1: "最好的华俱", title2: "副标语" }, { url: "/images/4.jpg", title1: "标语2", title2: "副标语2" }, { url: "/images/5.
解决鼠标移动导航栏，下拉菜单就会消失的问题
weixin_40326021的博客
10-12 4800
这个太坑了特此写一篇博客记录 $(".product_guid").mouseover(function(){         $(".first_guid").show();     })     $(".product_guid").mouseover(function(){         $(".first_guid").hide();     }) 原本代码这么写，因为first_g...
vscode emmet插件下载
最新发布
08-31
要下载VSCode的Emmet插件，你可以按照以下步骤进行操作： 1. 打开VS Code，确保已经成功安装了VS Code。 2. 点击左侧的扩展图标（四个方块组成的小正方形）或使用快捷键Ctrl+Shift+X打开扩展面板。 3. 在搜索框中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值