<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>QQ登錄</title>
<style type="text/css">
body{
height: 600px;
width: 800px;
background: lightgoldenrodyellow;
margin: 0px;
}
div{
}
#header{
width: 100%;
height: 80px;
background: black;
}
#pageBody{
height: 300px;
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
background-color: white;
padding: 5px;
}
.img1{
background-size:contain |cover;
width: auto;
height: 100%;
}
.img2{
width: 200px;
height: auto;
align-content: center;
}
.textstyle1{
margin-top: 1px;
color: greenyellow;
text-align:center;
padding: 10px;
}
.textstyle2{
padding: 10px;
margin-top: 1px;
font-family: 華文新魏;
color: white;
text-align:end;
}
</style>
</head>
<body>
<div id="header">
<img class="img1" src="https://img.uj5u.com/2020/09/26/138564260410401.jpg"/>
<span class="textstyle1">QQ登錄</span>
<span class="textstyle2">專為電腦設計的社交溝通網站</span>
</div>
<div id="pageBody">
<img class="img2" src="https://img.uj5u.com/2020/09/26/138564260410402.jpg"/>
</div>
</body>
</html>
效果圖是這樣？
uj5u.com熱心網友回復：
<span></span>是行內元素，對于行內元素來說margin只有margin-left和margin-right有效，padding只有padding-left和padding-right有效。在"textstyle2"這個類里面加上一個 display: inline-block;，就可以設定文字的位置了。
uj5u.com熱心網友回復：
正解
uj5u.com熱心網友回復：
嗯，問題已經解決，謝謝大佬
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/129827.html
標籤：HTML(CSS)
上一篇：vue ui
下一篇：絕對定位與浮動的區別