Question

所以，我是一个相当缺乏经验的网络程序员，只是在这里或那里使用一些HTML或CSS。我对这一切基本上一无所知。

根据我目前的问题，我无法确定这是否是我对网络编码缺乏了解，或者是否是这种调查工具的设置方式。

在调查小工具中，您可以在调查本身的外部位置创建“自定义CSS”编码。我认为这可以作为外部CSS样式表，但你可以在那里放置多种样式。

然后，对于调查的每个页面，您可以链接到您在其他地方定义的样式，或者您可以为每个问题链接到它们。我也可以修改页面的头部，并且“自定义HTML”的选项也位于单独的文档中。

我试着和Gizmo（SG）一起调查这个问题，但他们的态度是我应该理解它，或者我应该付钱让他为我编程......

我要做的是让屏幕左侧有一个视频播放器，然后在屏幕的右侧有一些问题，可以是滚动浏览，而视频播放器保持不动。

现在，SG为CSS提供的示例如下所示：

.width-33{ 
clear: none; 
float: left; 
width: 33%; }

我真的不明白这是什么 - 它是一个类，还是以某种方式逼近样式表名称？无论如何，我可以成功地将其应用于调查问题。但我不知道如何成功应用更复杂的结构。要应用此功能，我点击我的调查问题，并且有一个自定义CSS样式的字段，我在该字段中输入“width-33”。

我想做类似于此处显示的内容：http://jsfiddle.net/avrahamcool/QMsuD/1/但是切换（我不需要知道如何切换它，只是如何让它在SG中工作）。

该页面的CSS看起来像这样

* {
    margin: 0;
    padding: 0;
}
html,
body,
.Container {
    height: 100%;
}
.Container:before {
    content: '';
    height: 100%;
    float: left;
}
.Header {
    margin-bottom: 10px;
    background-color: #6ea364;
}
.Content {
    position: relative;
    z-index: 1;
}
.Content:after {
    content: '';
    clear: both;
    display: block;
}
.Wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
.Wrapper > div {
    height: 100%;
}
.LeftContent {
    background-color: purple;
    overflow: hidden;
}
.LeftContent:hover {
    overflow: auto;
}
.RightContent {
    background-color: orange;
    float: right;
    margin-left: 10px;
}

，HTML看起来像这样：

 <div class="Container">
    <div class="Header">
        <p>The Header div height is not fixed (But he can be if you want it to)</p>
        <p>This Layout has been tested on: IE10, IE9, IE8, FireFox, Chrome, Safari, Opera. using Pure CSS 2.1 only</p>
    </div>
    <div class="Content">
        <div class="Wrapper">
            <div class="RightContent">
                <p>You can fix the width of this content.</p>
                <p>if you wont, his width will stretch just as it needs to.</p>
            </div>
            <div class="LeftContent">
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
                <p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p><p>this will scroll</p>
            </div>
        </div>
    </div>
</div>

所以，我只想弄清楚如何让它发挥作用。我意识到尝试理解调查工具如何利用这一点可能会让人感到困惑，但我希望这里可能会发生一些对经验丰富的程序员有意义的事情。

基本上，我如何解析这个代码示例以将其装入调查Gizmo系统？如何将上面的CSS代码转换为外部样式表，一旦我这样做，如果我告诉调查工具使用CSS样式“leftContent”（我的视频播放器）和CSS样式“rightContent”（我的问题）。

有关如何使这项工作的任何其他建议？该工具还允许使用javascript。

将CSS与调查网站一起使用（调查小发明）

0 个答案: