慕清海 2021-06-22 21:45 采纳率: 72.2%
浏览 33
已采纳

怎么实现左图又文字？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水星</title>
    <link href="../css文件/土星.css" rel="stylesheet"
          type="text/css">
</head>
<body>
<h1>这里是太阳系</h1>
<div id="navigation">
    <ul>
        <a href="太阳系.html"><li>首页</li></a>
        <a href="太阳.html"><li>太阳</li></a>
        <a href="水星.html"><li>水星</li></a>
        <a href="金星.html"><li>金星</li></a>
        <a href="地球.html"><li>地球</li></a>
        <a href="火星.html"><li>火星</li></a>
        <a href="木星.html"><li>木星</li></a>
        <a href="土星.html"><li>土星</li></a>
        <a href="天王星.html"><li>天王星</li></a>
        <a href="海王星.html"><li>海王星</li></a>
        <a href="联系我们.html"><li>联系我们</li></a>
    </ul>
</div>
<div id="saturn">
   <img src="../img/土星1.jpg">
   <p>土星（英文Saturn，拉丁文Saturnus）是太阳系八大行星之一，至太阳距离(由近到远)位于第六，体积仅次于木星，并与木星、天王星及海王星同属气态巨行星。古代中国土星是中国古代人根据五行学说结合肉眼观测到的土星的颜色（黄色）来命名的，亦称之为镇星（常写作填星）。

       土星主要由氢组成，还有少量的氦与微量元素，内部的核心包括岩石和冰，外围由数层金属氢和气体包裹着。土星的风速高达1800公里/时，行星磁场强度介于地球和更强的木星之间。已经确认的土星的卫星总共有82颗，其中土卫六是土星系统中最大和太阳系中第二大的卫星。土星自转一周等于10小时33分38秒，大约是地球的半天时长。</p>
</div>

<footer>
    
        联系电话115522</p>
</footer>
</body>
</html>


外链
@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background: url("星空背景.jpg") no-repeat;
    background-size: cover;
}
@font-face {
    font-family: 飘逸;
    src: url(../img/书体方米字体.ttf);
}
h1{
    text-align: center;
    font-family: "飘逸";
    font-size:60px;
    background-color: aquamarine;
    color: #cb3bff
}
#navigation{
    width: 100%;
    height: 30px;
    /*border: 1px solid black;*/
    background-color: rgb( 102 102 153);
}
#navigation ul li{
    display: inline-block;
    line-height: 30px;
    margin-right:60px;
    padding-left: 35px;
    color: white;
}
footer{
    width: 100%;
    height: 60px;
    background-color:rgb( 102 102 153) ;
    position: relative;
    top: 152px;
}
footer p {
    text-align: center;
    line-height: 30px;
}
#saturn img{
    width: 500px;
    height: 344px;
}
#saturn p{
    color: white;
}
  • 写回答

4条回答 默认 最新

  • 努力小张_ 2021-06-22 23:17
    关注

    可以给图片设置左浮动float:left,右边的文字会自动挤上去. 再给父元素使用伪元素：：after清除浮动.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？