静态网页设计

标签： 2025-10-26　次

突然想整个个人小网站

昨儿晚上刷手机，瞅见别人做的个人主页挺有意思，心痒痒的。琢磨着咱也整一个呗，就当练练手。说干就干，大半夜的打开电脑，准备鼓捣一个静态网页。

第一步？直接打开那个记事本就开始敲了！对，你没看错，就是最土的记事本。想着不就是写点字儿嘛能有多难？上来就先敲了个 ``，然后 ``、``，给我的小网站起了个响当当的名儿——“我的小天地”。接着就是 ``，寻思着放点啥先弄个大标题，“欢迎光临”，再来点自我介绍，“一个爱折腾的程序员”，美滋滋。</p> <ul> <li><strong>浏览器一打开，傻眼了：</strong> 那文字就跟喝醉了似的，全堆在左上角，丑得要命！</li> <li><strong>立马查咋弄好看点：</strong> 现学现卖，找了个叫CSS的玩意儿。照着抄了个 `style` 标签塞进 `head` 里。</li> <li><strong>瞎折腾颜色和位置：</strong> `background-color: lightblue;` 先把背景整成淡蓝色，舒服多了。`text-align: center;` 让标题和字都乖乖居中站</li> </ul> <h2>导航栏？那必须得有！</h2> <p>光秃秃的可不行。又想往页面上方加一排导航栏，点哪儿就去哪儿那种。赶紧去搜“怎么加导航栏”，抄了点代码。弄了几个 `<a>主页</a>`、`<a>关于</a>`、`<a>联系</a>`，觉得这下专业了。</p> <p>结果一刷新，这几个链接就跟超市门口免费发的传单似的，稀稀拉拉排在那儿，一点样子都没有。<strong>这哪行！</strong></p> <ul> <li><strong>继续研究：</strong> 发现得给 `<nav>` 和里面的 `<a>` 用CSS打扮打扮。</li> <li><strong>硬着头皮调：</strong> `display: inline-block;` 让它们别排成竖排；`padding: 10px 20px;` 加点空白撑开点；再`text-decoration: none;` 把烦人的下划线去掉；3`background-color: #333; color: white;` 整成黑底白字。</li> </ul> <h2>撞上新麻烦：手机看一团糟</h2> <p>在我自己电脑上看是挺像那么回事了，美滋滋地发手机上一看，<strong>当场就想摔手机！</strong> 布局全乱了套，字小得得用放大镜看！这才知道有“响应式”这么个东西，意思就是网页在电脑、手机、平板上都得正常看。</p> <p><strong>解决方案比想象的简单点，就是多了几步：</strong></p> <ul> <li><strong>加上“神奇的咒语”：</strong> `<meta>` 这玩意儿，据说能让手机浏览器正常识别尺寸。</li> <li><strong>开始用百分比和 `max-width`：</strong> 把原来那些固定像素的宽度都改成了百分比，比如图片设置个 `max-width: 100%;`，这样在手机上就不会撑爆屏幕了。</li> <li><strong>媒体查询是个好东西：</strong> 学会了一种叫 `@media` 的写法。专门写了一段代码，当屏幕窄于600像素（大概是手机屏幕大小）的时候，就把导航栏的每个链接改成占满一行，这样手机点起来就不会误触了。</li> </ul> <h2>收工后的小总结</h2> <p>鼓捣了几个小时，总算弄出个能看的样子了。纯手工一个个字在记事本上敲出来的，也没用啥高级工具。<strong>最大的感受就一个字：坑！</strong></p> <ul> <li>刚开始想得太简单，以为几行就搞定了。</li> <li>浏览器兼容性真是个麻烦事儿，在Chrome上好好的，换个浏览器就可能歪了。</li> <li>做手机适配这一步绝对不能省，不然就等着手机用户骂娘。</li> </ul> <p>虽然这过程有点费劲，但<strong>自己动手一步步搞出来，能看到效果</strong>，特别是手机也能看舒服的时候，还是挺有成就感的！就是坐得太久，屁股都麻了……该点个外卖犒劳下自己了！</p> </div> <div class="clear"></div> <div class="tags"> </div> <div class="clear"></div> </div> <div class="txt_cur"> <a href="/ddhc/36482.html" class="prev"><span>公司网页制作多少钱？2023最新报价指南来了！</span></a> <a class="next"><span>暂无</span></a> <div class="clear"></div> </div> </div> <div class="page page_more animated fast fadeInUp" data-animation="fadeInUp"> <div class="wrap"> <h3>推荐新闻</h3> <div class="news_xg_list"> <ul> <li> <a href="/ddhc/21.html" title="建设营销型网站必知的思路和步骤"> <div class="img"><img src="/uploads/allimg/20190319/698d261dec3de5c82d94f85145058db9.jpg" alt="建设营销型网站必知的思路和步骤"></div> <div class="text"> <p>2023/03/02</p> <h3>建设营销型网站必知的思路和步骤</h3> <span class="more">查看详情</span></div> </a> </li> <li> <a href="/ddhc/20.html" title="响应式网站建设的规划事项"> <div class="img"><img src="/uploads/allimg/20190319/72b1ed3f40cb7177bc71633937aef38f.jpg" alt="响应式网站建设的规划事项"></div> <div class="text"> <p>2023/03/02</p> <h3>响应式网站建设的规划事项</h3> <span class="more">查看详情</span></div> </a> </li> <li> <a href="/ddhc/19.html" title="全新熊掌号做运营需要掌握这四个小技巧"> <div class="img"><img src="/uploads/ueditor/20190319/daa8e9d42bf7d301c53d0b3521e6dc95.jpg" alt="全新熊掌号做运营需要掌握这四个小技巧"></div> <div class="text"> <p>2023/03/02</p> <h3>全新熊掌号做运营需要掌握这四个小技巧</h3> <span class="more">查看详情</span></div> </a> </li> <li> <a href="/ddhc/18.html" title="站长应如何运营熊掌号才能获得利益最大化"> <div class="img"><img src="/uploads/allimg/20190319/6d32ef46a3b15f8e110602de3fd849ea.jpg" alt="站长应如何运营熊掌号才能获得利益最大化"></div> <div class="text"> <p>2023/03/02</p> <h3>站长应如何运营熊掌号才能获得利益最大化</h3> <span class="more">查看详情</span></div> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="footer"> <div class="wrap"> <div class="foot"> <div class="item"> <div class="logo mobile"></div> <ul class="add_list"> <li><a href="tel:139 4000 88888（微信同号）">手机：139 4000 88888（微信同号）</a></li> <li><a href="tel:0411-31978321">电话：0411-31978321</a></li> <li>地址：大连市高新区浦项道A座11楼</li> </ul> </div> <div class="item item_ewm"> <ul> <li> <div class="ewm"><img src="/uploads/allimg/20190319/e06c13c49ba00e43f16411681657bac1.jpg"/><span>微信客服</span></div> </li> <li> <div class="ewm"><img src="/uploads/allimg/20190319/e06c13c49ba00e43f16411681657bac1.jpg"/><span>微信公众号</span></div> </li> </ul> </div> <div class="item item_nav"> <div class="f_nav"> <a href="/jmzp/">关于</a> <a href="/mong/">服务</a> <a href="/kekk/">新闻</a> <a href="/scoz/">案例</a> </div> <div class="f_tel"> <p>电话</p> <h3>0411-31978321</h3> <a rel="nofollow" href="tencent://message/?uin=88888888&在线咨询&Menu=yes"><span>客服QQ</span></a> </div> </div> <div class="clear"></div> </div> <div class="foot_link"> <div class="list"> <ul> <li><a href="http://www.lygzhaoren.cn" target="_blank" >连云港找人公司 </a></li> <li><a href="http://www.hagd555.cn/" target="_blank" >淮安侦探找人 </a></li> <li><a href="https://4ma.cn" target="_blank" >钓鱼网 </a></li> <li><a href="http://www.gzweiqin.com" target="_blank" >小程序开发 </a></li> <li><a href="http://www.weibo.com" target="_blank" >微博 </a></li> <li><a href="http://www.xjcyh.cn/" target="_blank" >水处理设备 </a></li> <li><a href="http://www.fslytrade.com/" target="_blank" >展柜厂家 </a></li> <li><a href="https://www.skd-11.com.cn" target="_blank" >skd11材料 </a></li> <li><a href="http://www.0417ykztgs.com/" target="_blank" >轻食网 </a></li> <li><a href="http://www.jnseoer.cn" target="_blank" >东营网站制作 </a></li> <li><a href="http://ziyubo.com" target="_blank" >厦门网站建设 </a></li> <li><a href="https://www.seocto.com" target="_blank" >广州seo </a></li> <li><a href="http://www.w0s.cn" target="_blank" >石家庄网站制作 </a></li> <li><a href="http://wsjz.net" target="_blank" >石家庄网站建设 </a></li> <li><a href="https://www.lpyun.net" target="_blank" >苏州网站建设 </a></li> <li><a href="http://www.jsfwxs.com/" target="_blank" >路灯资讯网 </a></li> <li><a href="http://www.hongfeijituan.com/" target="_blank" >太阳能路灯厂家 </a></li> <li><a href="https://www.4000730138.com" target="_blank" >企业网站托管 </a></li> <li><a href="http://www.lianda1718.com" target="_blank" >笔式位移传感器 </a></li> <li><a href="http://www.cgfln.com/" target="_blank" >苏州打井公司 </a></li> <li><a href="http://www.leapronet.com" target="_blank" >北京短视频代运营 </a></li> <li><a href="http://0376seo.net/" target="_blank" >天津网站制作 </a></li> <li><a href="http://www.zjzhaoren.cn/" target="_blank" >镇江私家调查 </a></li> <li><a href="http://www.qihuoka.com" target="_blank" >期货开户 </a></li> <li><a href="http://www.hkjzg.com" target="_blank" >洛阳网站建设 </a></li> <li><a href="http://www.qijingcg.com" target="_blank" >郑州三维动画 </a></li> <li><a href="https://www.duooo.net" target="_blank" >上海vi设计公司 </a></li> <li><a href="http://www.021lingqi.com" target="_blank" >上海办公室装修公司 </a></li> <li><a href="http://www.0558v8.cn/" target="_blank" >亳州私家调查 </a></li> <li><a href="http://www.vrcr.org.cn" target="_blank" >教开锁 </a></li> <li><a href="http://www.web010.com.cn" target="_blank" >北京网站建设公司 </a></li> <li><a href="http://www.fsxiangshimold.com/" target="_blank" >企业宣传片制作 </a></li> <li><a href="http://www.sxzhaoren.cn" target="_blank" >绍兴侦探公司 </a></li> <li><a href="http://www.nbzhaoren.cn" target="_blank" >宁波找人公司 </a></li> <li><a href="http://suqian.cn-ccjs.com/" target="_self" >宿迁侦探公司 </a></li> <li><a href="https://www.cdhaichuang.cn" target="_blank" >网站建设 </a></li> <li><a href="http://www.whsijiazhentan8.com/" target="_blank" >武汉侦探找人 </a></li> <li><a href="http://www.shmuchen.com" target="_blank" >上海高端网站开发 </a></li> <li><a href="http://www.38zx.com" target="_blank" >女神整形网 </a></li> <li><a href="http://www.htgl2.com" target="_blank" >国战手游 </a></li> </ul> <span class="span_jt"></span> </div> </div> <script> $(function(){ $(".foot_link .span_jt").click(function(){ $(".foot_link").toggleClass("on"); }) }) </script> </div> <div class="foot2"> <p>Copyright © 2012-2023 大连焽创网络设计公司版权所有网站备案号：<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">辽ICP备17007067号-4</a></p> </div> </div> <div class="full"> <ul> <li><a href="tencent://message/?uin=88888888&在线咨询&Menu=yes"><span class="span1"></span></a></li> <li><a href="javascript:void(0)"><span class="span2"></span> <label>139 4000 88888（微信同号）</label> </a></li> <li><a href="javascript:void(1)"><span class="span3"></span> <label class="lbl_img"><img src="/uploads/allimg/20190319/e06c13c49ba00e43f16411681657bac1.jpg"/></label> </a></li> <li><a href="javascript:void(2)" class="gotop"><span class="span4"></span></a></li> </ul> </div>     </body> </html>