Question

最近我一直在使用HTML创建几个设计，然后将它们链接到CSS文件。

我遇到的问题是我将这些设计上传到的网站不允许<div>个标签。我可以将设计作为图像上传，但我想使用我在html而不是photoshop设计的设计。

所以我试图找出如何将我的CSS转换为我的html，因为它不允许<div>标签。

我已经尝试通过<style>标记将我的CSS直接插入到我的html文件中，但是没有读取它。如果我将<div>更改为<p>，那么它确实有效。我也尝试过使用CSS内联转换将css更改为html，但这也不起作用。

所以基本上，我必须弄清楚如何转换我的整个bio，以便将css转换为样式属性。

以下是我创建的一些示例代码：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
        margin: 0; padding: 0; border: 0;
        background: #fffff url(images/bg.png);
        font: 19px Helvetica, Arial, Sans-Serif;
        color: black;
        line-height: 24px;
        background-position: center top;
}

body {
    min-width: 800px;
}



#content {
    background-color: #b8e5f6;
    margin: 0 auto;
    width: 900px;
	height: 600px;
    margin-top: 10px;
    margin-bottom: 30px;
    border-radius: 65px;
}

#content {
	position: relative;
}

#content-desc {
    position: relative;
    top: 230px;
    left: 64px;
    width: 370px;
    height: 100px;
}


#Ocean {
	position: relative;
    background-color: #004a80;
    margin: 0 auto;
    width: 900px;
	height: 70px;
    margin-top: 270px;
}

#Sand {
	position: relative;
    background-color: #f8cc61;
    margin: 0 auto;
    width: 900px;
	height: 160px;
    border-bottom-right-radius:65px;
	border-bottom-left-radius:65px;
}

#Amazon {
    position: absolute;
	margin: 0 auto;
	margin-bottom: 10px;
	width: auto;
    top: 470px;
    left: 80px
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Bio </title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
<body>
		<div id="content">	
		
				<div id="content-desc">	
					<p>  A bunch of random text I've added for example purposes.  </p>
				</div>
				
				<div id="Ocean"></div>
				
				<div id="Sand"></div>
			
				<div id="Amazon">
					<a href="https://www.amazon.co.uk" target="_blank" rel="nofollow"><img id="amazon" src="http://i.imgur.com/2vj7NAr.png" alt="Header" height="30%" width="30%"></a>
				</div>
		</div>
</body>

我已经玩了好几个小时了，但我没有太多运气，因为我对html编码很新。特别是在不使用<div>标记的情况下使不同的框和文本相互叠加。

我也习惯使用绝对定位来放置我的文字和图像，亲戚有点棘手。

是否有人能够为上述示例代码指出正确的方向，以便我可以学习如何转换其余的设计？

谢谢。

Answer 1

你的意思是 like this ??

如果您不允许在html style中使用head标记，并且需要将样式转换为内联，则可以use this tool - 这非常方便！

Answer 2

如果您将页面中呈现的元素复制到具有contenteditable属性的元素中，浏览器会自动执行此操作。

以下代码自动输出具有该属性的元素的代码：

＆＃13;

var editable = document.querySelector("[contenteditable]");
var code = document.querySelector("code");
new MutationObserver(function(mutations){
  code.textContent = editable.innerHTML;
}).observe(editable, {childList: true, attributes: true, characterData: true, subtree: true});

＆＃13;

<div contenteditable style="border: 1px solid black"></div>
<code></code>

＆＃13;

尝试将一些代码复制并粘贴到其中。

如何使用Style属性将CSS转换为HTML

2 个答案: