HTML作业之粉粉滴个人博客来袭—篇章二

其他 2021-11-21 02:48:24 阅读次数: 0

来啦来啦，继续继续，如果还没有看过篇章一的，传送门在这里：快乐星球

在这里插入图片描述

文章目录

主要内容部分(左)

关于这部分呢我主要是分了左边和右边两个内容：
在这里插入图片描述
我们先来看左边
在这里插入图片描述
可以知道是分为3个部分，同样的道理，先建层
html部分

  <!-- content begin -->
  <div id="content">
      <div id="left">
          <div class="zb"> 1</div>
          <div class="zb"> 2 </div>
          <div class="zb"> 3</div>
      </div>
  </div>
  <!-- content end -->

css部分

        #content{
    
    
            /* 设置一下宽和高，方便后续 */
            width: 864px;
            height: 850px;
            background: url("./images/body.gif") center;    
        }
        #left{
    
    
            /* 左边的区域大小 */
            width: 200px;
            height: 850px;
            float: left;
            padding: 0 0 0 50px;
            /* 整体距离左移一些 */
        }
        .zb{
    
    
            /*  */
            border: 1px solid #f46490;
            margin-bottom: 7px;
            margin-top: 7px;
        }

在这里插入图片描述
然后把这三个部分的文字、图片补上，在此之前，我们再来设置一个类叫做lt，这个类的文字居中、图片也居中

        .lt{
    
    
            text-align: center;         
        }
        .lt img{
    
    
            display:block;
            position:relative;
            margin:auto;
        }

全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <style type="text/css">
        body{
      
      
            font-size: 12px;
            color: #f46490;
            /* 字体默认的大小和颜色 */
            background: url("./images/background.jpg") repeat;
            padding: 0;  
            /* 四条边距均为0px */
        }
        #parent {
      
      
            /* 动态效果图 */
            width: 100%; 
            height:100%;          
            background:url("./images/fl.gif") no-repeat;         
            background-size: cover;
            background-attachment: fixed;
        }
        #container {
      
      
            /* 最外层容器大小 */
            width: 867px; 
            height: auto;  
            /* 注意一下 */
            margin: 0 auto;
        }
        #header{
      
      
            width: 867px;
            height: 408px;
        }
        #nav{
      
      
            width: 867px;  /*和容器一样的宽度噢*/
            height: 30px;
            position: relative;
            background: url("./images/nav.gif") no-repeat;
            margin: 0 auto;
        }
        #nav ul{
      
      
            height: 30px;
            list-style-type: none;
            /* 去掉前面的●圆圈 */
            /* float: left; */
            margin: 0 auto;
            padding: 0 0 0 80px;
            /* 这个就是设置这整体的导航栏的左移的距离！ */
        }
        #nav ul li{
      
      
            width: 65px;
            height: 30px;
            /* 别忘记这个高度，是一直不变的！不然会导致对不齐 */
            float: left;
            /* 浮动让它呈现横向导航栏 */
            padding: 0 20px;
            /* 设置每个内容之间的边距 */
        }
        #nav ul li a {
      
      
            color: #f46490;
            font-weight: bold;           
            font-size: 12px;
            line-height: 30px;  
               /* 别忘记了！ */
            text-decoration: none;
            /* 去掉超链接的下划线 */
            display: inline-block;
        }
        a:hover{
      
      
            color: #666;
            /* 设置点击之后字体变色 */
        }
        #content{
      
      
            /* 设置一下宽和高，方便后续 */
            width: 864px;
            height: 850px;
            background: url("./images/body.gif") center;    
        }
        #left{
      
      
            /* 左边的区域大小 */
            width: 200px;
            height: 850px;
            float: left;
            padding: 0 0 0 50px;
            /* 整体距离左移一些 */
        }
        .zb{
      
      
            /* 设置边框和边距 */
            border: 1px solid #f46490;
            margin-bottom: 7px;
            margin-top: 7px;
        }
        .lt{
      
      
            text-align: center;         
        }
        .lt img{
      
      
            display:block;
            position:relative;
            margin:auto;
        }


    
    </style>
    </head>
    <body>
        <div id="parent">
            <div id="container">
                <!-- header begin -->
                <div id="header">
                    <img src="./images/top.gif" alt="">
                </div>
                <!-- header end -->

                <!-- nav begin -->
                <div id="nav">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">相册</a></li>
                        <li><a href="#">个人</a></li>
                        <li><a href="#">档案</a></li>
                        <li><a href="#">好友</a></li>
                        <li><a href="#">留言板</a></li>
                        <li><a href="#">我的音乐</a></li>
                        </ul>
                </div>
                <!-- nav end -->

                <!-- content begin -->
                <div id="content">
                    <div id="left">
                        <div class="zb">
                            <div class="lt"><img src="./images/grzl.jpg" alt=""/></div>
                            <div class="lt"><img src="./images/head.jpg" alt=""/></div>
                            <div class="lt">掌柜</div>
                            <div class="lt">女&nbsp;上海</div>
                            <div class="lt"><img src="./images/jwhy.jpg" alt=""/></div>
                            <div class="lt">----------------------------------------------------</div>
                            <div class="lt">已有200人加她为好友</div>
                            <div class="lt"><img src="./images/tt.jpg"></div>            
                        </div>

                        <div class="zb">
                            <div class="lt"><img src="./images/fl.jpg" alt=""/></div>
                            <div class="lt">
                                <ul>
                                    <li>博文</li>
                                    <li>散文</li>
                                    <li>杂文</li>          
                                </ul>
                            </div>
                        </div>
                        <div class="zb">
                            <div class="lt"><img src="./images/yqlj.jpg"></div>
                            <div class="lt">欢迎大家来我的博客！</div>
                            </div>
                    </div>
                </div>
                <!-- content end -->

                <!-- footer begin -->
                <div id="footer"></div>
                <!-- footer end -->
            </div>
        </div>
    </body>
</html>

效果

在这里插入图片描述
在这里插入图片描述

主要内容部分(右)

右边的话，就比较直接一点，比较烦的就是：如何实现图片和文字在同一行的问题，还有就是文本首行换行的问题

在这里插入图片描述
不想再解释啦，我写代码的习惯和套路大家应该都熟悉啦，就直接上代码了噢

 <div id="rigth">
     <div id="yb1"><img src="./images/bw.jpg" alt=""/></div>
     <div id="yb2">
         <div class="divs">
             <div class="imgs"><img src="./images/ico.gif" alt="" /></div>
             <h1>春天的到来</h1>
         </div>
         <div id="yb3">
                 <p>流光溢彩的烟花，</p>
                 <p>清脆响亮的鞭炮，</p>
                 <p>昭示着又一个春节的到来。</p>
                 <p>早春的风雪激荡起开心的欢笑，</p>
                 <p>大红灯笼映现出点点暖意，</p>
                 <p>空气中迷漫着温馨而热烈的气息。</p>
                 <p>请财神、选对联、买鞭炮、购年货……</p>
                 <p>行色匆匆中，</p>
                 <p>人们感受到了日子的芳香与忙碌，</p>
                 <p>时间也在这盛大的节日里散发出沉淀已久的醇香。</p>
                 <p>餐桌沉沉，</p>
                 <p>谱写着深深的期盼与祝福。</p>
                 <p>亲人们相互依靠，</p>
                 <p>互赠快乐，</p>
                 <p>静静体味着家的温馨，</p>
                 <p>灵魂的皱纹在这最深最沉的时刻得以温柔的伸展。</p>
                 <p>幸福的感觉就这样点点滴滴地渗透到了人们的心里。</p>
             <div class="lt">
                 阅读（56） | 评论（34） | 收藏（12）
             </div>
             <hr width="500px" color="#f46490">
        </div>
     </div>
 </div>

好啦，后面的就不想再做解析啦，因为比较简单，那就直接放全部代码了

扫描二维码关注公众号，回复： 13266595 查看本文章

全部代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Blog</title>
    <style type="text/css">
        body{
      
      
            font-size: 12px;
            color: #f46490;
            /* 字体默认的大小和颜色 */
            background: url("./images/background.jpg") repeat;
            padding: 0;  
            /* 四条边距均为0px */
        }
        #parent {
      
      
            /* 动态效果图 */
            width: 100%; 
            height:100%;          
            background:url("./images/fl.gif") no-repeat;         
            background-size: cover;
            background-attachment: fixed;
        }
        #container {
      
      
            /* 最外层容器大小 */
            width: 867px; 
            height: auto;  
            /* 注意一下 */
            margin: 0 auto;
        }
        #header{
      
      
            width: 867px;
            height: 408px;
        }
        #nav{
      
      
            width: 867px;  /*和容器一样的宽度噢*/
            height: 30px;
            position: relative;
            background: url("./images/nav.gif") no-repeat;
            margin: 0 auto;
        }
        #nav ul{
      
      
            height: 30px;
            list-style-type: none;
            /* 去掉前面的●圆圈 */
            /* float: left; */
            margin: 0 auto;
            padding: 0 0 0 80px;
            /* 这个就是设置这整体的导航栏的左移的距离！ */
        }
        #nav ul li{
      
      
            width: 65px;
            height: 30px;
            /* 别忘记这个高度，是一直不变的！不然会导致对不齐 */
            float: left;
            /* 浮动让它呈现横向导航栏 */
            padding: 0 20px;
            /* 设置每个内容之间的边距 */
        }
        #nav ul li a {
      
      
            color: #f46490;
            font-weight: bold;           
            font-size: 12px;
            line-height: 30px;  
               /* 别忘记了！ */
            text-decoration: none;
            /* 去掉超链接的下划线 */
            display: inline-block;
        }
        a:hover{
      
      
            color: #666;
            /* 设置点击之后字体变色 */
        }
        #content{
      
      
            /* 设置一下宽和高，方便后续 */
            width: 864px;
            height: 850px;
            background: url("./images/body.gif") center;    
        }
        #left{
      
      
            /* 左边的区域大小 */
            width: 200px;
            height: 850px;
            float: left;
            padding: 0 0 0 50px;
            /* 整体距离左移一些 */
        }
        .zb{
      
      
            /* 设置边框和边距 */
            border: 1px solid #f46490;
            margin-bottom: 7px;
            margin-top: 7px;
        }
        .lt{
      
      
            text-align: center;         
        }
        .lt img{
      
      
            display:block;
            position:relative;
            margin:auto;
        }
        #right{
      
      
            width: 550px;
            float: right;
            padding: 0 35px 0 0;
        }
        .zb{
      
      
            padding: 5 0 0 0;
            border: 1px solid #f46490;
            margin-bottom: 7px;
            margin-top: 7px;
        }
        #yb1 img{
      
      
            padding: 0 0 0 10px;
        }
        #yb2{
      
      
            
            line-height: 25px;
        }
        .divs,.imgs{
      
      
            display: inline-block;
            vertical-align: middle;
            padding: 0 0 0 20px;
            margin-right: 10px;
        }
        .divs,h1{
      
      
            display: inline-block;
        }

        #yb3{
      
      
            line-height: 20px;
            color: #f46490;           
        }
        p{
      
           
            text-indent: 10em;
        }
        #footer{
      
      
            background: url("./images/body.gif");
            height: 70px;
            width: 870px;
            margin: 0 auto;
            text-align: center;
        }



    
    </style>
    </head>
    <body>
        <div id="parent">
            <div id="container">
                <!-- header begin -->
                <div id="header">
                    <img src="./images/top.gif" alt="">
                </div>
                <!-- header end -->

                <!-- nav begin -->
                <div id="nav">
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">相册</a></li>
                        <li><a href="#">个人</a></li>
                        <li><a href="#">档案</a></li>
                        <li><a href="#">好友</a></li>
                        <li><a href="#">留言板</a></li>
                        <li><a href="#">我的音乐</a></li>
                        </ul>
                </div>
                <!-- nav end -->

                <!-- content begin -->
                <div id="content">
                    <div id="left">
                        <div class="zb">
                            <div class="lt"><img src="./images/grzl.jpg" alt=""/></div>
                            <div class="lt"><img src="./images/head.jpg" alt=""/></div>
                            <div class="lt">掌柜</div>
                            <div class="lt">女&nbsp;上海</div>
                            <div class="lt"><img src="./images/jwhy.jpg" alt=""/></div>
                            <div class="lt">----------------------------------------------------</div>
                            <div class="lt">已有200人加她为好友</div>
                            <div class="lt"><img src="./images/tt.jpg"></div>            
                        </div>

                        <div class="zb">
                            <div class="lt"><img src="./images/fl.jpg" alt=""/></div>
                            <div class="lt">
                                <ul>
                                    <li>博文</li>
                                    <li>散文</li>
                                    <li>杂文</li>          
                                </ul>
                            </div>
                        </div>
                        <div class="zb">
                            <div class="lt"><img src="./images/yqlj.jpg"></div>
                            <div class="lt">欢迎大家来我的博客！</div>
                            </div>
                    </div>

                    <div id="rigth">
                        <div id="yb1"><img src="./images/bw.jpg" alt=""/></div>
                        <div id="yb2">
                            <div class="divs">
                                <div class="imgs"><img src="./images/ico.gif" alt="" /></div>
                                <h1>春天的到来</h1>
                            </div>
                            <div id="yb3">
                                    <p>流光溢彩的烟花，</p>
                                    <p>清脆响亮的鞭炮，</p>
                                    <p>昭示着又一个春节的到来。</p>
                                    <p>早春的风雪激荡起开心的欢笑，</p>
                                    <p>大红灯笼映现出点点暖意，</p>
                                    <p>空气中迷漫着温馨而热烈的气息。</p>
                                    <p>请财神、选对联、买鞭炮、购年货……</p>
                                    <p>行色匆匆中，</p>
                                    <p>人们感受到了日子的芳香与忙碌，</p>
                                    <p>时间也在这盛大的节日里散发出沉淀已久的醇香。</p>
                                    <p>餐桌沉沉，</p>
                                    <p>谱写着深深的期盼与祝福。</p>
                                    <p>亲人们相互依靠，</p>
                                    <p>互赠快乐，</p>
                                    <p>静静体味着家的温馨，</p>
                                    <p>灵魂的皱纹在这最深最沉的时刻得以温柔的伸展。</p>
                                    <p>幸福的感觉就这样点点滴滴地渗透到了人们的心里。</p>
                                <div class="lt">
                                    阅读（56） | 评论（34） | 收藏（12）
                                </div>
                                <hr width="500px" color="#f46490">
                           </div>
                        </div>
                    </div>
                </div>
                <!-- content end -->

                <!-- footer begin -->
                <div id="footer">
                    亲情链接 | 联系方式 |留言簿 |联系我们  pyright All Right Recovert
                </div>
                <!-- footer end -->
            </div>
        </div>
    </body>
</html>

效果：
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Xmumu_/article/details/121042037
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022