JavaEE鸿蒙应用开发HTML&JS+前端Python+大数据开发人工智能开发电商视觉设计软件测试新媒体+短视频直播运营产品经理集成电路应用开发(含嵌入式)Linux云计算+运维开发C/C++拍摄剪辑+短视频制作PMP项目管理认证电商运营Go语言与区块链大数据PHP工程师Android+物联网iOS.NET

美食美刻网站制作实战中级教程

更新日期:2021.06.03

全套视频教程及资料

视频教程技术解析配套源码学习工具学习笔记

一键免费下载

扫码关注,回复关键词,马上领取全套视频资源!

1. 微信扫描二维码,
    关注“黑马程序员”公众号(itheima666)

2. 回复关键词“领取资源01”,

即可在小程序的【HTML&JS+前端】学科中领取全部资源

课程须知

本视频系统的讲解了如何制作一个网站,该视频的起点是针对有一定的html+css+JavaScript基础的学员。通过学习,相信你可以自己独立完成网站的制作,为下一步打下坚实的基础。...

  1. 课程介绍
  2. 课程目录
  3. 课程评论

视频提取码:knfo


制作步骤:

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


本文来源传智播客和黑马程序员视频库,原创整理,转载请注明出处,喜欢请分享更多人

文章来源:传智播客和黑马程序员视频库


综合评分4.8

13人已评分

我也要评分

评论打分
你觉得老师讲的怎么样?

评论字数不能超过100字,还剩个字符

发表评价

三七

视频不能下载了 怎么办?

0

2020-05-26 11:46

配套素材 源码资料去哪要 加qq问了 没有回复

2

2020-03-04 14:21

无名者

配套素材 源码资料去哪要

0

管理员回复:添加播妞Q:498913868获取

2019-07-11 14:12

江小白。

配套素材 源码资料去哪要?

1

管理员回复:添加QQ:1467400757

2019-03-25 14:34

Soul mates

加上qq为什么不搭理 醉了 那就不要说qq号 有什么了不起的 还让我们怎么去买课

1

管理员回复:老师接收的消息比较多,没有及时回复请谅解

2018-11-03 16:56

王帅兵

管理员大大,现在要加那个qq呢,加了之前的,还没回复我

0

管理员回复:因为老师平时咨询量较大,看到一定会回复的,望理解

2018-08-10 15:40

whereyou-04

求素材和源码,谢谢!

0

俊逸回复:找到素材了吗?给我一份呗,谢谢

管理员回复:添加qq 1481135711 领取

2018-01-19 14:58

无名者

求美食美刻psd图片

0

管理员回复:添加qq 1481135711 领取资料源码

2017-12-21 14:24

配套资料联系了黑马程序员,没回我

0

2017-09-23 23:48

尘埃

logo区域的文本框在ie和火狐下显示有问题,有谁来解答下为什么么

0

2017-09-19 23:32