这是页面效果图
使用 Visual Studio Code 软件进行编写，由于学习前端才一个月，因此本次代码共花费两个时辰，而且感觉代码写的挺乱的，希望下次可以把条理理清再写，把框架设计出来。
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>前湖智慧养老</title> <style> .clearfix::after{ content: ""; display:block; clear: both; } .first{ width:100%; height: 50px; font-size: 22px; padding-bottom:5px ; border-bottom: 1px solid #008c8c; background: url("./15.jpg") no-repeat; background-size: 100%; height: 50px; } .one{ border-right:1px solid #008c8c; } img{ width: 45px; height: 45px; margin-right: 15px; margin-left: 10px; } .two{ padding-right: 20px; font-size: 25px; } header span a{ margin-left: 30px; text-decoration: none; color: black; } article header{ width: 100%; height: 60px; } article header h1{ text-align: center; font-size: 42px; font-weight: 2px; color: cornflowerblue; margin-top: 5px; padding:7px 0; } .second{ background: url("./16.jpg") no-repeat; background-size:100%; } article .left{ float: left; width: 72%; padding: 25px; } article article .top a{ width: 80px; height: 60px; font-size: 35px; margin: 0 30px; margin-top: 10px; padding-top: 10px; text-decoration: none; color: #2d8d2d; } article .left .bottom .left2{ width: 200px; height: 200px; float: left; font-size: 26px; } article .left .bottom .left2 p{ margin-top: 90px; margin-top: 81px; font-size: 17px; color: #7335c5; font-weight: bold; } article .left .bottom .right2 span{ margin-left: 57px; } li{ font-size: 20px; padding-top: 30px; } article footer img{ margin-left: 40px; width:70px; height: auto; margin-bottom: 20px; } article footer a{ float: left; } article .left .bottom .right{ float: left; } article .right{ float: left; } article article .right input[type="text"],input[type="passsword"]{ margin-left: 30px; margin-bottom: 10px; width: 250px; height: 30px; } .third{ margin-top: 5px; position: relative; font-size: 16px; padding: 10px; background: url("./20.jpg") no-repeat; background-size: 100% 200px; height: 200px; } .third .on{ margin-left: 150px; } </style> </head> <body> <header class="first"> <span class="one"> <img src="./1.png" alt=""> <span class="two">前湖智慧养老</span> </span> <span> <a href="">产品与服务</a> <a href="">用户反馈中心</a> <a href="">信息库</a> <a href="">权益中心</a> <a href="">政府监管平台</a> <a href="">招商合作</a> <a href="">技术支持</a> </span> <span> <img src="./10.png" alt=""> <img src="./11.png" alt=""> <img src="./12.png" alt=""> </span> </header> <article class="second"> <header> <h1>提供最适合您的产品服务</h1> </header> <article class="clearfix"> <div class="left"> <div class="top"> <a href="" style="padding-left: 110px;">智慧健康养老平台</a> <a href="">子女平台</a> <a href="">优质服务</a> <a href="">特殊服务</a> </div> <div class="bottom"> <div class="left2"> <p>综合社区（第三方资源提供）</p> </div> <div class="right2 clearfix"> <ul> <li>将用户生活、工作、医疗等纳入社区服务范围，整合社区内购物、娱乐等资源，打造线上线下完善的网络闭环，让用户享受安全、优质、便利、顺畅的智能人性化的高品质生活。</li> <li>为用户提供在线问诊、智能分诊、即时挂号、院外候诊、检查检验报告查询、处方查询、医疗支付及电子动态病历服务，同时为用户提供超市、外卖、家政、旅游、外出等跑腿代办业务。</li> </ul> <span style="margin-left: -15px;">旅游服务</span> <span>订票服务</span> <span>医疗服务</span> <span>家政服务</span> <span>用餐服务</span> <span>用车服务</span> <span>预约服务</span> </div> </div> </div> <div class="right"> <h2 style="text-align: center;">登入</h2> <input type="text" placeholder="请输入手机号"><br> <input type="passsword" placeholder="请输入密码"><br> <input type="text" placeholder=""> 动态密码<br> <input type="checkbox" style="margin-left: 20px;">登入并同意<a href="" style="text-decoration: none;">《用户协议》</a>和<a href="" style=" text-decoration: none;">《隐私条例》</a><br> <input type="submit" value="登入" style="margin-left: 130px;"> <input type="submit" value="注册"><br> </div> </article> <footer class="clearfix"> <div> <a href=""><img src="./3.png" alt="" style="margin-left: 210px;"></a> </div> <div><a href=""><img src="./4.jpg" alt=""></a></div> <div><a href=""><img src="./5.jpg" alt=""></a></div> <div><a href=""><img src="./6.png" alt=""></a></div> <div><a href=""><img src="./7.jpg" alt=""></a> </div> <div><a href=""><img src="./8.jpg" alt="" style="height: 70px;"></a></div> <div><a href=""><img src="./9.jpg" alt="" style="height: 70px;"></a></div> </footer> </article> <footer class="third"> <a href="" class="on">关于综合社区</a> <a href="" class="on">云管端生态闭环系统</a> <a href="" class="on">前湖动态</a> <a href="" class="on">联系我们</a> <a href="" style="position: absolute; left: 179px;top: 31px;">前湖简介</a> <a href="" style="position: absolute; left: 420px;top: 31px;">智慧健康养老平台</a> <a href="" style="position: absolute; left: 709px;top: 31px;">公司新闻</a> <a href="" style="position: absolute; left: 927px;top: 31px;">求才启事</a> <a href="" style="position: absolute; left: 179px;top:53px;">开发团队</a> <a href="" style="position: absolute; left: 452px;top: 53px;">子女平台</a> <a href="" style="position: absolute; left: 708px;top: 53px;">公司活动</a> <a href="" style="position: absolute; left: 928px;top: 53px;">联系前湖</a> <a href="" style="position: absolute;left: 453px;top: 74px;">优质服务</a> <a href="" style="position: absolute; left: 707px;top: 74px;">特殊服务</a> <p style="position: absolute; left: 575px;top: 105px;">地址：江西省南昌市红谷滩新区</p> <p style="position: absolute; left: 575px;top: 125px;">电话：15170437445</p> </footer> </body> </html>