Web前端学习记录(十)

最新推荐文章于 2022-10-20 20:30:14 发布

fakerth

最新推荐文章于 2022-10-20 20:30:14 发布

阅读量1.2k

点赞数 5

分类专栏： Web前端

本文链接：https://blog.csdn.net/weixin_43912621/article/details/105157923

版权

Web前端专栏收录该内容

19 篇文章 2 订阅

订阅专栏

写在前面

因为最近在学web前端，一般习惯用Google浏览器，所以找时间给她换了一个主题，十分的惬意，对着广阔无垠的浩瀚星海,对着满天的银光,就这样静静地坐着,心里就有了一片完整的星空。
在这里插入图片描述

使用JavaScript代码动态生成商品的展示区域

shoppingShow_goods_byScript.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>漫步时尚广场-购物列表-商品展示</title>
    <style type="text/css">
        *{padding:0;margin:0}
        li,ul{list-style:none}
        body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
        /*中间部分*/
        .middle{float:left;width:690px}
        .pic_list{float:left}
        .pic_list dl{float:left;width:152px;margin:0 10px 10px}
        .price{font-size:15px;font-weight:700;color:red;float:left}
        .price2{font-size:12px;font-weight:700;color:red;text-align:center}
        .font12{font-size:12px;color:#ccc;float:right}
        .pic_list dl img{padding:5px;border:1px solid #ccc;margin-bottom:10px}
        .pic_list dl dd{float:left}
        .pic_title{background:#ff9c01;line-height:40px;font-size:16px;text-indent:20px;text-align:left;width:680px;float:left;color:#fff;margin:0 10px 10px}
        .pic_list2 li{float:left}
        .pic_list2{margin:0 6px 0 12px}
        .pic_list2 li{width:160px;float:left;margin:5px 4px}
    </style>
  </head>
  <body>
  <!--中间区 start-->
<div class="middle">
  <h1 class="pic_title">最新上架</h1>
  <div class="pic_list">
  <script type="text/javascript">
	var images=["yifu1.jpg","yifu2.jpg","yifu3.jpg","yifu4.jpg",
		"yifu5.jpg","yifu6.jpg","yifu7.jpg","yifu8.jpg",];
	var prices=["198.00","69.00","160.00","210.00","70.00","146.00",
		"69.00","239.00"];
	var buyers=[324,534,643,678,567,4567,1345,789];
	var contents=["冬季新款牛仔外套加厚连帽毛领加绒牛仔棉衣","2015夏新款韩版 透气舒适简约半截袖T恤衫","韩版甜美气质亮片热气球字母中长款圆领短袖T恤","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","2015款秋新款甜美学院立领中袖套头格子衬衫娃娃衫","大码女装胖mm2015夏装新款韩版显瘦露肩镂空连衣裙","v领雪纺背心女夏外穿双层吊带打底衫百搭显瘦无袖上衣","韩版印花无袖短裙背心裙女 高腰连衣裙A字裙秋季"];
	for(var i=0;i<images.length;i++){
		var goodsInfo="<dl><div><img src='images/shopshow/"+images[i]
			+"' /></div><dt><span class='price'>￥"+prices[i]
			+"元</span><span class='font12'>"+buyers[i]+"人购买</span></dt><dd>"
			+contents[i]+"</dd></dl>";
		document.write(goodsInfo);
		}
  </script>
</div>
<!--品牌活动-->
<h1 class="pic_title">品牌活动</h1>
  <ul class="pic_list2">
  <script type="text/javascript">
	var images=["dress1.jpg","dress2.jpg","dress3.jpg","dress4.jpg"];
	var contents=["独家定制 V 双层欧根纱里衬 色织时装料大牌范蓬蓬长裙","夏季新款 子域D5656E 简约通勤腰带修身大摆短袖连衣裙","爱美斯 2015夏季优雅显瘦大摆长裙 中长款复古印花淑女裙","亿婷2015夏女装新品显瘦飘逸黑白竖条纹阔腿裤七分裤裙"];
	for(var i in images){
		var goodsInfo="<li><img src='images/shopshow/"+images[i]+"' /><p>"
			+contents[i]+"</p></li>";
		document.write(goodsInfo);
	}
  </script>
<!--中间区 end-->

  </body>
</html>

预览如下：

在这里插入图片描述

分享最近刚看到的一篇短文：

酒逢知己，棋逢对手，勾心斗角，你来我往。

要炽热的吻，要飞扬的唇，要缠绵的拥抱，要拼命的厮守。

深夜应该有撕心裂肺的眼泪，春天应该有柔软缱绻的情话。

总归是要分开死的，天长地久朝生暮死的，谁怕谁啊。

人们总是歌颂那些长久的爱情，那些延绵不绝的浪漫，仿佛如果不是天长地久那就不是真正的爱。人们甚至歌颂那些因为失去一份爱情而保持独身的人，仿佛开始新的爱就是对前一段的亵渎。

我们常常看着八卦新闻中感情破裂的明星情侣说我再也不相信爱情了，也会在听到初中同学离婚的消息时嘘唏不已，仿佛一旦分手了离婚了爱情就没有意义了。于此同时，我们又说性越来越唾手可得，享受就好何必去谈爱呢，伤神伤心。

可是米娜桑，爱很美好呀。

相遇时候的小心翼翼，相互试探，吹嘘炫耀，殷勤献宝。暧昧中的人们辗转反侧，情绪起伏，也充满生命力。

刚在一起的时候眉角飞扬，风花雪月，形影不离，山盟海誓。

热恋中的人们卿卿我我，如胶似漆，干柴烈火。

也有争吵的时候，无论是恶言相向还是暗自啜泣，爱还在的时候总是一个拥抱一个亲吻就能化解和体谅的。

有一天也许就分手了，各自带着这段经历分开走了，但因为那些爱人们有了成长也有了回忆。

也有一些爱一直持续到死亡，变成了一些人口中的美好和另一些人心中的希望。

虽然爱总会消失，爱人总会分开，有些爱长久有些爱短暂。可是没有那些爱，我们也许不认识王小波也不会知道李银河，我们也许听不到梁祝也看不到罗密欧与朱丽叶，要记得是蒙娜丽莎的先生邀请达芬奇来为自己的太太画像的，还有那个为爱情割下耳朵的梵高创作出的迷幻世界，时装精们更应该感谢圣罗兰和TomFord生命中的爱人们给他们的灵感。

当然，就算没有这些，看看在爱中热烈燃烧的自己，在发光呀，多么耀眼。

大家都说的享受孤独，完善自我，但是有爱明明就更好呀。有期待有希望，那怕在还未达成的那天死去，也才不会轻易毫不留恋地离开。因为如果没有任何牵挂，就仿佛也没有到来过了。
在这里插入图片描述
这是一片插播的文章，因为老庄那篇荷尔蒙的标题实在不知如何下笔。偶然翻到日本插画师Misaki Tanaka的画，那种甜腻仿佛溢出屏幕般，让据说看起来很享受单身的我，忍不住说了一句：

果然还是要爱啊。