整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

vscode 快速生成 html 代码技巧

速生成 Html5 骨架

在 Html 文件中输入 html:5 按下回车键,可快速生成 HTML5 页面模板:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

html:5

父子关系快速构建

在 html 文件中输入 div#id>ul.list>li.item*5 按下回车键,可快速生成父子关系的结构:

<div id="id">
  <ul class="list">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

父子关系构建

多个相同标签

重复元素: 使用 * 加上数字来创建多个相同的标签。例如,p*3 后按 Tab 会产生三个 <p> 段落标签。

<p></p>
<p></p>
<p></p>

类与 ID 的添加

  • : 在标签名后加 . 再加上类名。如 div.container 生成带有类 container 的 <div> 。
<div class="container"></div>
  • ID: 使用 # 加上 ID 名。如 div#main 生成 ID 为 main 的 <div> 。
<div id="main"></div>

属性快速插入

  • 属性赋值: 在标签后用方括号 [attr=value] 插入属性。例如,a[href=https://example.com]。
<a href="https://example.com"></a>

组合使用

  • 复合示例: 结合上述技巧,可以创建复杂结构。比如,nav>ul>li.item$*4>a[href=#]{Item $} 会生成一个导航栏,包含 4 个列表项,每个列表项都是一个链接,链接文本分别为 "Item 1" 到 "Item 4",且每个链接的 href 属性指向不同的 ID。
<nav>
  <ul>
    <li class="item1"><a href="#">item 1</a></li>
    <li class="item2"><a href="#">item 2</a></li>
    <li class="item3"><a href="#">item 3</a></li>
    <li class="item4"><a href="#">item 4</a></li>
  </ul>
</nav>

自定义 snippets(代码片段)

  • 高级结构: 如果有特定的复杂结构经常使用,可以创建自定义的 Emmet snippets。转到 "文件" > "首选项" > "用户代码片段",选择或创建 HTML 片段文件,定义自己的缩写和展开结构。

Emmet 命令

  • Emmet: Wrap with Abbreviation: 选中现有代码后,使用此命令(通过命令面板 Ctrl+Shift+P / Cmd+Shift+P 调出并搜索 “Wrap with Abbreviation” ),可以快速将选中内容包裹在指定标签内。

们先分析一下整个网页的结构,整体内容采用的是一个两列布局,导航无限延长的背景,并且添加了分割符号

素材:

第一步: 去掉默认的HTML间距。

*{padding:0;margin:0;}

Ps(我们可以在后期进行修改,根据网页中使用的HTML元素的个数如body,h1,div等)

第二步:按效果图头部灰色背景但是无限延长

HTML代码:

<div class="top">

<div id="top">

<p>读书屋欢迎您!</p>

</div>

</div>

两个DIV嵌套,<div class="top">这个需要100%添加背景,而内侧<div id="top"> 实现居中布局就可以了

.top{width:100%;background:#f5f5f5;height:35px;}

解释:宽度100%,添加背景颜色,设定高度,这样在缩放网页,始终可以看到灰色的背景

#top {width:970px;margin:0 auto;}

解释:网页宽度970像素,使id=top的div元素进行居中margin:0 auto;

#top p{font-size:13px;line-height:35px;}

解释:改变文字大小,就一行宣传文字,通过行高(和高度一样时间)实现垂直居中line-height:35px;

第三步:logo的实现,采用典型的以图换字的方式,有利于SEO

HTML代码:

<div id="header">

<h1>

<a href="#">css教程</a>

</h1>

</div>

CSS编码:

#header h1 a{

background:url(images/logo.png) no-repeat 0 50%;

display:block;

width:215px;height:60px;

text-indent:-9999px;

}

大有学问#

nav模块布局思路

分为上中下以及侧边栏四个模块:nav-top、nav-center、nav-bottom、aside。

nav-top模块代码

index.css文件中添加CSS样式

.nav-top {
    height: 48px;
    border-bottom: 2px solid #b1191a;
}
.nav-top li {
    float: left;
    height: 48px;
    
    text-align: center;
    line-height: 48px;
    margin-left: 5px;
}
.nav-top li:first-of-type {
    width: 210px;
    background-color: #b11a1a;
    margin-left: 0;
}
.nav-top li a {
    font-size: 16px;
    color: #333;
    padding: 0 25px;
}
.nav-top li:first-of-type a {
    color: #fff;
}
.nav-top li:hover {
    background-color: #b11a1a;
}
.nav-top li:hover a,
.nav-center ul:first-child li a{
    color: #fff; 
}

在index.html文件中添加布局代码

<nav>
<div class="nav-top">
  <ul class="bW">
    <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>
</nav>

nav-center模块代码

nav-center模块、nav-bottom模块、aside模块均存在同一个<div class=“bW”></div>中。

index.css文件

.nav-center ul:first-child {
    width: 210px;
    background-color: #c81822;
}
.nav-center ul:first-child li {
    height: 31px;
    padding: 0 10px;
    line-height: 31px;
    position: relative;
}
.nav-center ul:first-child li a {
    font-size: 14px;
}
.nav-center ul:first-child li a::after {
    font-family: 'icomoon';
    content: '\e902';
    color: #fff;
    position: absolute;
    right: 8px;
}
.nav-center ul:first-child li:hover {
    background-color: #f7f7f7;
}
.nav-center ul:first-child li:hover a,
ul:first-child li:hover a::after
 {
    color: #c81623;
}
.nav-center img {
    height: 455px;
    margin: 10px 10px 0 10px;
    vertical-align: middle;
}

div.fR {
    width: 250px;
    border-bottom: none;
    margin: 10px 0 0 -1px;
}
div.fR>div:first-child {
    height: 32px;
    border: 1px solid #e5e5e5;
    border-bottom: 1px dotted #eaeaea;
    line-height: 32px;
    padding: 0 15px;
}
div.fR>div:first-child h3 {
    display: inline-block;
    font-weight: 400;
    font-size: 14px;
    color: #333;
}
div.fR>div:first-child a::after {
    font-family: 'icomoon';
    content: '\e902';
    padding-left: 10px;
}
div.fR ul:nth-child(2) {
    padding: 5px 15px;
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
}
div.fR ul:nth-child(2) li {
    height: 24px;
    line-height: 24px;
}
div.fR ul:nth-child(2) span {
    font-weight: 600;
    margin-right: 5px;
}

div.fR ul:nth-child(3) {
    height: 210px;
    border: 1px solid #eaeaea;
    border-bottom: none;
    margin-bottom: 5px;
}
div.fR ul:nth-child(3) li {
    width: 41px;
    padding: 15px 10px 2px;
    text-align: center;
    float: left;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
div.fR ul:nth-child(3) li:nth-of-type(4),
div.fR ul:nth-child(3) li:nth-of-type(8),
div.fR ul:nth-child(3) li:nth-of-type(12) {
    margin-right: -2px;
    border-right: none;
}
div.fR ul:nth-child(3) div:first-of-type {
    width: 25px;
    height: 26px;
    margin: 0 auto;
    background-image: url(../images/sprite.png);
    margin-bottom: 10px;
}
div.fR ul:nth-child(3)>li:nth-of-type(1) div {
    background-position: -19px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(2) div {
    background-position: -82px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(3) div {
    background-position: -144px -17px;
}
div.fR ul:nth-child(3)>li:nth-of-type(4) div {
    background-position: -208px -16px;
}
div.fR ul:nth-child(3)>li:nth-of-type(5) div {
    background-position: -19px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(6) div {
    background-position: -82px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(7) div {
    background-position: -145px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(8) div {
    background-position: -209px -87px;
}
div.fR ul:nth-child(3)>li:nth-of-type(9) div {
    background-position: -19px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(10) div {
    background-position: -81px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(11) div {
    background-position: -145px -158px;
}
div.fR ul:nth-child(3)>li:nth-of-type(12) div {
    background-position: -209px -158px;
}

div.fR>div:last-child {
    width: 250px;
    height: 75px;
    background-image: url(../images/sprite.png);
    background-position: 0 -219px;
}

index.html

<div class="bW">
<div class="nav-center clearF">
 <ul class="fL clearF">
  <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>
  <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>
 <img src="../images/gG.png" alt="">
 <div class="fR">
  <div>
   <h3>品优购快报</h3>
    <a href="#" class="fR">更多</a>
  </div>
  <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>
  </ul>
  <ul>
   <li>
    <a href="#">
     <div></div>
     <p>话费</p>
     </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>机票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>电影票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>游戏</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>彩票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>加油卡</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>酒店</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>火车票</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>众筹</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>理财</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>礼品卡</p>
    </a>
   </li>
   <li>
    <a href="#">
     <div></div>
     <p>白条</p>
    </a>
   </li>
  </ul>
 <div></div>
</div>
</div>

nav-bottom模块代码

index.css文件

.nav-bottom {
    margin: 11px 0 34px;
    height: 163px;
    position: relative;
}
.nav-bottom>div {
    width: 207px;
    height: 163px;
    background-color: #5c5351;
}
.nav-bottom>div::before {
    font-family: 'icomoon';
    content: '\e903';
    color: #fff;
    font-size: 62px;
    position: absolute;
    top: 32px;
    left: 68px;
}
.nav-bottom>div::after {
    content: '今日推荐';
    color: #fff;
    font-size: 18px;
    position: absolute;
    bottom: 35px;
    left: 63px;
}
.nav-bottom ul {
    padding: 9px 2px;
    background-color: #ebebeb;
}
.nav-bottom li {
    /* width: 207px; */
    height: 119px;
    float: left;
    padding: 13px 25px;
    border-right: 1px solid #dddddd;
}
.nav-bottom li:last-of-type {
    border-right: none;
}
.nav-bottom li h4 {
    color: #333;
}
.nav-bottom li p:first-of-type,
.nav-bottom li p:nth-of-type(3) {
    font-size: 14px;
    color: #fff;
    
}
.nav-bottom li p:first-of-type {
    background-color: #00a0e8;
    margin: 10px 25px 3px 0;
    padding: 0 3px;
    font-weight: 600;
}
.nav-bottom li:nth-child(2) p:nth-child(2) {
    background-color: #5fb200;
}
.nav-bottom li p:nth-of-type(3) {
    width: 60px;
    height: 18px;
    line-height: 18px;
    background-color: #5fb200;
    border-radius: 30px;
    text-align: center;
    margin-top: 22px;
}
.nav-bottom li:nth-child(3) p:nth-child(2),
.nav-bottom li:nth-child(3) p:nth-child(4) {
    background-color: red;
}
.nav-bottom li:nth-child(4) p:nth-child(2),
.nav-bottom li:nth-child(4) p:nth-child(4) {
    background-color: #0085fb;
}

index.html文件

<div class="bW">
<div class="nav-bottom clearF">
 <div class="fL"></div>
 <ul class="fR">
 <li>
 <div class="fL">
 <h4>优质好货</h4>
 <p>满300减100</p>
 <p>满500减200</p>
 </div>
 <img src="../images/cFj.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>品牌尾货</h4>
 <p>满300减100</p>
 <p>团购低至9.9</p>
 <p>团购</p>
 </div>
 <img src="../images/mJ.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>时尚穿搭</h4>
 <p>低至3.6折</p>
 <p>暑期出游季</p>
 <p>闪购</p>
 </div>
 <img src="../images/shirt.png" alt="">
 </li>
 <li>
 <div class="fL">
 <h4>0点上新</h4>
 <p>全场包邮</p>
 <p>低至1折</p>
 <p>闪购</p>
 </div>
 <img src="../images/watch.png" alt="">
 </li>
 </ul>
 </div>
</div>

侧边栏aside模块

index.css文件

nav>div.bW:nth-child(2) {
    position: relative;
}
aside {
    width: 66px;
    position: absolute;
    top: 165px;
    left: -85px;
}
aside li {
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-bottom: 1px solid #eee;
}
aside li:last-child {
    border-bottom: none;
}
aside li:hover,
aside li:hover a {
    background-color: #c81623;
    color: #fff;
}

index.html文件

<aside>
 <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>
  <li><a href="#">图书音像</a></li>
  <li><a href="#">金融彩票</a></li>
 </ul>
</aside>

aside——侧边栏模块

下部分内容下篇文章更。拜拜~