1. 首页
  2. IT资讯

活久见,css还能实现在网页实时编辑!

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F3bedcd839d2a42c5bc03ae6076f4ab82″ img_width=”838″ img_height=”520″ alt=”活久见,css还能实现在网页实时编辑!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E继上一篇文章 u003Ca class=”pgc-link” href=”https:u002Fu002Fwww.toutiao.comu002Fi6627984526985396749u002F?group_id=6627984526985396749″ target=”_blank”u003E干了这么久前端,你有注意到CSS的这个冷知识吗?u003Cu002Fau003E ,今天来给大家推出css冷知识系列的第二篇,今天给大家介绍如何在网页中实时编辑css,先附上代码:u003Cu002Fpu003Eu003Cpreu003E<!DOCTYPE html>u003Cbru003E<html lang=”en”>u003Cbru003E<head>u003Cbru003E <meta charset=”UTF-8″>u003Cbru003E <title><u002Ftitle>u003Cbru003E<u002Fhead>u003Cbru003E<body>u003Cbru003E<style style=”display: block;position: fixed;right: 0;top: 0″ contenteditable=”true”>u003Cbru003E div{u003Cbru003E width:100px;u003Cbru003E height:100px;u003Cbru003E background:red;u003Cbru003E }u003Cbru003E<u002Fstyle>u003Cbru003E<div>u003Cbru003E 这是一个DIVu003Cbru003E<u002Fdiv>u003Cbru003E<u002Fbody>u003Cbru003E<u002Fhtml>u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E从上面代码可以看出,与平常不同的是,我给style标签也新增了一些样式(估计平常是没人这么干的)这些样式最重要的一点是:u003Cu002Fpu003Eu003Cpreu003Edisplay:block;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这样就让style标签中的css代码区域在网页上可见了,至于:u003Cu002Fpu003Eu003Cpreu003Eposition: fixed;right: 0;top: 0;u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E让style标签fixed布局是为了在编辑css的过程中不影响页面其他内容的布局,当然,style标签仅仅可见还是不行的,我们还要让他可编辑,所以,给style标签加上了:u003Cu002Fpu003Eu003Cpreu003Econtenteditable=”true”u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E这样一来,这个style标签就展现了网页的固定区域,并且可以让我们自由编辑了!,下面来看看效果吧:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fd56392fda58240379f0c3c0215587562″ img_width=”2560″ img_height=”382″ alt=”活久见,css还能实现在网页实时编辑!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E可以看到,右侧出现了可编辑的css区域,我们编辑这个区域试试:u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fpgc-imageu002F554474ed0a644b1fa6e1265f76fc3a52″ img_width=”2560″ img_height=”366″ alt=”活久见,css还能实现在网页实时编辑!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E从上图可以看出,我们在网页上把div的颜色从红色改成了绿色,实现了实时编辑!u003Cu002Fpu003Eu003Cpu003Ecss的实时编辑就说到这里啦,你学到了吗?u003Cu002Fpu003Eu003Cpu003EPS:如果这票文章让你学到了一点知识,欢迎点赞并关注我哦,每天一点技术干货,让我陪你在大牛的路上越走越远!!!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:活久见,css还能实现在网页实时编辑!

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11212.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code