Fatal编程技术网
  • html/
  • Html CSS：文本的定位

Html CSS：文本的定位

html css

Html CSS：文本的定位,html,css,Html,Css,我是CSS编程的初学者，对文本定位有疑问。我必须在CSS中设计下载按钮，其中没有符号字体或图像。我已经这样做了，但文本不想放在框内（图1） 这是我的CSS代码： #download{ background-color: rgb(0, 230, 0); border-top-left-radius: 100px; border-top-right-radius: 100px; border-bottom-left-radius: 100px; border-bottom-ri

我是CSS编程的初学者，对文本定位有疑问。我必须在CSS中设计下载按钮，其中没有符号字体或图像。我已经这样做了，但文本不想放在框内（图1）

这是我的CSS代码：

#download{
  background-color: rgb(0, 230, 0);
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  width: 235px;
  height: 65px;
}

#download p{
  font-family: 'Roboto Slab', serif;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  font-size: 30px;
  color:white;
  padding-left: 50px;
  padding-bottom: 300px;
}

#ikonad{
  border-radius: 150px;
  border-color: rgb(0, 179, 0);
  border-width: 3px;
  border-style: solid;
  background-color: rgb(242, 242, 242);
  height: 58px;
  width: 58px;
  padding-left: 1px;
  padding-top: 1px;
}
.kvadrat{
  width: 15px;
    height: 20px;
    background: rgb(0, 179, 0);
  margin-left: 20px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  padding-top: 8px;
}
#trikotnik {
  padding-top: 10px;
  margin-left: 12.5px;
  width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid rgb(0, 179, 0);
}
这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Gumbi</title>
</head>
<body>
<div id="download">
<div id="ikonad">
<div class="kvadrat"><p>Download</p></div>
<div id="trikotnik"></div></div>

</div>


甘比
下载
如果有人告诉我我做错了什么，我会很高兴的。非常感谢！：）

只需从
元素中删除边距即可：


#download p {
  margin: 0;
}


（附带问题：
填充底部：300px
在那里做什么？真的有必要吗？）

以下是添加了CSS规则的标记：



#下载{
背景色：rgb（0,230,0）；
边框左上半径：100px；
边框右上角半径：100px；
边框左下半径：100px；
边框右下半径：100px；
宽度：235px；
高度：65px；
}
#下载{
字体系列：“Roboto Slab”，衬线；
文本阴影：1像素1像素2像素黑色，0像素25像素蓝色，0像素5像素深蓝色；
字体大小：30px；
颜色：白色；
保证金：0；
左侧填充：50px；
垫底：300px；
}
#伊科纳德{
边界半径：150px；
边框颜色：rgb（0,179,0）；
边框宽度：3倍；
边框样式：实心；
背景色：rgb（242、242、242）；
高度：58px；
宽度：58px；
左侧填充：1px；
垫面：1px；
}
克瓦达拉特先生{
宽度：15px；
高度：20px；
背景：rgb（0179,0）；
左边距：20px；
边框右上角半径：4px；
边框左上半径：4px；
填充顶部：8px；
}
#特里科特尼克{
填充顶部：10px；
左边距：12.5px；
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：20px实心rgb（0179,0）；
}



下载


成功了！！非常感谢。真不敢相信D我用那个代码尝试了很多东西，所以我也决定尝试填充底部。谢谢你，兄弟；你救了我的命！