在css中排列文本时遇到问题
我对HTML5和CSS还很陌生,决定尝试创建自己的网站,让我的脚湿透。我希望制作一个更简单的版本来宣传我的Instagram页面。 我在排列盒子时遇到了麻烦,比如把媒体、追随者和跟随者以及数字放在盒子里。 如何获取媒体、关注者和关注者以及每个框中的数字。 我似乎也不能把文字排在我想要的地方。我被告知不要将文本放在CSS中,那么如何将其全部放在CSS中 我已经附上了我的代码,请让我知道它目前的样子在css中排列文本时遇到问题,css,html,Css,Html,我对HTML5和CSS还很陌生,决定尝试创建自己的网站,让我的脚湿透。我希望制作一个更简单的版本来宣传我的Instagram页面。 我在排列盒子时遇到了麻烦,比如把媒体、追随者和跟随者以及数字放在盒子里。 如何获取媒体、关注者和关注者以及每个框中的数字。 我似乎也不能把文字排在我想要的地方。我被告知不要将文本放在CSS中,那么如何将其全部放在CSS中 我已经附上了我的代码,请让我知道它目前的样子 /*基本样式------------------*/ * { 框大小:边框框; } 身体{ 颜色
/*基本样式------------------*/
* {
框大小:边框框;
}
身体{
颜色:#878787;
保证金:0;
字体:1em/1.5“Helvetica Neue”,Helvetica,Arial,无衬线;
}
h1{
字体大小:5.625rem;/*90px/16px*/
字体系列:衬线;
颜色:rgba(255,255,255,1);
文本转换:大写;
字体大小:粗体;
线高:1.3;
}
img{
最大宽度:100%
边缘底部:20px;
}
/*伪类------------------*/
a:链接{
颜色:rgb(255、169、73);
文字装饰:无;
}
a:参观了{
颜色:浅蓝色;
}
a:悬停{
颜色:rgba(255,169,73,4);
}
a:主动的{
颜色:浅珊瑚;
}
.弹性项目{
颜色:黑色;
字体大小:14px;
字体大小:粗体;
}
/*主要风格------------------*/
.主标题{
背景颜色:蓝色;
填充顶部:20px;
高度:300px;
框大小:边框框;
}
.头衔{
颜色:白色;
字体大小:1.625rem;/*26px/16px*/
}
.介绍{
字体大小:1.25em;/*20px/16px*/
线高:1.6;
}
.主要内容,
.主标题,
.主页脚{
文本对齐:居中;
}
.主要内容{
填充顶部:25px;
填充底部:95px;
}
.次要内容{
填充顶部:80px;
垫底:70px;
边框底部:2个实心#dfe2e6;
}
.标注{
字号:1.25em;
边框底部:3倍实心;
填充:0 9px 3px;
边缘顶部:20px;
显示:内联块;
}
.主页脚{
填充顶部:60px;
填充底部:60px;
边框底部:10px实心#ffa949;
}
.t-border{
边框顶部:2个实心#dfe2e6;
}
/*布局样式----------------*/
.主要内容,
.次要内容{
宽度:10%;
盒子尺寸:边框-;
左侧填充:10px;
右边填充:50px;
边缘:左侧;
最大宽度:50px;
}
.盒子{
背景:url(igbodybuildingworld2.jpg);
背景尺寸:150px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:300px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:1px纯黑;
高度:400px;
}
.box2{
背景:url(absmotivation1012.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box3{
背景:url(InstafitnessLifestyle 1012.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box4{
背景:url(absinspiration1012.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box5{
背景:url(gymcomedy012.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box6{
背景:url(instafitnesstransformations2.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box7{
背景:url(motivation2squat2.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box8{
背景:网址(fitness_lifestyle202.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px;
背景色:白色;
宽度:280px;
左边距:10px;
右边距:10px;
边缘顶部:30px;
填充物:5px;
边框:2件纯黑;
高度:400px
}
.box9{
背景:url(gymlife222.jpg);
背景尺寸:250px;
背景重复:无重复;
背景位置:上中;
浮动:左;
颜色:黑色;
字体大小:粗体;
字号:18px;
文本对齐:居中;
线高:500px
<html><head>
<style>
/* Base Styles -------------------- */
* {
box-sizing: border-box;
}
body {
color: #878787;
margin: 0;
font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1 {
font-size: 5.625rem; /* 90px/16px */
font-family: serif;
color: rgba(255, 255, 255, 1);
text-transform: uppercase;
font-weight: bold;
line-height: 1.3;
}
img {
max-width: 100%
margin-bottom: 20px;
}
/* Pseudo-classes ------------------ */
a:link {
color: rgb(255, 169, 73);
text-decoration: none;
}
a:visited {
color: lightblue;
}
a:hover {
color: rgba(255, 169, 73, .4);
}
a:active {
color: lightcoral;
}
.flex-item {
color: black;
font-size: 14px;
font-weight: bold;
float: left;
width: 33.3%;
text-align: center;
}
.flex-container {
width: 100%;
display: table;
}
/* Main Styles --------------------- */
.main-header {
background-color: blue;
padding-top: 20px;
height: 300px;
box-sizing: border-box;
}
.title {
color: white;
font-size: 1.625rem; /* 26px/16px */
}
.intro {
font-size: 1.25em; /* 20px/16px */
line-height: 1.6;
}
.primary-content,
.main-header,
.main-footer {
text-align: center;
}
.primary-content {
padding-top: 25px;
padding-bottom: 95px;
}
.secondary-content {
padding-top: 80px;
padding-bottom: 70px;
border-bottom: 2px solid #dfe2e6;
}
.callout {
font-size: 1.25em;
border-bottom: 3px solid;
padding: 0 9px 3px;
margin-top: 20px;
display: inline-block;
}
.main-footer {
padding-top: 60px;
padding-bottom: 60px;
border-bottom: 10px solid #ffa949;
}
.t-border {
border-top: 2px solid #dfe2e6;
}
/* Layout Styles ------------------ */
.primary-content,
.secondary-content {
width:10%;
box-sizing: border-;
padding-left: 10px;
padding-right: 50px;
margin: left-side;
max-width: 50px;
}
.box {
background: url(igbodybuildingworld2.jpg);
background-size: 150px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 300px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 1px solid black;
height: 400px;
}
.box2 {
background: url(absmotivation1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box3 {
background: url(instafitnesslifestyle1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box4 {
background: url(absinspiration1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box5 {
background: url(gymcomedy1012.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box6 {
background: url(instafitnesstransformations2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box7 {
background: url(motivation2squat2.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box8 {
background: url(fitness_lifestyle202.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
}
.box9 {
background: url(gymlife222.jpg);
background-size: 250px;
background-repeat: no-repeat;
background-position: top center;
float: left;
color: black;
font-weight: bold;
font-size: 18px;
text-align: center;
line-height: 500px;
background-color: white;
width: 280px;
margin-left: 10px;
margin-right: 10px;
margin-top: 30px;
padding: 5px;
border: 2px solid black;
height: 400px
.ad-left {
float: left;
}
</style>
</head>
<body>
<title>Instagram Shoutouts</title>
<link rel="stylesheet" href="Instagrampage.css">
<header id="top" class="main-header">
<h1>Instagram Shoutouts</h1>
<span class="title">Increase followers with instagram shoutouts</span>
</header>
<p>igbodybuildingworld
<br>
MEDIA FOLLOWERS FOLLOWING
<br>
101 32K 321
<br>
Select Options</p>
<div class="box"></div>
<div class="box2">absmotivation101</div>
<div class="box3">instafitnesslifestyle101</div>
<div class="box4">absinspiration101</div>
<div class="box5">gymcomedy101</div>
<div class="box6">instafitnesstransformations</div>
<div class="box7">motivation2squat</div>
<div class="box8">fitness_lifestyle20</div>
<div class="box9">gymlife22</div>
<div class="flex-container">
<div class="flex-item"><p>12K</p><p>MEDIA</p></div>
<div class="flex-item"><p>12K</p><p>FOLLOWERS</p></div>
<div class="flex-item"><p>24K</p><p>FOLLOWING</p></div>
</div>
<script type="text/javascript">
</script>
</body></html>