您现在的位置:首页 >> 网页设计 >> Html视频教程 >> 内容

开发人员必学之美食美刻网站制作实战视频教程

时间:2018-10-19 16:55:41

  核心提示:制作步骤:1.创建一个完整网站目录结构:meishimeike(文件夹):管理当前网站中所有的文件index.html/default.html(文件):当前网站的入口文件css(文件夹):管理当前网...

制作步骤:

1. 创建一个完整网站目录结构:

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

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

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

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

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

2. 准备一张PSD(用于转换为html页面的设计图)

3. 确定一种开发方式:

1) 从上到下的方式:(比较适合新手)

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

4. css初始化(清除浏览器中标签的一些默认样式):

1) 去掉标签的默认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}

2) 去掉图片的边框:

        img{border:0}

3) 去掉ul前面的小点

        ul,ol{list-style:none}

4) 去掉input标签默认的padding-top,padding-bottomborder

        input{padding-top:0;padding-bottom:0;border:none}

5) 去掉a标签的下划线

a{ text-decoration: none;}

6) body设置一个统一的字体样式和背景颜色

body {font: normal normal 12px "宋体";color: #4c4c4c;background-color: #fae8c8;}

7) 左右浮动,清除浮动

.fl {float: left;}.fr {float: right;}.clearfix:after {content: "";height: 0;line-height: 0;display: block;visibility: hidden;clear: both;}.clearfix {zoom: 1;}

5. 开始网站代码的书写:

1) 完成网站所有页面统一的头部和尾部:

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


 

下载地址:https://pan.baidu.com/s/1gfFwHf9#list/path=%2F

Java免费学习   Java自学网 http://www.javalearns.com

关注微信号:javalearns   随时随地学Java

或扫一扫

随时随地学Java

作者:不详 来源:网络
    你是从哪里知道本网站的?
  • 网友介绍的
  • 百度搜索的
  • Google搜索的
  • 其它搜索过来的
  • 网址输错了进来的
  • 太忙了不记得了
相关文章
  • 没有相关文章
共有评论 0相关评论
发表我的评论
  • 大名:
  • 内容:
  • java学习网(www.javalearns.com) © 2014 版权所有 All Rights Reserved.
  • Email:javalearns@163.com 站长QQ:1356121699 晋ICP备14003680号-3
  • java学习网部分内容来自网络或网友发布,如侵犯了您利益,请发邮件至:javalearns@126.com,我们尽快处理!
  • Java学习网
  • 网站统计