gpt4 book ai didi

css - 如何用CSS给首页的4 block Info设置样式?

转载 作者:太空宇宙 更新时间:2023-11-03 23:33:23 25 4
gpt4 key购买 nike

好的,我希望我的主页具有如下图所示的结构

enter image description here

-第一个信息 block 只是 1 个“文本行”

-第二个信息 block 是“Wellcome Text”(这里有很多文本行)

-第三个信息 block 是“注释文本”(这里有一些文本行)

-第 4 个信息 block 用于保存一些小部件,例如按钮、图标...

所以,我决定使用Div。它适用于第 1、第 2 和第 4 个,但我不知道如何定位第 3 个。

.aTextLine
{
position:relative;
left:500px;
top:32px;
text-align:right;
width:420px;
}

.wellcomeText
{
position:relative;
left:200px;
top:50px;
text-align:left;
width:720px;
}

.widgetSection
{
position:relative;
left:200px;
top:60px;
text-align:left;
width:720px;
}

.noteText
{
position:relative;
left:230px;
top:60px;
text-align:left;
width:100px;
}

如果我省略了 noteText 那么它看起来像图片但没有注释部分,所以:

如何更改 CSS .noteText 使其看起来像上图

首页是这样的

    <html>
<div class="{style.aTextLine}" > ...1 text line</div>
<div class="{style.wellcomeText}" > many text lines....
.....
...</div>
<div class="{style.widgetSection}" > <g:Button...> <img...> </div>
</html>

最佳答案

Check this

我假设您的 html 是在 fiidle 中设计的。所以只修改了几个css。如果您只想要那个设计,我可以以最好的方式覆盖整个代码。

.div1
{
position:relative;
left: 100px;
text-align: right;
top:32px;
width:420px;
border: 1px solid;
}

.div2
{
position:relative;
left:80px;
top:50px;
text-align:left;
width:500px;
border: 1px solid;
height: 100px;
float: left;

.div3
{
position:absolute;
width:100px;
left: 600px;
top: 80px;
border: 1px solid;
height: 100px;
}

.div4
{
position:relative;
left:80px;
top:60px;
text-align:left;
width:500px;
clear: both;
border: 1px solid;
}

如果出现任何问题或要求发生变化,请告诉我。我会编辑它。

EDITED FIDDLE它不会造成任何问题..

关于css - 如何用CSS给首页的4 block Info设置样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24773225/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com