精华内容
下载资源
问答
  • html模板
    千次阅读
    2021-08-26 10:37:26

    有时候我们会遇到这样的一个需求:
    通过前端传入的数据渲染一个现成的打印模板出来,最后返回一个html格式的文本给前端,模板是有一个现成的,但是每次传入进来的数据是不同的,所以需要后端经过渲染出来返回渲染好的html内容给前端,这个时候我们就可以用thymeleaf来实现这个功能。
    我们先建造一个模板:

    <div id="print_main_full_box">
        <style>
          #print_main_full_box {
            width: 100%;
          }
    
          #print_main_full_box > * {
            margin: 0;
            padding: 0;
          }
    
          #print_main_full_box > table, td, th {
            margin: 0;
            padding: 0;
            border: 1px solid black;
            border-collapse: collapse
          }
    
          .yiban {
            width: 49%;
            text-align: left;
            display: inline-block;
            /*border-left: 1px solid black;*/
          }
    
          .jiachu {
            font-weight:bold;
          }
    
          td {
            font-size: 14px;
          }
    
          .center {
            text-align: center;
          }
    
        </style>
        <table width="100%">
          <tbody>
          <tr class="jiachu">
            <td colspan="8" class="center" style="font-size: 16px">
              <div th:text = ${company}>公司</div>
              <div th:text = ${title}>出货单</div>
            </td>
          </tr>
          <tr>
            <td colspan="8" class="center">
              <span th:text = ${address}>地址</span>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">客户名称:<span th:text = ${cursumerName}>客户名称</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">订单号:</span><span th:text = ${orderNo}>订单号</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">送货地址:<span th:text = ${deliveryAddr}>送货地址</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">送货日期:</span><span th:text = ${actualDeliveryDate}>送货日期</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">联系电话:<span th:text = ${phone}>联系电话</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">送货单号:</span><span th:text = ${invoiceNo}>送货单号</span>
              </div>
            </td>
          </tr>
          <tr class="center">
            <td colspan="8" class="jiachu">
              <div>机器名称:<span th:text = ${machineName}></span></div>
            </td>
          </tr>
          <tr class="jiachu">
            <td width="5%" align="center">序号</td>
            <td width="5%" align="center">内部序号</td>
            <td width="25%" align="center">图号</td>
            <td width="5%" align="center">单位</td>
            <td width="5%" align="center">数量</td>
            <td width="5%" align="center">单价</td>
            <td width="5%" align="center">总价</td>
            <td width="10%" align="center">备注</td>
          </tr>
          <tr th:each = "prod : ${prods}" data-line="5">
            <td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>
            <td align="center"><div th:text = ${prod.selfNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">内部序号</div></td>
            <td align="center"><div th:text = ${prod.chartNo} style="overflow: hidden;max-height: 40px;line-height: 20px;">图号</div></td>
            <td align="center"><div th:text = ${prod.company} style="overflow: hidden;max-height: 40px;line-height: 20px;">单位</div></td>
            <td align="center"><div th:text = ${prod.invoiceNumber} style="overflow: hidden;max-height: 40px;line-height: 20px;">数量</div></td>
            <td align="center"><div th:text = ${prod.unitPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">单价</div></td>
            <td align="center"><div th:text = ${prod.totalPrice} style="overflow: hidden;max-height: 40px;line-height: 20px;">总价</div></td>
            <td align="center"><div th:text = ${prod.remarks} style="overflow: hidden;max-height: 40px;line-height: 20px;">哦呵呵</div></td>
          </tr>
    
          <tr>
            <td colspan="4" align="right">总计:</td>
            <td align="right"><span th:text = ${invoiceNumber}>3</span></td>
            <td align="right"></td>
            <td align="right"><span th:text = ${totalPrice}>3</span></td>
            <td align="right"></td>
          </tr>
          <tr>
            <td colspan="4">送货单位签章:</td>
            <td colspan="4">收货单位签章:</td>
          </tr>
          </tbody>
        </table>
      </div>
    

    这个里面是一个含有thymeleaf语法的模板,现在我们要通过传入的参数不同渲染出不一样的数据出来。
    例如前端传入这样的数据:

    {
        "company":"csdner",
        "title":"出货单",
        "address":"中国",
        "cursumerName":"客户",
        "orderNo":"2432523234234234",
        "deliveryAddr":"工业园",
        "actualDeliveryDate":"20210526",
        "phone":"18888888888",
        "invoiceNo":"1567894",
        "machineName":"25661615",
        "prods":[
            {
                "selfNumber":"5555",
                "chartNo":"6666",
                "company":"csdner",
                "invoiceNumber":"2222",
                "unitPrice":"55",
                "totalPrice":"555",
                "remarks":"哈哈哈哈"
            }
        ],
        "invoiceNumber":"22",
        "totalPrice":"102"
    }
    

    后端要渲染出渲染好之后的html文档给前端:

    <div id="print_main_full_box">
        <style>
          #print_main_full_box {
            width: 100%;
          }
    
          #print_main_full_box > * {
            margin: 0;
            padding: 0;
          }
    
          #print_main_full_box > table, td, th {
            margin: 0;
            padding: 0;
            border: 1px solid black;
            border-collapse: collapse
          }
    
          .yiban {
            width: 49%;
            text-align: left;
            display: inline-block;
            /*border-left: 1px solid black;*/
          }
    
          .jiachu {
            font-weight:bold;
          }
    
          td {
            font-size: 14px;
          }
    
          .center {
            text-align: center;
          }
    
        </style>
        <table width="100%">
          <tbody>
          <tr class="jiachu">
            <td colspan="8" class="center" style="font-size: 16px">
              <div>csdner</div>
              <div>出货单</div>
            </td>
          </tr>
          <tr>
            <td colspan="8" class="center">
              <span>中国</span>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">客户名称:<span>客户</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">订单号:</span><span>2432523234234234</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">送货地址:<span>工业园</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">送货日期:</span><span>20210526</span>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="8">
              <div class="yiban">
                <span class="jiachu">联系电话:<span>18888888888</span></span>
              </div>
              <div class="yiban">
                <span class="jiachu">送货单号:</span><span>1567894</span>
              </div>
            </td>
          </tr>
          <tr class="center">
            <td colspan="8" class="jiachu">
              <div>机器名称:<span>25661615</span></div>
            </td>
          </tr>
          <tr class="jiachu">
            <td width="5%" align="center">序号</td>
            <td width="5%" align="center">内部序号</td>
            <td width="25%" align="center">图号</td>
            <td width="5%" align="center">单位</td>
            <td width="5%" align="center">数量</td>
            <td width="5%" align="center">单价</td>
            <td width="5%" align="center">总价</td>
            <td width="10%" align="center">备注</td>
          </tr>
          <tr data-line="5">
            <td align="center"><div data-item-index style="overflow: hidden;max-height: 40px;line-height: 20px;">序号</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">5555</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">6666</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">csdner</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">2222</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">55</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">555</div></td>
            <td align="center"><div style="overflow: hidden;max-height: 40px;line-height: 20px;">哈哈哈哈</div></td>
          </tr>
    
          <tr>
            <td colspan="4" align="right">总计:</td>
            <td align="right"><span>22</span></td>
            <td align="right"></td>
            <td align="right"><span>102</span></td>
            <td align="right"></td>
          </tr>
          <tr>
            <td colspan="4">送货单位签章:</td>
            <td colspan="4">收货单位签章:</td>
          </tr>
       
          </tbody>
        </table>
      </div>
    

    好了,需求说完,开始实战:
    首先第一步我们是需要一个thymeleaf的模板,让在项目中引入一个工具类:
    添加依赖:

     <!-- Thymeleaf 模板引擎 -->
            <dependency>
                <groupId>org.thymeleaf</groupId>
                <artifactId>thymeleaf</artifactId>
                <version>3.0.9.RELEASE</version>
            </dependency>
      		<dependency>
                <groupId>ognl</groupId>
                <artifactId>ognl</artifactId>
                <version>3.1.12</version>
            </dependency>
    

    第二步,创建一个工具类:

    public class HTMLTemplateUtils {
    
        private final static TemplateEngine templateEngine = new TemplateEngine();
    
        /**
         * 使用 Thymeleaf 渲染 HTML
         * @param template  HTML模板
         * @param params 参数
         * @return  渲染后的HTML
         */
        public static String render(String template, Map<String, Object> params){
            Context context = new Context();
            context.setVariables(params);
            return templateEngine.process(template, context);
        }
    
    }
    

    第三步:传入参数:

     String output = HTMLTemplateUtils.render(content, map);
    

    content为模板,map为前端传入的json数据
    第四步,返回output,这个时候output就是我们已经渲染好的模板了

    更多相关内容
  • HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列...
    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)

    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

    原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,~这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

    作品介绍

    红色实用的礼品网商城网页、节日礼品购物网站、通用的礼品网商城模板html下载。主要有:登录、注册、礼品详情页、礼品列表页、收货人信息、订单详情页、支付完成等商城网页模板。

    此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD, Vscode 所有编辑器均可使用)

    网页作品布局方面:网页布局整体为LOGO、导航、轮播图、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

    网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
    空)

    一、作品演示

    1.首页

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_HTML网页设计结课作业

    2. 登录/注册

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_web前端开发技术_02HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_商城网页设计源码HTML_03

    3. 商品详情

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_节日礼品购物商城网站htm模板_04

    4. 购物车

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_HTML网页设计结课作业_05

    5.订单详情

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_web前端开发技术_06

    6. 配送地址

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_web前端开发技术_07

    二、代码目录

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_节日礼品购物商城网站htm模板_08

    三、代码实现
    <!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <meta name="Author" content="清心老师">
      <meta name="Keywords" content="ecshop商城开发">
      <meta name="Description" content="一个月打造商城-清心主讲">
      <title>Ecshop商城开发详情页--清心老师</title>
     <!--引用外部样式-->
     <link type="text/css" rel="stylesheet"  href="css/basic.css">
     <link type="text/css" rel="stylesheet"  href="css/web.css">
     </head>
     <body>
    
    <div id="TopMain">
    	<!-- 广告开始 -->
    	 <div id="topAdv"> 
    		<a href="#"> <img src="images/adv.jpg" /> </a> 
    		<img src="images/close.png"  class="close"/>
    	 </div>
    	<!-- 广告结束-->  
    
    	<!--Top开始-->
    	<div id="Top">
    		<div class="banner"><a href="#"><img src="images/logo.png" /></a></div>
    		<!--search begin-->
    		<div class="search">
    			<form>
    				<input type="text"  class="txt"/>
    				<input type="submit" class="but"  value=""/>
    			</form>
    		</div>
    		<!--search end-->
    		<div class="user">
    			<!--用户登录前状态
    			<font><span class="iconfont">&#xe60b;</span><a href="">登录</a></font>
    			<font><span class="iconfont">&#xe60e;</span><a href="">注册</a></font>-->
    			
    
    			<!--用户登录后状态-->
    			您好!wlm123,欢迎你回来 <a href="" class="usertxt">用户中心</a>|<a href="" class="usertxt">退出</a>
    
    			<font><span class="iconfont">&#xe646;</span><a href="LoginAndRegister.html">加入购车</a></font>
    		</div>
    	</div>
    	<!--Top结束-->
    </div>
    
    <!--网站导航开始  滚动到一定高,给他加上 class="gd"-->
    <div id="Logo" >
    	<ul>
    		<li class="first"><span class="iconfont">&#xe627;</span>全部商品分类</li>
    		<li><a href="index.html" target="_blank">首页</a></li>
    		<li><a href="Product.html" target="_blank">节日礼物</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 class="last"></li>
    	</ul>
    </div>
    <!--网站导航结束-->
    
    
    
    
    
    
    
    <!--面包屑导航开始-->
    <div class="webLogo">当前位置: 
    	<a href="">首页</a> > <a href="">手机类型</a> > <a href="">3G手机</a> > KD876
    </div>
    <!--面包屑导航结束-->
    
    
    
    <!--内容页主体开始-->
    <div id="webCon">
    
    	<!--产品放大镜效果开始-->
    	<div class="web_ProductImg">
    	
    		<div id="box">
    
    			<!--小图展示 start-->
    			<div class="simg">
    				<img src="images/xpic1.jpg" width="450" height="450" />
    				<span class="move"></span>
    				<span class="shade"></span>
    			</div>
    			<!--小图展示 end-->
    
    			<!--按扭 start-->
    			<div class="but">
    				<img src="images/xpic1.jpg" width="60" class="active"  dataSrc="images/xpic1.jpg"/>
    				<img src="images/xpic2.jpg" width="60" dataSrc="images/xpic2.jpg" />
    				<img src="images/xpic3.jpg" width="60" dataSrc="images/xpic3.jpg" />
    			</div>
    			<!--按扭 end-->
    
    			<!--大图 start-->
    			<div class="bimg"> <img src="images/xpic1.jpg" /></div>
    			<!--大图 end-->
    
    		</div>
    	
    	</div>
    	<!--产品放大镜效果结束-->
    
    
    	<div class="web_ProductXq">
    	
    		<ul>
    			<li class="title"> 深层水润+逆天美白,一套全部搞定,24小时水润透白!韩束墨菊深度</li>
    			<li class="two">
    				<p>商品货号:ECS000000</p>
    				<p>库存:30个</p>
    			</li>
    			<li class="two">
    				<p>商品品牌:苹果</p>
    				<p>商品重量:30个</p>
    			</li>
    			<li  class="bor">
    				<p>市场价格:市场价格:¥1666元
    					本店售价:¥1388元
    					注册用户:¥1388元
    				</p>
    			</li>
    			<li class="yh">
    				<h3>购买商品达到以下数量区间时可享受的优惠价格:</h3>
    				<p class="ti"> <span>数量</span> <span>优惠价格</span> </p>
    				<p class="ti money"> <span>3</span> <span>3600</span> </p>
    				<p class="ti money"> <span>5</span> <span>5000</span> </p>
    				<p class="allmoney"> 商品总价格:<font>3600</font></p>
    			</li>
    		
    			<li class="two">
    				<p>购买数量 <input type="text"  class="txt"/></p>
    				<p>购买此商品可获得积分:119 </p>
    			</li>
    			
    			<li>
    				<p class="sx">颜色:<span> 红色</span>  <span> 黄色</span></p>
    				<p class="sx">颜色:<span> 红色</span>  <span> 黄色</span></p>
    			</li>
    			
    			<li class="but">
    				<a href="dd.html"><img src="images/Webcar.png" /></a>
    				<a href=""><img src="images/Websc.png" /></a>
    			</li>
    
    		</ul>
    	
    	
    	
    	</div>
    </div>
    
    <!--内容主体结束-->
    
    
    <!--推荐产品开始-->
    <div id="IntroProduct">
    	<p class="ti">推荐产品</p>
    	<ul>
    		<li>
    			<a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a>
    			<p><a href="#">创意节能小夜灯LED声控</a></p>
    			<P class="money"><font>¥19.9</font>  <span>389人购买</span></p>
    		</li>  
    		<li>
    			<a href="#"><img src="images/dg_img3.jpg" width="220px" height="220" /></a>
    			<p><a href="#">创意节能小夜灯LED声控</a></p>
    			<P class="money"><font>¥19.9</font>  <span>389人购买</span></p>
    		</li>  
    		<li>
    			<a href="#"><img src="images/dg_img1.jpg" width="220px" height="220" /></a>
    			<p><a href="#">创意节能小夜灯LED声控</a></p>
    			<P class="money"><font>¥19.9</font>  <span>389人购买</span></p>
    		</li>  
    		<li>
    			<a href="#"><img src="images/dg_img2.jpg" width="220px" height="220" /></a>
    			<p><a href="#">创意节能小夜灯LED声控</a></p>
    			<P class="money"><font>¥19.9</font>  <span>389人购买</span></p>
    		</li>  
     
    	</ul>
    </div>
    <!--推荐产品结束-->
    
    
    <!--产品详情开始-->
    <div id="ProductInfo">
    	<ul class="sel">
    		<li class="active">商品描述<span></span></li>
    		<li>商品属性 <span></span></li>
    		<li>用户评论<span></span></li>
    		<li>商品购买记录<span></span></li>
    	</ul>
    
    	<div id="ProductSelect">
    		<div class="selCon" style="display:block;">商品描述</div>
    		<div class="selCon">商品属性</div>
    		<div class="selCon">用户评论</div>
    		<div class="selCon">商品购买记录</div>
    	</div>
    	
    
    </div>
    <!--产品详情结束-->
    
    
    
    
    
    
    <!--网站底部开始-->
    <img src="images/f.jpg"  class="fbg"/>
    <div id="Footer2">
    	<dl class="first">
    		<dt><a href="#">关于我们</a></dt>
    		<dd><a href="#">诚聘英才</a></dd>
    		<dd><a href="#">品牌入驻</a></dd>
    		<dd><a href="#">友情链接</a></dd>
    	</dl>
    	<dl>
    		<dt><a href="#">关于我们</a></dt>
    		<dd><a href="#">诚聘英才</a></dd>
    		<dd><a href="#">品牌入驻</a></dd>
    		<dd><a href="#">友情链接</a></dd>
    	</dl>
    	<dl>
    		<dt>关于我们</dt>
    		<dd>诚聘英才</dd>
    		<dd>品牌入驻</dd>
    		<dd>友情链接</dd>
    	</dl>
    	<dl>
    		<dt>关于我们</dt>
    		<dd>诚聘英才</dd>
    		<dd>品牌入驻</dd>
    		<dd>友情链接</dd>
    	</dl>
    	<dl>
    		<dt>关于我们</dt>
    		<dd>诚聘英才</dd>
    		<dd>品牌入驻</dd>
    		<dd>友情链接</dd>
    	</dl>
    	<dl>
    		<dt>关于我们</dt>
    		<dd>诚聘英才</dd>
    		<dd>品牌入驻</dd>
    		<dd>友情链接</dd>
    	</dl>
    	<dl class="last">
    		<dt>客服在线</dt>
    		<dd>4006-600-000</dd>
    		<dd><img src="images/QQ.jpg" /></dd>
    	</dl>
    
    	<div style="clear:both"></div>
    </div>
    
    
    <p class="Copy">Copyright © 2013-2015 www.tanzhouedu.com All Rights Reserved 版权所有:湖南潭州教育咨询有限公司 备案号:备13016338号</p>
    <!--网站底部结束-->
    
    
    
    
    
    
    <script type="text/javascript" src="js/jquery.js"></script>
    
    <script type="text/javascript">
    	$(".but img").mouseover(function(){
    		//鼠标滑动到对图片按扭,图片加上红色边框,其它去掉边框
    		$(this).addClass("active").siblings("img").removeClass("active"); 
    
    		
    		var bimg=$(this).attr("dataSrc");//获取小图片按扭对应的大图片地址
    		$(".simg img,.bimg img").attr("src",bimg); //给小图片和大图展示赋值 
    		
    
    	});
    
    
    
    	//鼠标滑动到遮罩层上.shade 时 ,的操作
    	$("#box .simg .shade").hover(function(){
    		$(".simg span.move,.bimg").show(); //小滑块和大图展示显示
    	},function(){
    		$(".simg span.move,.bimg").hide();//小滑块和大图展示隐藏
    	});
    
    	//当鼠标在遮罩层上.shade 移动时,动态来获取 小滑块的位置
    	$("#box .simg .shade").mousemove(function(e){
    		
    		var x=e.clientX;  //鼠标与浏览器窗口左边距离
    		var y=e.clientY+$(window).scrollTop(); //鼠标与浏览器窗口上面距离
    
    
    		var l=$(this).offset().left;  //获取.shade与浏览器窗口左边距离
    		var t=$(this).offset().top;  //获取 .shade 与浏览器窗口上边距离
    		
    
    		var w=$(".simg span.move").width()/2;  //获取小滑块宽度的一半
    		var h=$(".simg span.move").height()/2; //获取小滑块高度的一半
    
    
    		var _left=x-l-w;  //小滑块与 .shade 左边的距离
    		var _top=y-t-h;  //小滑块与 .shade 上面的距离
    
    
    		var bigW=$("#box .simg .shade").width()-w*2-2;  //滑块能滑动的最大宽度
    		var bigH=$("#box .simg .shade").height()-h*2-2; //滑块能滑动的最大高度
    		//document.title=_left+"="+_top;
    		//通过_top判断,小滑块在竖直方向不能移出去 
    		if(_top<0){
    			_top=0; 
    		}else if(_top>bigH){
    			_top=bigH;
    		}
    
    		//通_left值判断 ,小滑块在水平方向不能移出去
    		if(_left<0){
    			_left=0;
    		}else if(_left>bigW){
    			_left=bigW;
    		}
    
    		//给小滑块赋值 top  left
    		$(".simg span.move").css({"left":_left,"top":_top});
    
    
    		//获以滑块滑动的宽度和高度的比例
    		var wbl=_left/bigW;  //滑动宽度和最大滑动的宽度比例
    		var hbl=_top/bigH;  //滑动高度和最大滑动的高度比例
    
    		//document.title=wbl;
    
    		var bigLeft=($(".bimg img").width()-$(".bimg").width())*wbl;  //大图向左移动距离
    		var bigTop=($(".bimg img").height()-$(".bimg").height())*hbl;  //大图向上移动距离
    
    		$(".bimg img").css({"left":-bigLeft,"top":-bigTop}); //动态给大图赋值
    
    		
    	});
    
    </script>
    
    <script type="text/javascript">
    //选项卡效果
    $("#ProductInfo ul.sel li").mouseover(function(){
    	var _index=$(this).index();
    	$(this).addClass("active").siblings("li").removeClass("active");
    	$("#ProductSelect .selCon").eq(_index).show().siblings("div").hide();
    
    });
    
    </script>
    
    
    
    <!--
    	1、在News大盒子里面,构建两个一样大小的长方形,一个用来设背景透明,一个利用绝定位,盖在透明
    	图层上面,用来放内容
    	2、利用 h3标签来制作标题部分(颜色,大小,字体类型,竖直居中,首行缩进text-indent:20px;)
    	3、利用 ul来制作新闻列表,文字竖直间距利用行高 line-height:30px;  给 ul添加对应的内边距,使文字与上右下左产生一定的间距。
    	4、给文字加上了 a标签超链接,如何优化我们代码,代码的性能,如果把常用样式,统一初始化,我们选择的是用标签来表达,而不是用 *
    -->
    
    
    
    
     </body>
    </html>
    
    

    四、前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

    适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_HTML网页设计结课作业_09



    # 五、源码获取 ❉ ~ 关注我,点赞博文~ 每天带你涨知识!

    ❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    ❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

    ❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

    HTML期末大作业~节日礼品购物商城网站html模板(HTML+CSS+JavaScript)_节日礼品购物商城网站htm模板_10

    六、更多HTML期末大作业文章

    1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

    2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

    3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

    4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

    5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

    6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

    7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

    8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

    9.HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

    10.大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

    11.HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

    12.web前端大一实训~制作卡布漫画网站设计与实现(HTML+CSS+JavaScript)

    13.web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)

    14.HTML期末大作业~酒店网站模板(HTML+CSS+JavaScript)

    15.HTML学生网页设计作业源码~开心旅游网站设计与实现(HTML期末大作业)

    16.HTML奥运网页5页面文化 ~ 体育学生网页设计作业

    17.HTML我的家乡杭州网页设计作业源码(div+css)

    18.HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码

    19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面

    20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

    21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)

    22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)

    23 Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)

    24.HTML期末大作业~绿色农产品食品类网站设计与实现(HTML+CSS+JavaScript)

    25.HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)

    26.HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

    27.HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品

    28.HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)

    29.HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

    30.HTML期末大作业 ~ 凤阳智慧旅游官方旗舰店(我的家乡)(HTML+CSS+JavaScript)

    31.HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)

    32.HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)

    33.HTML期末大作业课程设计~动漫游戏官网10个页面(HTML+CSS+JavaScript)

    34.个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)

    35.HTML期末大作业~个人图片资源网页设计共5个页面(HTML+CSS+JavaScript)

    36.web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)

    37.HTML期末大作业~清新手工肥皂网站展示4个页面(HTML+CSS+JavaScript+Bootstrap)

    38.学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)

    39.HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript

    40.HTML期末大作业~速鲜站餐饮食品html网页(共6个页面)HTML+CSS+JavaScript

    41.HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(8个页面)(HTML+CSS)

    42.HTML网页设计结课大作业~仿凡客服装商城主页纯HTML模板源码(HTML+CSS+JS)

    43.HTML网页设计结课作业~仿蘑菇街商城网站源码(HTML+CSS+JS)

    44.web课程设计网页规划与设计~时尚服装购物商城模板html源码(HTML+CSS+JS)

    [45.web网页设计期末课程大作业~粉色的服装购物商城页面模板(HTML+CSS+JS)])(https://blog.csdn.net/ruan365392777/article/details/118406804)

    七、更多表白源码

    ❤100款表白源码演示地址

    展开全文
  • APP下载页面HTML模板

    千次下载 热门讨论 2014-11-04 20:01:28
    APP下载页面HTML模板,大家可以参考,直接修改图片即可。
  • HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。...
    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)

    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~

    原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,~这是一个不错的网页制作,画面精明,非常适合初学者学习使用。

    作品介绍

    仿小米商城纯HTML模板、登录 注册 交易订单、我的购物车、列表页面、会员登录、会员注册、我的资料、商品详页等商城网站模板

    此作品为学生个人主页网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:DW、HBuilder、NotePAD, Vscode 所有编辑器均可使用)

    网页作品布局方面:网页布局整体为LOGO、导航、轮播图、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

    网页作品技术方面:使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单,同时简单使用JavaScript制作了表单判断(提交时表单不能为空)
    空)

    一、作品演示

    1.首页

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_仿小米商城网站纯HTML源码

    2. 登录

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_商城源码HTML_02

    3. 注册

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_HTML网页设计结课作业_03

    4.我的订单

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_仿小米商城网站纯HTML源码_04

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_商城网站页面HTML_05

    5. 购物车

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_仿小米商城网站纯HTML源码_06

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_HTML网页设计结课作业_07

    6.商品列表

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_仿小米商城网站纯HTML源码_08

    二、代码目录

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_HTML网页设计结课作业_09

    三、代码实现
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>小米手机列表</title>
    		<link rel="stylesheet" type="text/css" href="./css/style.css">
    	</head>
    	<body>
    	<!-- start header -->
    		<header>
    			<div class="top center">
    				<div class="left fl">
    					<ul>
    						<li><a href="http://www.mi.com/" target="_blank">小米商城</a></li>
    						<li>|</li>
    						<li><a href="">MIUI</a></li>
    						<li>|</li>
    						<li><a href="">米聊</a></li>
    						<li>|</li>
    						<li><a href="">游戏</a></li>
    						<li>|</li>
    						<li><a href="">多看阅读</a></li>
    						<li>|</li>
    						<li><a href="">云服务</a></li>
    						<li>|</li>
    						<li><a href="">金融</a></li>
    						<li>|</li>
    						<li><a href="">小米商城移动版</a></li>
    						<li>|</li>
    						<li><a href="">问题反馈</a></li>
    						<li>|</li>
    						<li><a href="">Select Region</a></li>
    						<div class="clear"></div>
    					</ul>
    				</div>
    				<div class="right fr">
    					<div class="gouwuche fr"><a href="">购物车</a></div>
    					<div class="fr">
    						<ul>
    							<li><a href="./login.html" target="_blank">登录</a></li>
    							<li>|</li>
    							<li><a href="./register.html" target="_blank" >注册</a></li>
    							<li>|</li>
    							<li><a href="">消息通知</a></li>
    						</ul>
    					</div>
    					<div class="clear"></div>
    				</div>
    				<div class="clear"></div>
    			</div>
    		</header>
    	<!--end header -->
    
    <!-- start banner_x -->
    		<div class="banner_x center">
    			<a href="./index.html" target="_blank"><div class="logo fl"></div></a>
    			<a href=""><div class="ad_top fl"></div></a>
    			<div class="nav fl">
    				<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 fr">
    				<form action="" method="post">
    					<div class="text fl">
    						<input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货">
    					</div>
    					<div class="submit fl">
    						<input type="submit" class="sousuo" value="搜索"/>
    					</div>
    					<div class="clear"></div>
    				</form>
    				<div class="clear"></div>
    			</div>
    		</div>
    <!-- end banner_x -->
    
    	<!-- start banner_y -->
    	<!-- end banner -->
    
    	<!-- start danpin -->
    		<div class="danpin center">
    			
    			<div class="biaoti center">小米手机</div>
    			<div class="main center">
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href="./xiangqing.html" target="_blank"><img src="./image/liebiao_xiaomi6.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="./xiangqing.html" target="_blank">小米6</a></div>
    					<div class="youhui">5.16早10点开售</div>
    					<div class="jiage">2499.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_xiaomi5c.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">小米手机5c</a></div>
    					<div class="youhui">搭载澎湃S1 八核高性能处理器</div>
    					<div class="jiage">1499.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_xiaomint2.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">小米Note 2</a></div>
    					<div class="youhui">5月9日-20日 小米Note 2 享花呗12期分期免息</div>
    					<div class="jiage">2799.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_xiaomimix.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">小米MIX</a></div>
    					<div class="youhui">5月9日-20日小米MIX 享花呗12期分期免息</div>
    					<div class="jiage">3499.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_xiaomi5s.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">小米5s</a></div>
    					<div class="youhui">“暗夜之眼”超感光相机 / 无孔式超声波</div>
    					<div class="jiage">1999.00元</div>
    				</div>
    
    				<div class="clear"></div>
    			</div>
    			<div class="main center mb20">
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_xiaomi5.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">小米手机5</a></div>
    					<div class="youhui">骁龙820处理器 / UFS 2.0 闪存</div>
    					<div class="jiage">1799.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_hongmin4.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">红米Note 4</a></div>
    					<div class="youhui">十核旗舰处理器 / 全金属一体化机身 </div>
    					<div class="jiage">1399.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/pinpai3.png" alt=""></a></div>
    					<div class="pinpai"><a href="">小米手机5 64GB</a></div>
    					<div class="youhui">5月9日-10日,下单立减100元</div>
    					<div class="jiage">1799元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_hongmin42.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">红米4</a></div>
    					<div class="youhui">2.5D 玻璃,金属一体化机身</div>
    					<div class="jiage">999.00元</div>
    				</div>
    				<div class="mingxing fl mb20" style="border:2px solid #fff;width:230px;cursor:pointer;" onmouseout="this.style.border='2px solid #fff'" onmousemove="this.style.border='2px solid red'">
    					<div class="sub_mingxing"><a href=""><img src="./image/liebiao_hongmin4x.jpg" alt=""></a></div>
    					<div class="pinpai"><a href="">红米Note 4X 全网通版</a></div>
    					<div class="youhui">多彩金属 / 4100mAh 超长续航</div>
    					<div class="jiage">1299.00元</div>
    				</div>
    				
    				<div class="clear"></div>
    			</div>
    		</div>
    		
    
    		<footer class="mt20 center">			
    			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
    			<div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
    			<div>违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</div>
    
    		</footer>
    
    	<!-- end danpin -->
    
    
    	</body>
    </html>
    

    四、前端 零基础入门到高级(视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

    适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_仿小米商城网站纯HTML源码_10



    # 五、源码获取 ❉ ~ 关注我,点赞博文~ 每天带你涨知识!

    ❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧,你的「点赞,好评,收藏」是我创作的动力。

    ❉ 2.关注我~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

    ❉3.以上内容技术相关问题可以相互学习,可关注↓公Z号 获取更多源码 !

    HTML网页设计结课作业~仿小米商城网站纯HTML模板源码(HTML+CSS)_商城源码HTML_11

    六、更多HTML期末大作业文章

    1.HTML期末学生结课大作业~html+css+javascript仿叮当电影在线网站(功能齐全)

    2.HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全)

    3.HTML期末学生大作业(9套)html+css+javascript仿京东、天猫、服装、各大电商模板(大学毕业设计)

    4.HTML期末大作业~海贼王中乔巴专题漫画学生网页设置作业源码(HTML+CSS+JavaScript)

    5.HTML期末大作业~基于HTML+CSS+JavaScript的旅游网站设计与实现

    6.HTML网页设计期末课程大作业~仿腾讯游戏官网设计与实现(HTML+CSS+JavaScript)

    7.HTML期末大作业~仿小米商城网页设计模板(HTML+CSS+JavaScript)

    8.HTML期末大作业~餐饮文化学生网页设计作业(HTML+CSS+JavaScript)

    9.HTML学生网页设计作业~餐饮美食汉堡企业网站6页面带轮播(HTML+CSS+JavaScript)

    10.大学web基础期末大作业~仿品优购页面制作(HTML+CSS+JavaScript)

    11.HTML网页设计制作大作业-制作漫画网页设计6个页面(HTML+CSS+JavaScript)

    12.web前端大一实训~制作卡布漫画网站设计与实现(HTML+CSS+JavaScript)

    13.web网页设计期末课程大作业~超高仿英雄联盟LOL游戏官网设计与实现(HTML+CSS+JavaScript)

    14.HTML期末大作业~酒店网站模板(HTML+CSS+JavaScript)

    15.HTML学生网页设计作业源码~开心旅游网站设计与实现(HTML期末大作业)

    16.HTML奥运网页5页面文化 ~ 体育学生网页设计作业

    17.HTML我的家乡杭州网页设计作业源码(div+css)

    18.HTML网页设计期末课程大作业~动漫樱桃小丸子5页表格div+css学生网页设计作业源码

    19.HTML学生网页设计作业成品~化妆品官方网站设计与实现(HTML+CSS+JS)共8个页面

    20.HTML大学生动漫网页设计作业源码 ~ 火影忍者动漫7页面带特效带轮播(HTML+CSS+JavaScript)

    21.一套完整仿拉勾网HTML静态网页模板(含38个独立HTML)

    22.HTML期末作业课程设计大作业~环境保护学生网页设计作业源码(HTML+CSS)

    23 Web大学生网页作业成品~美食餐饮网站设计与实现(HTML+CSS+JavaScript)

    24.HTML期末大作业~绿色农产品食品类网站设计与实现(HTML+CSS+JavaScript)

    25.HTML期末大作业~花店鲜花商城网站模板设计与实现(HTML+CSS+JavaScript)

    26.HTML期末大作业~大学生旅游官网设计作业成品(HTML+CSS+JavaScript)

    27.HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品

    28.HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)

    29.HTML期末大作业 ~ 凤阳旅游网页设计作业成品(HTML+CSS+JavaScript)

    30.HTML期末大作业 ~ 凤阳智慧旅游官方旗舰店(我的家乡)(HTML+CSS+JavaScript)

    31.HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)

    32.HTML期末大作业课程设计动漫主题html5网页~奇恩动漫首页html模板(HTML+CSS)

    33.HTML期末大作业课程设计~动漫游戏官网10个页面(HTML+CSS+JavaScript)

    34.个人设计web前端大作业~响应式游戏网站源码(HTML+CSS+Bootstrap)

    35.HTML期末大作业~个人图片资源网页设计共5个页面(HTML+CSS+JavaScript)

    36.web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)

    37.HTML期末大作业~清新手工肥皂网站展示4个页面(HTML+CSS+JavaScript+Bootstrap)

    38.学生HTML个人网页作业作品~蛋糕甜品店铺共11个页面(HTML+CSS+JavaScript)

    39.HTML期末大作业~棋牌游戏静态网站(6个页面) HTML+CSS+JavaScript

    40.HTML期末大作业~速鲜站餐饮食品html网页(共6个页面)HTML+CSS+JavaScript

    七、更多表白源码

    ❤100款表白源码演示地址

    展开全文
  • vscode 快速生成html模板

    千次阅读 热门讨论 2022-02-08 08:15:51
    VSCode中,在新建html的页面生成代码,可以 输入! 然后回车或者Tab即可自动生成一个html文件模板,效果如下

    VSCode中,在新建html的页面生成代码,可以 输入! 然后回车或者Tab即可自动生成一个html文件模板,效果如下
    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • pycharm中设置html模板

    千次阅读 2022-03-13 19:50:13
    在使用pycharm创建html文件时,我的一直是空白的,没有自动生成对应的标签,百度了很久才知道可以设置模板文件,同时也可以添加在线的样式文件和框架等。 在线的前端框架收录网站推荐:BootCDN - Bootstrap 中文网...
  • 50电影模板Html模板! 56个游戏Html模板 86个体育项目Html模板 95个音乐网站Html模板 116个时尚Html模板 50电影模板Html模板! 儿童电影动画片主题网站模板.rar 卡通html5电影网站模板.rar 钢铁侠电影...
  • 5套漂亮的个人博客html模板分享

    千次阅读 2021-06-13 10:37:26
    今天酷猫网络和大家分享5套漂亮的个人博客html模板,这五套html模板,有国外的,也有国内的,有单栏的,也有大气的,一起来看看。第一套html模板:这是一套大气的博客模板,纯html,顶部,左侧是导航,右侧是内容,...
  • 如何将html模板资源转为vuecli项目

    千次阅读 多人点赞 2022-02-14 12:41:40
    将找到的html素材模板,转换为vue的文件。 这个网上照了一圈,没找到合适的方案,就自己尝试弄了一下 目标效果 2.具体步骤 1. 通过vueclie 创建项目 vue create 项目名称 然后把默认的样式删除了 2. 将静态资源放...
  • VSCode 自定义html模板

    千次阅读 2021-01-28 00:03:51
    "\t ", "\n", "" ], "description": "HT-H5" // 模板的描述 } 第三步:使用自定义的快捷键快速创建模板 第二步中自定义创建模板快捷键是 “ vv ” 输入vv即可快速创建html模板 为你推荐: Win10如何...
  • 免费的html模板开源网站

    千次阅读 2021-08-23 16:00:51
    分享一个免费的html模板开源网站 仅需注册即可下载 html5模板网
  • vscode中如何创建自定义html模板

    千次阅读 2021-06-09 10:13:18
    +tab键--------自动生成html模板方法二:在空白html文件中输入“html”,选择相应的模板方法三:自定义模板 方法一:输入!+tab键--------自动生成html模板 方法二:在空白html文件中输入“html”,选择相应的模板 ...
  • 关于Vscode自动更新后按!或按!+tab键不能自动生成html模板的问题和解决方法
  • 打开VScode,按Ctrl+Shift+P; 在搜索框输入Change Language Mode,也就是“更改语言模式”, 单击或者按回车选择此项; 下拉找到HTML,单击选择即可; 此时再按! + Tab就会出现自动补全的模板
  • VScode输入感叹号无法生成HTML模板

    千次阅读 多人点赞 2022-07-09 07:32:25
    解决VScode输入感叹号无法生成HTML模板问题
  • VScode修改默认生成的HTML模板

    千次阅读 2020-07-08 22:17:43
    +tab键,快速生成HTML代码模板,默认生成的代码模板如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ...
  • vs code 配置html模板

    万次阅读 2019-07-10 16:47:31
    vs code 配置html模板 找到配置位置 首选项 - 用户代码片段 - 输入html.json 2. 写入代码段 // html.json { // Place your snippets for html here. Each snippet is defined under a snippet name and has a ...
  • js中使用HTML模板字符串

    万次阅读 2018-12-15 15:58:44
    在实际项目中,难免会遇到在js中动态拼接html的代码,这样虽然比较简单,但是相对来说不太好维护,后期如果改了html结构,那么js改动的东西会比较多。如下代码就是动态拼接html的不太好的代码: var html = '&...
  • Java读取根据HTML模板生成HTML页面

    万次阅读 2018-01-23 10:58:54
    首先,我们需要一个html模板: ###title### ###title### ###author### ###content### ###html### 其次:我们编写java代码实现模板读取,页面生成: import javax.servle
  • 项目中新建一个template文件夹,再新建一个jquery_template_beta.js文件 在js文件中粘贴如下代码 if (jQuery) { window.addEventListener('message', function... $('iframe.base_html_template').replaceWith('
  • ​​>>>❤戳我❤>>>...临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?...没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~原始HTML+CSS+J...
  • HTML邮件模板编写规则,编写邮件HTML模板

    万次阅读 热门讨论 2018-06-07 22:59:37
    工作中遇到需要发邮件模板给客户发送凭证,踩坑踩出来一下规则: 1.所有样式必须行内,否则不起作用 大部分邮件客户端中不支持使用外置css样式,最好使用内联样式 2.所有布局必须使用table,复杂布局使用...
  • vscode如何快速生成html模板

    千次阅读 2020-03-14 20:53:31
    1、输入:< 点击:!DOCTYPE 2、输入:html ,点击:html:5
  • VSCode编写html文件时,使用英文感叹号+回车即可生成一个html模板,本文讲述如何在一定程度上自定义这个模板。 1. 备份配置文件,以防不测   该模板由emmet语法生成,配置文件位于{VSC安装路径}\resources\app\...
  • 2021年新年快乐HTML模板

    千次阅读 2021-01-11 15:35:20
    2021年新年快乐HTML模板是一款窄屏小巧好看的新年庆祝网站模板下载。提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢。 下载地址: http://www.bytepan.com/xLg7c4HkvcK 图片预览: ...
  • 2.尝试:最开始想到的办法是插值表达式,结果一用就错,插值表达式会将写好的html模板解释成字符串,并不会以html结构去展示例如:visible="basinModal">// 想要展示的模板内容{{ basinTemplate }}然后希望通过...
  • 邮件签名——html模板

    千次阅读 2020-07-02 09:44:29
    <div> <br /><br /><br /> 祝好! <br /><br /> <hr /> <span style="font-family: 楷体, 楷体_GB2312; font-size: 16px;...(研究院10007870)&l
  • freemarker获取html模板进行渲染输出

    千次阅读 2018-05-15 00:43:03
    1、获取html文件内容进行模板解析,返回到页面展示 2、获取html文件内容进行模板解析,进行邮件发送 3、获取xml文件内容进行模板接卸,生成office办公文件,达到apache poi的效果 maven工程配置 &...
  • Intellij IDEA 配置HTML模板

    千次阅读 2020-03-12 11:44:02
    最近在学习vue,每次写html代码模板的的时候有些浪费时间,自己配了个html模板,这样就方便多啦 步骤 Mac上IntelliJ IEDA->preferences ( win上file->settings),找到File and Code Templates 点击 + 号新建...
  • vscode怎么快速创建生成html模板

    千次阅读 热门讨论 2021-03-03 23:51:44
    创建一个文件,按Ctrl+s进行保存,弹窗后输入文件名加后缀名html, 然后在创建的文件中输入英文状态输入法下的感叹号(!), 然后按一下键盘上的Tab键即可生成Html模板

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 911,036
精华内容 364,414
关键字:

html模板