网页设计与制作教程效果如何？真实用户经验分享！

发布日期：2025-09-24 19:41浏览次数：

行，今儿个跟大伙儿唠唠我做这个破网页的经过。这事儿，说难不难，说简单也忒折腾人，反正咱就是个半吊子水平，瞎琢磨呗。

开头就是两眼一抹黑

先得把摊子支起来。我直接开了那浏览器，噼里啪新建了个空文件，文件名就叫“*”，老规矩了嘛干坐着也没用，我就硬着头皮往里敲。记着就记着最基础那几样玩意儿：什么、、，跟搭积木似的，先垒个架子出来。完事儿在那旮旯写上“我的第一个破网页”，算是起了个名儿。</p> <h2>正文部分开搞</h2> <p>光有个名儿哪行，得往里塞东西。我在那块儿使劲琢磨： <ul> <li>先怼了个 <strong><h1>一级大标题</strong></h1> 上去，够显眼！</li> <li>觉得光秃秃不行，下边跟了句自我介绍，就用普通的 <p>标签</p> 裹着。</li> <li>琢磨着加点料？整了个 <ul> 无序列表，瞎编了几条“爱好”：睡觉、吃饭、发呆。</li> <li>总得来张图撑撑场面？我硬盘里翻了半天，找了张去年旅游拍的糊图，用 <img> 塞进去了。结果？<strong>图片大得跟脸盆似的</strong>，把旁边文字全挤没了！</li> </ul> </p> <p>哎呀我这暴脾气，看着乱糟糟的页面就上火。心想，不成，得给它“穿件衣服”——CSS来了。在脑袋里，也就是<head>里面，加了个<style>标签，撸起袖子开始调： <ul> <li>先把那大脸盆图片收拾了：img { max-width: 100%; height: auto; } ，总算规矩了。</li> <li>大标题 h1 是主角，得突出：color: darkblue; text-align: center; </li> <li>正文 p 看着太密实？整个 line-height: 1.6; 松快点儿。</li> <li>背景惨白惨白的晃眼睛，body { background-color: #f4f4f4; } 刷层淡灰。</li> </ul> <p>调来调去，页面总算能看了，像那么回事儿了。</p></p> <h2>收尾跟意外</h2> <p>东西都塞进去了，衣服也穿上了，得让它能在不同地方都看得顺眼——这叫响应式。又往<style>里加料： <strong>@media only screen and (max-width: 600px) { <p>body {</p> <p>padding: 10px;</p> <p>font-size: 14px;</p> <p>img {</p> <p>margin: 10px auto;</p> </p> <p>意思就是，手机上看的话，字小点儿，挤得宽松点儿，图片别乱跑。<strong>拿自己手机一刷，哎哟我去，终于不用左右划拉了！</strong></p></p> <p>正美滋滋欣赏，老婆催倒垃圾的电话来了，“哐当”手一抖，还没保存！吓得我魂飞魄散，赶紧按Ctrl+S。得亏保存得快，不然又得重来。弄个网页搞得跟打仗似的，发朋友圈嘚瑟一下，收工！咱这手艺，也就忽悠忽悠外行，专业人士看了估计得笑话。</p> </div> </div> <div class="container"> <div class="detail-tool text-center"> <a href='/zhishi/39227.html' title='上海企业网站设计公司哪家好？选对公司，事半功倍！'> 上一篇：上海企业网站设计公司哪家好？选对公司，事半功倍！ </a> <a>下一篇：暂无</a> <a href="/zhishi/" class="btn b3">返回栏目列表</a> </div> <script> $('.detail-tool a:eq(0)').addClass('btn b1'); $('.detail-tool a:eq(1)').addClass('btn b2'); </script> </div> </div><a href="http://www.tzxunren.cn" target="_blank">泰州私家侦探</a> <a href="http://www.yzxunren.cn/" target="_blank">扬州侦探</a> <a href="http://www.hzzhaoren.cn" target="_blank">湖州侦探公司</a> <a href="http://www.jxxunren.cn" target="_blank">嘉兴私家侦探</a> <a href="http://www.wzxunren.cn/" target="_blank">温州侦探公司</a> <div class="space text-center"> <div class="container"> 如果您有什么问题，欢迎咨询技术员 <a href="http://wpa.qq.com/msgrd?v=3&uin=860244890&site=qq&menu=yes" class="btn">点击QQ咨询</a> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-4"> <a href="http://www.860246666.com" class="logo"><img src="/uploads/allimg/20211104/1-2111040946033P.png" alt=""></a> </div> <div class="col-md-2 col-sm-8 hidden-xs"> <h6>案例中心</h6> <ul> </ul> </div> <div class="col-md-2 col-sm-8 hidden-xs"> <h6>资讯中心</h6> <ul> <li> <a href="/gsdt/">公司动态</a></li> <li> <a href="/zhishi/">网站知识</a></li> <li> <a href="/yuny/">网站运营</a></li> </ul> </div> <div class="col-md-4 col-sm-12"> <h6>联系方式</h6> <p>地址：沈阳铁西区58号</p> <a href="" class="btn"><i class="fa fa-phone"></i> 电话：15502425690</a> </div> </div> <div class="row"> <div class="col-sm-12"> <hr> </div> <div class="col-sm-6">Copyright © 2012-2021 沈阳创网科技有限公司版权所有<a href="http://www.eyoucms.com/plus/powerby.php" target="_blank"> Powered by EyouCms</a><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">辽ICP备17007067号-2</a></div><a href="http://www.860246666.com/sitemap.xml" target="_blank">sitemap.xml</a> <div class="col-sm-6 hidden-xs">  </div> </div> </div> </div> <div class="search-pop"> <a href="javascript:;" class="close fa fa-times-circle"></a> <div class="content" style="height: 100%;"> <form method="get" action="/index.php?m=home&c=Search&a=lists" onsubmit="return searchForm();" style="display: table;height: 100%;width: 100%;"> <div style="display: table-cell;vertical-align: middle;"> <div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2 text-center"> <div class="ipt"> <i class="fa fa-search search-button" type="submit"></i> <input type="text" value="输入关键词后按Enter搜索" onFocus="if(this.value == '输入关键词后按Enter搜索'){this.value=''}" onBlur="if(this.value ==''){this.value='输入关键词后按Enter搜索'}" name="keywords" id="keywords"/> </div> </div> </div> <input type="hidden" name="m" value="home" /><input type="hidden" name="c" value="Search" /><input type="hidden" name="a" value="lists" /><input type="hidden" name="lang" value="cn" /> </form> </div> </div> <div class="cndns-right hidden-xs"> <div class="cndns-right-meau meau-sev"> <a href="javascript:" class="cndns-right-btn"> <span class="fa fa-qq"></span> <p>QQ咨询</p> </a> <div class="cndns-right-box"> <div class="box-border"> <div class="sev-t"> <span class="fa fa-comments"></span> <p>QQ在线咨询<i>真诚为您提供专业解答服务</i></p> <div class="clear"></div> </div> <div class="sev-b"> <ul class="clearfix"> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=860244890&site=qq&menu=yes">售前技术</a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=860244890&site=qq&menu=yes">售前技术</a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=860244890&site=qq&menu=yes">售后技术</a></li> <li><a href="http://wpa.qq.com/msgrd?v=3&uin=860244890&site=qq&menu=yes">售后技术</a></li> </ul> </div> </div> </div> </div> <div class="cndns-right-meau meau-contact"> <a href="javascript:" class="cndns-right-btn"> <span class="fa fa-phone-square"></span> <p> 咨询热线 </p> </a> <div class="cndns-right-box"> <div class="box-border"> <div class="sev-t clearfix"> <span class="fa fa-phone-square"></span> <p>15502425690<br /> <i>全天候技术服务热线</i></p> </div> </div> </div> </div> <div class="cndns-right-meau meau-code"> <a href="javascript:" class="cndns-right-btn"> <span class="fa fa-wechat"></span> <p>添加微信</p> </a> <div class="cndns-right-box"> <div class="box-border"> <div class="sev-t"><img src="/uploads/allimg/20211104/1-2111040Z23M49.jpg" alt="二维码" /><i>微信便捷交流</i></div> </div> </div> </div> <div class="cndns-right-meau meau-top" id="top-back"> <a href="javascript:" class="cndns-right-btn"> <span class="fa fa-angle-double-up"></span> <i>返回顶部</i> </a> </div> </div>   </body> </html>