HTML网站制作

家住魔仙堡 提交于 2019-11-29 04:43:47

制作步骤:
创建一个完整网站目录结构:
       meishimeike(文件夹):管理当前网站中所有的文件

          index.html / default.html(文件):当前网站的入口文件

          CSS(文件夹):管理当前网站中所有的 css 文件

          js     (文件夹):管理当前网站中所有的 js 文件

          images(文件夹):管理当前网站中所有的图片

准备一张 PSD (用于转换为 html 页面的设计图)
确定一种开发方式
         a) 从上到下的方式(比较适合新手)

         b) 先确定结构再在结构中填充内容(比较适合老司机)

CSS初始化(消除浏览器中标签的一些默认 css 样式):
去掉标签的默认 margin 和 padding :html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend,img{margin:0; padding:0; }
去掉图片的边框:img{border: 0; }
去掉 ul 前面的小点:ul, ol{list-style: none; }
去掉 input 标签默认的 padding-top ,padding-bottom,border:input{padding-top: 0;padding-bottom: 0; border: none; }
去掉 a 标签的下划线:a{text-decoration: none; }
给 body 设置一个统一的字体样式和背景颜色:body{font: normal normal 12px "宋体",color: #fff; background-color:#fae8c8;  }
左右浮动,清除浮动 :.fl{float:left;} .fr{float:right; } .clearfix:after{content:""; height: 0; line-height: 0 ; display: block; }
开始网站代码的书写
      1)完成网站所有页面统一的头部和尾部

             temple.html----------->temple.css

自制logo:将一张图上的不同图案分别置于不同的图层,再将所需图案复制到同一个图层中即可。
————————————————
版权声明:本文为CSDN博主「Shay_Maria」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/jxqingge/article/details/81427727

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!