【鸢神出击】html在书写网页时遇到的一些基础功能记录

一、文本常见编辑问题

1、元素自由排布

<style>
	.detail{
		display: flex;
		position: relative;<!--相对位置定义-->
	}
    <!--脱离标签限制-->
    .pub{ 
        <!--这边设置的是把文字放置于页面右边-->   
        float: right;
        right: 13px;
        <!--绝对位置定义-->
        position: absolute;
        <!--出现多行文字可以使用右对齐-->
        text-align: right;
    }    
</style>

2、如何给文字添加下划线

想要在文字下方添加一条下划线，首先把这段文字单独放入一个标签

因为内容是复制，我就把这个类名取为copy

<style>
	.copy{
		text-decoration:underline;
	}
</style>

这样书写之后，保存，打开网页刷新一下就可以

二、如何在页面里书写一条美丽的横线

像这样的横线怎么写呢？非常简单！

首先在想要画横线的地方建立一个标签，填上这些内容（2px是我设定的宽度，#f8f8f8是颜色）

	<div class="line" style="border:2px solid #f8f8f8"></div>

然后根据个人需要进行样式调整

三、图标和文字需要根据状态进行更新变化

用if判断语句进行书写，将某一变量作为参考依据，判断在该变量为某种情况时页面展现呈现某种指定变化：

以订单交易过程为例，一般来说有三种情况

	<div class="state">
		<if condition="$detail['audit'] eq 0">
			<i class="r ye iconfont icon-get"></i>
			订单待发货
			<elseif condition="$detail['audit'] eq 1"/>
				<i class="r bl iconfont icon-cart"></i>
				订单已发货
			<else />
				<i class="r gr iconfont icon-get"></i>
				订单已完成
		</if>
	</div>

四、确认一个包里一共能引用多少变量

只要在标签里放入<{:var_dump($包的名称)}>就可以啦

这样书写之后，保存，打开网页刷新一下，会在页面里打印出所有变量啦

<em><{:var_dump($detail)}></em>

五、完成点击复制功能

在订单详情页里总是会遇到一种功能就是点击按钮就能完成快递单号一键复制，这种功能具体是怎么实现呢？首先在script里面写一个function；

<script>
	function copyToClip(content, message) {
		var aux = document.createElement("input");
		aux.setAttribute("value", content);
		document.body.appendChild(aux);
		aux.select();
		document.execCommand("copy");
		document.body.removeChild(aux);
		if (message == null) {
			alert("复制成功");
		} else{
			alert(message);
		}
	}

</script>

之后再写一个这样的div出来（作为按钮），按钮处引用该方法完成指定信息复制：

	<div class="copy"  onclick="copyToClip('<{$detail.express_number}>')">
		复制
	</div>