第二次的作业

最新推荐文章于 2026-06-21 14:42:46 发布

原创最新推荐文章于 2026-06-21 14:42:46 发布 · 72 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

文章描述了在HTML和CSS编码过程中遇到的几个问题：1)底部元素的背景颜色缺失；2)图片未能正确跟随文字；3)尝试将图标置于特定位置失败；4)内容区域的图像和文本对齐问题；5)保持文本左对齐的同时使包含文本的div居中。这些问题涉及到网页布局、颜色渐变效果实现以及图像和文本的排版调整。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
        <div class="box">
            <div class="top">
                <h1>笔记本使用手册</h1>
                <p>让使用更畅快</p>
                
            </div>
            <div class="bottom">
                <ul>
                    <li>
                         <a href="jihuozhinan.html"><h1 >01</h1>
                <h2>激活指南</h2>
                <h3>包含软件的激活方法及疑难解答如Office, wPS,Windows</h3></a>
                    </li>
                        <li>
                         <a href=""><h1>02</h1>
                <h2>快速上手</h2>
                <h3>可帮助您快速使用并了解您的笔记本电脑</h3></a>
                    </li>
                    <li>
                             <a href=""><h1>03</h1>
                    <h2>玩机指南</h2>
                    <h3>从入门到精递，想知道的应有尽有包含硬件分区，故障排查，玩机技巧等</h3></a>
                        </li>
                </ul>
            </div>
            <div class="foot">
                <p>需联网后点击以上模块查看内容或使用手机扫描右侧二维码访问</p>
                <img src="img/erweima.png" alt="二维码">
                </div>
        
    
    </body>
</html>

*{
    margin: 0;
    padding: 0;
}
.box{
    width:100%;
    height: 100vh;
    background-color: #1977D1;
}
.top {width:100%;
height:40%;
background-color: #1977d1;
text-align: center;
}
.top h1{ color: #fff;
margin: 20px 0;
letter-spacing: 3px;
}
.top p{color:#fff;
letter-spacing: 2px;
}
.bottom{width:100%;
height: 40%;
background-color:  #1977d1;
}
.bottom ul{display: flex;
justify-content: space-between;
width: 90%;
margin: auto;
}
.bottom ul li{
    list-style:none; 
    width:15%;
    
    background-color: #4B7FB8 ;
    
}
.bottom ul li a{
    text-decoration: none;
    
    width:100%;
    flex-wrap: wrap;
    color: #fff;
}
.bottom h1{text-align: center;
font-size: 50px;
}
.bottom h2{text-align: center;
font-size: 15px;
margin: 20px;
}
.bottom h3{text-align:center;
font-size:1px;
}
.foot {float: right;
color: #fff;
width:350px;
display: flex;
justify-content: center;
align-items: center;
}

1,这边这个渐变色的代码打不对，按搜的试了数遍始终不成功，出现的情况为最下面文字下面的灰色消失。

2图片跟在文字正后方：

.foot {float: right;

color: #fff;

width:350px;

display: flex;

justify-content: center;

align-items: center;

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{width: 100%;
            height: 100%;
            }
            .top{width: 100%;
            height:30%;
            
            
            }
            .top h1{font-size: 20px;
            }
            .top p{text-align: center;
            margin: 1px 0;
            
            }
            .top h2{letter-spacing: 50px;
            font-size: 40px;
            text-align:center;
            
            
            }
            .top img{width:120px;
            height:100px;
            }
            .top a{text-decoration: none;
            }
            .bottom h3{text-align:center;
            font-size: 50px;}
            .bottom h3 img {

        vertical-align: middle;

    }
    .foot h4{text-align:center;
    font-size: 50px;
    
    ;}.foot {
        text-align: center;
    }
    
        </style>
        
    </head>
    <body>
        <div class="box">
            <div class="top">
                <h1>[笔记本使用手册] 激活指南</h1>
                <hr/> 
            <p>使用手册中包含Windows设置的跳转链接，如果您使用WPS Office查看此页面会无法正常跳转;</p><br/>
            <p>建议您<a href="">点击这里</a>，了解如何切换到Microsoft Edge进行查看。</p><br/>
            <p>部分机型预装WPS Ofice并赠送会员服务，具体情况以官网产品页面及系统内状态为准.</p>
            <!DOCTYPE html>
            <h2>激活指南 <img src="img/mi.png" alt="小米"></h2>
        </div>
        
        <div class="bottom">
            <h3>01<img src="img/diannao.png" alt="电脑"></h3>
            <div class="foot">
                <h4>Windows激活指南</h4>
                <hr/>
                <img src="img/jieshouxuke.png" alt="接受许可">
            </div>
            
        </div>
    
        </div>
    </body>
</html>

3，小米的图标我想放在指定的位置，一直放不来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{width: 100%;
            height: 100%;
            }
            .top{width: 100%;
            height:30%;
            
            
            }
            .top h1{font-size: 20px;
            }
            .top p a{text-decoration: none;
            }
            .bottom{width: 100%;
            height:10%;}
            .bottom h2{
                color: #E77125;
                font-size: 45px;
                text-align: center;
            }
            .bottom h3{
                text-align: center;
                color: #E77125;
                
            }
            .bottom  {text-align:center;
            }
            .bottom p {align: left;}
            
            .bottom img{ vertical-align: middle;
            
            }

        </style>
    </head>
    <body>
        <div class="box">
            <div class="top">
                <h1>[笔记本使用手册]快速上手</h1>
                <hr/>
                <p>若您在使用WPS浏览器查看我们为您准备的笔记本使用手册，建议您切换到Microsof Edoe进行查看，使用手册中包含Windows设置的跳转链接
若使用WPS浏览器会让这些跳转失效，<a href="">点击这里</a>查看方法。</p>
            </div>
            <div class="bottom">
                <h2>常用操作</h2>
                <h3>——————————————————————————————</h3>
                <div class="write">
                    <p><img src="img/001.png" alt="001">如何链接无线网络</p>
    <p><img src="img/002.png" alt="002">如何卸载不需要的软件</p>
    <p><img src="img/003.png" alt="003">笔记本触控板使用技巧</p>
<p><img src="img/004.png" alt="004">如何修改字号及图标大小</p>
    <p><img src="img/005.png" alt="005">如何设置主题与壁纸</p>
    <p><img src="img/006.png" alt="006">如何切换笔记本性能模式</p>
    <p><img src="img/007.png" alt="007">如何设置锁屏密码及指纹</p>
    <p><img src="img/008.png" alt="008">Windows安全模式介绍</p>
<p><img src="img/009.png" alt="009">Windows更新</p>
    <p><img src="img/010.png" alt="010">Windows账号</p>
    <p><img src="img/011.png" alt="011">笔记本桌面图标介绍</p>
    <p><img src="img/012.png" alt="012">更多基本操作介绍</p>
</div>
        </div>
        
    </body>
</html>

这边出现的问题就是这图标对不齐，我想的是含文字的div 给他居中，然后里面的文字全部靠左对齐，实现不来。给bottom设个宽度么又全部靠左边去了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{width: 100%;
            height: 100%;
            }
            .top{width: 100%;
            height:30%;
            
            
            }
            .top h1{font-size: 20px;
            }
            .top p a{text-decoration: none;
            }
            .bottom h2{
                color: #E77125;
                font-size: 45px;
                text-align: center;
            }
            .bottom h3{
                text-align: center;
                color: #E77125;
                }
                .bottom h4{
                    color: #E77125;
                    font-size: 45px;
                    text-align: center;
                }
                .bottom content{text-align: center;
                }
                .bottom p{font-size: 25px;
                text-align: left;
                }
                    
        </style>
    </head>
    <body>
        <div class="box">
            <div class="top">
                <h1>[笔记本使用手册]玩机指南</h1>
                <hr/>
                <p>若您在使用WPS浏览器查看我们为您准备的笔记本使用手册，建议您切换到Microsot Edge进行查看，使用手册中包含Windows设置的跳转链接
若使用WPS浏览器会让这些跳转失效，<a href="">点击这里</a>查看方法。</p>

            </div>
            <div class="bottom">
                <h2>常见问题</h2>
                <h3>——————————————————————————————</h3>
                <div class="content">
                <p>已经链接了适配器未显示充电</p>
                <p>为什么按WIN+E键，看到的是快速访问</p>
                <p>笔记本发热严重怎么办</p>
                <p>笔记本键盘异常怎么办</p>    
                <p>笔记本卡顿怎么办</p>
                <p>笔记本蓝屏怎么办</p>
                <p>笔记本噪音太大</p>
                
                <h4>进阶技巧</h4>
                <h3>——————————————————————————————</h3>
                <p>如何清理电脑垃圾文件与缓存</p>
                <p>如何让游戏和应用使用特定的显卡</p>
            
        </div>
    </body>
</html>