<!DOCTYPE html>
<html>
<head>
<title>
Float Step
</title>
<style>
body{
font-family: Arial;
}
#menuBar{
font-size: 14px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 29px;
background: rgb(230, 230, 255);
color: black;
box-shadow: 0px 0px 3px 3px rgba(0,0,0, 0.2);
}
.menuBarItem{
float: left;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 5px;
margin: 2px;
//margin-top: 3px;
//border-radius: 15px;
border: 1px solid rgba(0,0,0,0);
transition: background 0.2s, border 0.2s;
}
.menuBarItem:hover{
//border: 1px solid #f00;
background: rgb(220, 220, 255);
border-bottom: 3px solid rgb(180, 180, 255);
//color: white;
}
.icon{
float:left;
margin: 4px;
}
.writeArea{
font-size: 14px;
//background: red;
position: absolute;
top: 80px;
left: 20px;
width: 70%;
//right: 400px;
height: auto;
bottom: 0px;
border: 3px solid rgb(230, 230, 255);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1);
font-size: 14px;
padding: 6px;
}
</style>
</head>
<body>
<div id="menuBar">
<div class="menuBarItem">File</div>
<div class="menuBarItem">Compile</div>
<div class="menuBarItem">Options</div>
<div class="menuBarItem">Help</div>
</div>
<div class="container">
<pre class="writeArea" autofocus id="editor">
int main(){
return 0;
}</pre>
</div>
<!--script src="js/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script-->
<script src="https://ace.c9.io/build/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/ambiance");
editor.session.setMode("ace/mode/c_cpp");
document.getElementById('editor').style.fontSize='14px';
document.getElementById('editor').style.height='auto';
document.getElementById('editor').style.position='absolute';
document.getElementById('editor').style.bottom='0px';
</script>
</body>
</html>
A page with online IDE design by using ACE themed to ambiance for C/C++
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.