Css HTML5-填充主要部分/两列设置_Css_Html

Css HTML5-填充主要部分/两列设置

css html

Css HTML5-填充主要部分/两列设置,css,html,Css,Html,我绞尽脑汁想了3个半小时，试图做两件看似简单的事情。第一个任务是填充段落div的外部，另一个任务是将主要部分分成两列，这样我就可以添加到网站其他部分的链接。下面是我的代码，如果你知道我能做什么来解决我的困境，请在下面留下评论多谢各位 html{ 字体系列：Segoe、Segoe UI、DejaVu Sans、投石机MS、Verdana，“无衬线”；字体大小：120%； } 标题{ 背景色：#6699cc；保证金：自动；背景：无重复中心盖；显示：块；位置：相对位置；宽度：60%；

我绞尽脑汁想了3个半小时，试图做两件看似简单的事情。第一个任务是填充段落div的外部，另一个任务是将主要部分分成两列，这样我就可以添加到网站其他部分的链接。下面是我的代码，如果你知道我能做什么来解决我的困境，请在下面留下评论

多谢各位

html{
字体系列：Segoe、Segoe UI、DejaVu Sans、投石机MS、Verdana，“无衬线”；
字体大小：120%；
}
标题{
背景色：#6699cc；
保证金：自动；
背景：无重复中心盖；
显示：块；
位置：相对位置；
宽度：60%；
高度：114px；
边界：0px；
溢出：隐藏；
}
导航{
背景色：无；
边界：1px；
边框颜色：黑色；
显示：内联块；
填充：0；
位置：绝对位置；
底部：0；
右：50px；
}
#标题左{
宽度：50%；
显示器：flex；
对齐项目：柔性端；
身高：100%；
位置：绝对位置；
底部：5px；
左：55px；
z指数：2；
}
#标题右侧{
宽度：50%；
显示器：flex；
对齐项目：柔性端；
身高：100%；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：无；
}
李海军{
浮动：左；
左边框：1px实心#555；
}
李阿{
显示：块；
颜色：#fff；
填充：8px 10px；
文字装饰：无；
}
导航李a：悬停{
背景色：#555；
颜色：白色；
}
#包装纸{
宽度：100%；
溢出：隐藏；
}
#容器{
宽度：100%；
保证金：0自动；
溢出：隐藏；
对齐：底部；
}
#横幅img{
宽度：100%；
不透明度：0.5；
}    
身体{
保证金：0；
}
主管道h1、h6{
利润率：037.3%；
左侧填充：20px；
文本对齐：左对齐；
字体大小：正常；
背景色：#6699cc；
}
主h6{
垫底：10px；
颜色：#fff；
边框底部：中实心#5555；
}
主要{
背景色：#fff；
保证金：20px自动；
宽度：60%；
}
.TextWrap{
浮动：左；
利润率：20px；
文本对齐：对齐；
}
h1.特色{颜色：#FFFFFF}
span.article{color:#444}
页脚{
背景色：#555；
颜色：#000000；
文本对齐：居中；
宽度：60%；
保证金：自动；
}










2016年网络星期一
格雷戈里·谢泼德
科技公司在这个假日的“网络星期一”购物活动中打破记录，在全球范围内花费了近35亿美元。这比前一年的销售额高出12%以上。分析人士表示，网上购物的趋势正在发生巨大变化，甚至声称2017年的黑色星期五可能是今年最热门的网上购物日。在今年早些时候达成交易后，各公司已经表明，提前开始网络星期一交易不会影响销售。如果这一趋势继续下去，我们可能会看到交易最早在2017年11月1日出现
今年创纪录的销售额是由于公司提供了比往年更多的在线提货产品。Target与路边应用程序合作，允许客户从其移动设备上购买商品，并在商店中提货。亚马逊的股票在假日周末显著上涨，而零售商店的股票则小幅下跌。这一趋势表明，未来手机购物将在这些销售活动中占据更大的份额
仅在线商店，如Newegg、Tiger direct和NCIX也参与了假日活动。以11月黑色事件而自豪的纽蛋，整个月都有交易。与其他公司的合作使新蛋能够在互联网上提供迄今为止最好的技术交易。NCIX利用广受欢迎的视频平台YouTube，在美国历史上最便宜、最成功的一次营销推广中，接触了数十万客户。别忘了在下面留下评论
.元素{
外部形状：url（images/cybermonday.png）；
形状图像阈值：0.5；
浮动：左；
利润率：10px；
}
联系我们：

有几件事

除非出于某种原因需要段落ID，否则我建议将其更改为类，以便可以重用

然后，要向段落类添加填充，可以执行以下操作：

.paragraph {
  padding: 50px;
}

要创建两个列，您需要做一些事情。我建议将每个列的内容包装在一个新的div中，使用col-50类（因为您希望每个列占容器的50%）。像这样

<main>
   <div class="col-50">
     <div class="paragraph">
       ..contents here
     </div>
   </div>
   <div class="col-50">
     <div class="paragraph">
       ..contents here
     </div>
   </div>
</main>

还有页脚

footer {
   clear: both
}

如果列没有并排显示，可以减小它们的宽度，因为填充会影响这一点（查看框大小规则）

您可以在此处看到内容的简化演示：

请注意，我还将.element的样式移到了css中