传智播客黑马程序员免费视频教程、公开课资源下载平台

全国咨询热线:400-618-9090

美食美刻网站制作实战

  • 中级
  • 4节课
  • 298人在学

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

下载完整视频 >>

制作步骤:

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


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

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


  • 1节 - 01-创建一个完整的网站目录结构

  • 2节 - 02-网站开发准备工作

  • 3节 - 03-css初始化的作用

  • 4节 - 04-css初始化代码的实现

更多章节请下载完整视频观看 >>

点击登录后发表评论,我们喜欢真实的你!

2017-09-23 23:48 说:

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

0回复

尘埃 2017-09-19 23:32 说:

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

0回复

云里雾里 2017-08-13 15:33 说:

为什么只能看到四集?

下载完整视频,本地播放 itcast回复于17-09-06
0回复

老海纸 2017-07-07 15:52 说:

怎么找到这个PSD图

配套资料联系黑马程序员 qq2212232413 itcast回复于17-08-10
0回复

一行浊泪问苍穹 2017-06-28 23:00 说:

网页图片在哪?

配套资料联系 qq2212232413 itcast回复于17-07-07
0回复

获取更多前段与移动开发技术资料

点击订阅

最近12 位同学与你共同奋战

WO 忘了爱  

平平淡淡  

江小白_有酒有故事  

ECHO  

柒某兄  

^ Dis para î tr  

圣夜观星者  

美铱爸爸  

悠然见衡山  

ˇ纠结、触槿不伤晴〆  

毛荷露  

纸鸢