VScode跑街商场网页排版

VIP文章 已于 2022-07-04 14:02:22 修改
阅读量529 收藏 3
点赞数 1
文章标签： vscode javascript css js 前端
于 2022-07-01 13:20:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48956903/article/details/125556783
版权

1、效果图

 2、index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>跑街的</title>

    <link rel="stylesheet" href="./css/incdex.css">

    <link rel="stylesheet" href="./css/reset.css">

    <script src="./js/index.js"></script>

</head>

<body>

    <!--header-start-->

    <div class="header">

        <div class="container">

          <div class="header-left">

              <ul>

                  <li><a href="#">嗨，欢迎来到跑街的宜配商城</a></li>

                  <li><a style="color: red;" href="#">亲，请登录</a></li>

                  <li><a  href="#">免费注册</a></li>

              </ul>

          </div>

          <div class="header-right">

              <ul>

                  <li><a href="#">我的商城</a></li>

                  <span>/</span>

                  <li class="sprite-s"><a href="#">&nbsp&nbsp&nbsp购物车</a></li>

                  <span>/</span>

                  <li><a href="#">我的收藏</a></li>

                  <span>/</span>

                  <li><a href="#">卖家中心</a></li>

                  <span>/</span>

                  <li><a href="#">在线客服</a></li>

                  <span>/</span>

                  <li style="width: 200px;"><a href="#">客服热线 020-36380078</a></li>

              </ul>

          </div>

        </div>

    </div>

    <!--header-end-->


 

   <!--main-header start-->

   <div class="main-header">

    <div class="container">

       <div class="al">

        <div class="logo-1">

            <a href="#">

               <img src="./label/logo.png" alt="">

            </a>

         </div >

         <div class="choose_car">

             <div class="div_body">

                  <a href="#" class="sprite-2"></a>

                  <a href="#">选择车型，精准配爱车配件</a>

                  <div href=""><a href="#">+</a></div>

             </div>

         </div>

         <div class="main-seach">

             <div class="choose">

                 <ul>

                     <li class="act" style="background-color: red;"><a href="#" οnclick="ch()">号码</a></li>

                     <li class="act"><a href="#" οnclick="ch()">车架号</a></li>

                     <li class="act"><a href="#" οnclick="ch()">配件</a></li>

                     <li class="act"><a href="#" οnclick="ch()">店铺</a></li>

                 </ul>

             </div>

             <div class="seach">

                <form action="#" method="GET">

                   <table class="table-1"  cellpadding="0" cellspacing="0">

                       <tr>

                           <td class="input-td"><input type="text" name="any" placeholder="可以输入店铺名称丶掌柜会员名等" id=""></td>

                           <td class="seach-td"><input type="submit" value="搜索"></td>

                       </tr>

                   </table>

                </form>

             </div>

         </div>

       </div>

    </div>

   </div>

   <!--main-header-end-->

   

   <!--banner start-->

     <div class="main_nav">

         <div class="container">

           <div class="nav-box">

               <ul>

                   <li class="ico-1" style="width: 198px;"><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>

     </div>

     <div class="main-body">

        <div class="container">

            <div class="banner-image">

                <img class="banner" src="./image/banner-2.jpg" al

最低0.47元/天 解锁文章
qq_48956903
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网络购物商城(visual studio+sql server)
06-09
网络购物商城(visual studio+sql server),属于软件形式,包含用户注册,购物车系统,订单,管理员操作界面
Vue.js商品信息、购物车
06-01
用集成开发环境VScode实现vue.js的购物车
【计算机毕业设计】超市购物系统设计与实现
最新发布
weixin_63982010的博客
11-24 409
本超市购物系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。超市购物系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。超市购物系统设计与实现。
Web前端 HTML5 （VScode使用 网页结构化） 02
weixin_46969441的博客
01-02 2251
工具虽然好用，但不能依赖工具，脱离工具，依然能够使用。 VScode介绍 左边第一个栏，一共五个选项，点击切换第二栏的内容。 第一个按键： 文件列表。 显示文件。 第二个按键：搜索。版本控制工具。 第四个按键：debug调试工具。 第五个按键：扩展管理工具。 插件管理器。通过插件增加新的功能。 安装中文插件： 更换主题： ayu 更换设置： Code——》首选项——》设置 快捷键： ! +tab 直接生成 编辑网页的格式 <!DOCTYPE html> <html lang="en"
nodejs+vue+elementui网上书店图书销售购物商城系统vscode
QQ_188083800的博客
03-22 452
系统主要分为管理员和用户二部分，管理员主要功能包括：首页、个人中心、用户管理、图书分类管理、图书信息管理、图书入库管理、图书出库管理、订单评价管理、系统管理、订单管理，用户；本系统在一般书店管理系统的基础上增加了首页、图书信息、图书资讯、个人中心、后台管理、购物车、在线聊天最新信息的功能方便用户快速浏览，是一个高效的、动态的、相互友好的书店管理系统。3、管理员功能模块包括：首页、个人中心、用户管理、图书分类管理、图书信息管理、图书入库管理、图书出库管理、订单评价管理、系统管理、订单管理模块。
前端学习day 10--小米商城首页的制作
l1621834733的博客
09-06 2709
经过一段时间学习后，我已经能通过css和html制作一些简单的静态网页，以下是我简单制作的小米商城的首页，可能有点粗糙，相信以后能更加完善。 一、项目搭建 我使用的编辑器是vscode，刚开始是用webstorm但是不知道为什么css修改之后浏览器打开样式却没变，最终还是决定用vscode 我创建了mi文件夹用来存放项目，mi.html、mi.css分别用来写该网页的结构和样式，fontawesome是我从网上下载的图标字体库，可以直接在项目里使用图标字体，img用来存放一些背景图片，base.css用来
HTML标签及网页开发工具的使用（VSCode）
JokerJJun的博客
07-06 1960
1.1所有的标签都应该包括在里面，如或等，大部分的标签都是成对出现的，里没/的为开始标签，里有/的为结束标签，因为这些标签是成对出现的，所以也被称为双标签。 也有的是单个存在的，又被称为单标签，如等，但是但标签比较少，所以可以重点的单独去记忆。 1.2标签关系 双标签关系分为两类，一类为包含关系，一类为并列关系。......
VScode页面开发
m0_74937538的博客
08-04 4303
当一个元素的宽度已知，并且希望它在其容器中水平居中对齐时，可以使用这个属性。11）overflow: hidden该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。13）text-overflow: ellipsis的意思就是在文本溢出容器时，使用省略号来表示溢出的部分。7)、input type="radio" 单选按钮，同组按钮内，name值保持一致，互斥，不能同时选中。9)sub下标/sup上标：上下标标签，加入（title=“*******”）链接可显示标签信息。
竟然有人把VSCode玩成了IDEA的效果，有点厉害
资料免费分享，点击名片
07-16 2019
近期，公司推行正版化，本人使用的是JetBrains教育版，是不允许进行商业开发的，因此开启了艰难的备用IDE选型之路。最终，我选定了轻量级的Visual Studio Code（以下简称VS Code）。各种IDE选型比较的过程就不赘述了，Eclipse、NetBeans、Srping Tools Suite等等，只能说青菜萝卜各有所爱。插件淘沙众所周知，VS Code是一款轻量级的通用编辑器，和Eclipse一样全靠海量的插件扩展，网上各类插件推荐文章又都是面向VS Code的最大IDE用户群-前端开发
nodejs+vue+elementui在线水果商城购物网站vscode项目
QQ511008285的博客
02-01 1170
目前，我国的水果蔬菜销售普遍借助于农贸市场、超市等传统渠道进行，缺少有效的在线销售平台，然而传统销售模式的缺点不断暴露，很难满足当今人们快节奏生活模式的需求。设计开发基于Web的水果蔬菜销售系统的意义在于让消费者足不出户就可以选购所需的商品，使人们的生活更加便利，也可以令商家快速了解市场行情，更好地适应市场需要，扩大销售规模，降低销售成本。在编写vue页面的时候，要注意url的编写，用户在点击按钮的时候，url要能够传递到表现层当中，表现层利用业务层进行完成数据库的交互。第5章 系统详细设计 19。
基于vscode的仿京东页面
01-12
适用于大学生web大作业，有登录，注册，主页面，登录页面带有验证码功能，注册页面带有验证表单的正则表达式功能，主页面带有侧边二级菜单，下拉菜单，粘性导航栏等功能。
使用vscode编写第一个Hello World程序页面详细步骤
快乐学习
11-16 7357
前言： 对于编程人员来说，第一个程序几乎必写的都是Hello World，也是代表进入了新的学习篇章吧 一、操作步骤 1.打开vscode（如果没有这个软件，可以从我的文章里面看下载教程），文件---->新建文本文件或者使用快捷键：CTRL+N打开 2.文件-->保存 3.选择文件保存位置后，文件的后缀名txt更改为html，然后点击保存 4.vscode里面第一行输入! 注意：这个!一定是英文输入法的才会显示。如果是中文的！这两个感叹号不会显示出来的 8.任意选择一个浏览器打开（我是选择这个web
visual studio 2010教程-创建网站项目
zouzou0301的博客
06-10 2695
1.打开visual studio 2010 选择新建 - 网站 2.进行对应的设置 3.创建完毕之后，在解决方案资源管理器中出现对应的项目 4.在项目名称上 右键 - 添加新项 5.选择web窗体，并命名新建的页面为index.aspx 6.创建完毕之后的工程 7.首页的源代码如下 8.接下来进行网页的编写，我们首现使用拖动的方式来进行 首先拖动...
第一次网站制作｜｜京东网站仿做｜｜简单易上手
m0_46270734的博客
09-27 1215
前端京东网页仿做
通过vscode建网页的方法
03-29 6302
1.先在电脑里面的随便一个盘新建一个文件夹 如图所示 然后双击红色圈住的地方，全删除后，输入cmd 就会出现这个，直接在命令框中输入code 在黄色圈圈住的地方点击，然后就新建一个文件夹，网页的后缀就是html,css的后缀就是css 最后文件夹就会出现这个网页 如何在网页中输入 1.vscode提供了一个很友好的方式 直接使用英文状态下的shift+! 然后就会出现html的基本格式 <!DOCTYPE html> <html...
nodejs+vue+elementui在线购书商城购物网站vscode
QQ402205496的博客
03-25 508
所以本论文设计的是一款针对客户与商家最简洁、最清晰的图书管理系统，满足供需要求，促进客商良好沟通，从而实现图书高效、高速[2]。然后通过详细的分析，进行系统设计，其次，系统在实施的可行性上，我选择了Node.js技术来进行开发设计，在数据存储上，采用 Mysql数据库来进行设计。
基于node.js+vue的特产商城销售网站vscode
QQ402205496的博客
02-15 469
在大一时期我会带来家乡的特产分享给舍友和同学，发现他们的反应很强烈有很多内地同学非常喜欢这些特产，并表示在内地很难买到这么正宗的特产,如今的计算机已经走进了千家万户，对于大多数人来，足不出户的在自己的计算机上查看自己喜欢的特产，并购买特产已经很普遍了。后合包括:特产管理、订单管理、会员管理、留言管理、栏目管理、管理员登陆等。
nodejs+vue+elementui网上超市商城购物带支付收银系统vscode
QQ402205496的博客
04-05 398
本系统合理的进行了模块划分和组合，因此由于各个模块之间基本上是相互独立的，所以每个模块都可以独立的被解释、执行、调试和修改，让繁琐的系统设计工作简单化。本文论述了超市收银系统的设计和实现，该网站从实际运用的角度出发，运用了计算机网站设计、数据库等相关知识，基于nodejs框架和Mysql数据库设计来实现的，网站主要包括用户注册、用户登录、查看商品信息、公告信息等信息，看到喜欢的商品可以进行购买，也可以修改个人信息、修改密码，管理员对用户、商品信息管理、订单信息等功能。超市收银系统采用了结构化开发的方法。
VScode网页开发
LelemamaAnne的博客
12-07 2262
VScode是微软开发的一款轻量级，开源代码编辑器，可以使用其进行各项前端程序的开发和调试。本文主要面向编程新手提供编程环境搭建的帮助和建议。 1.下载和安装VSCode 下载 VSCode下载地址：https://code.visualstudio.com/，点击Download按钮，选择适合你计算机操作系统的类型的安装包下载即可。新购置的计算机大部分都是64位的操作系统，建议下载64位安装包，部分win7系统是32位的建议下载32位的安装包。 安装 VSCode的安装非常简单，只要根据软件安装提

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值