1.新建以下目录

根目录(学号-姓名-品牌)

css
js
img


2.在DW中新建HTML,修改标题(将无标题文档改成你选的品牌官网标题)。

#打开品牌官网,按F12,再按Ctrl+F,查找<title>
<title>septum knee Hill</title>
#<title></title>中间就是该官网的标题

3.保存HTML,保存到根目录中,命名为index


4.DW新建CSS
文件-新建-空白页-CSS


5.将CSS保存到根目录/css文件夹中,命名为style


6.关联CSS
DW左边选择第四步保存的CSS文件,按住鼠标左键拖入
拖入后会出现以下代码,就算关联成功

<link rel="stylesheet" type="text/css" href="css/style.css">

注意代码位置如下

<title>标题</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
/*在标题与</head>标签中间*/

7.导入公共样式
将以下代码粘贴入CSS文件中

/* 全局公共样式的设定 */
*{margin:0;padding:0}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd{margin:0;padding:0;border:0;}
body{background:#fff;color:#444;font:12px Arial,'微软雅黑';}
li{list-style-type:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
input,button,textarea,select{font:100% Arial,'微软雅黑';}


/* 默认全局样式超链接样式 */
a:link {color: #444; text-decoration:none;}/* 链接基本样式 */
a:visited {color: #444;text-decoration:none;}/* 链接点击过后的样式 */
a:hover {color: #222; text-decoration:underline;}/* 链接移上时的样式 */
a:active {color: #222; text-decoration:underline;}/* 链接点击时的样式 */

/* 其它常用样式的定义 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both;}
.noBorder{border:none;    }
img li{ vertical-align:top;}

8.基本框架搭建
以下为CSS中的TOP代码以及解释(CSS代码写在CSS文件最后)

#top{ width:1200px; height:94px; background:#fbdff0;}
/*#top:样式命名(以字母开头,不能带有中文),*/
/*width:1200px 其中width为宽,宽度为1200像素*/
/*heigth:94px 其中heigth为高,高度为94像素*/
/*background:red background为背景颜色,颜色为#fbdff0*/

既然CSS中写好了,那就要在index文件中引用这CSS
看一下引用后完整的index代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASUS中国</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<!--头部开始-->
<div id="top"></div>
<!--头部结束-->
</body>
</html>
/*将要引用的<div id="top"></div>代码输在<body></body>之间*/


9.完善当前代码
将top搞出来了,我们如法炮制将其他板块也写出来
此时文件代码
index.html:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASUS中国</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<!--头部开始-->
<div id="top"></div>
<!--头部结束-->

<!--导航开始-->
<div id="menu"></div>
<!--导航结束-->

<!--幻灯开始-->
<div id="banner"></div>
<!--幻灯结束-->

<!--产品开始-->
<div id="products"></div>
<!--产品结束-->

<!--内容开始-->
<div id="content"></div>
<!--内容结束-->

<!--尾部开始-->
<div id="footer"></div>
<!--尾部结束-->

</body>
</html>

style.css:

/* 全局公共样式的设定 */
*{margin:0;padding:0}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd{margin:0;padding:0;border:0;}
body{background:#fff;color:#444;font:12px Arial,'微软雅黑';}
li{list-style-type:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
input,button,textarea,select{font:100% Arial,'微软雅黑';}


/* 默认全局样式超链接样式 */
a:link {color: #444; text-decoration:none;}/* 链接基本样式 */
a:visited {color: #444;text-decoration:none;}/* 链接点击过后的样式 */
a:hover {color: #222; text-decoration:underline;}/* 链接移上时的样式 */
a:active {color: #222; text-decoration:underline;}/* 链接点击时的样式 */

/* 其它常用样式的定义 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both;}
.noBorder{border:none;    }
img li{ vertical-align:top;}


/* 头部开始 */
#top{ width:1200px; height:94px; background:#fbdff0;}
/* 头部结束 */

/* 导航开始 */
#menu{ width:1200px; height:42px; background:#cf56a1;}
/* 导航结束 */

/* 幻灯开始 */
#banner{ width:1200px; height:420px; background:#ff8ba7;}
/* 幻灯结束 */

/* 产品开始 */
#products{ width:1200px; height:140px; background:#ffc6c7;}
/* 产品结束 */

/* 内容开始 */
#content{ width:1200px; height:231px; background:#faeee7; }
/* 内容结束 */

/* 尾部开始 */
#footer{ width:1200px; height:67px; background:#c3f0ca;}
/* 尾部结束 */


!!!10.居中,边缘空隙,本课难点

做到这我们发现框是出来了,但是没有居中,以及有些框需要一些空隙,这时候就要引出一个新的CSS语法margin

#top{ width:1200px; height:94px; background:#fbdff0;}
/*上面是原来top的代码,下面是加了进行居中后的代码*/
#top{ width:1200px; height:94px; background:#fbdff0; margin:0 auto;}

可以按下面按钮进行查看加了margin的区别


可以看到top的框居中了,他的运行逻辑如下

margin:0 auto;
/*首先完整的margin应该是margin 值1 值2 值3 值4*/
/*分别代表了上 右 下 左 方向是顺时针*/
/*示范中我就俩组,因为top下面不用留空隙,auto自动左右对等了*/
/*0代表0px即0像素,因为TOP框的上面不需要空隙所以是0*/
/*auto意思是自动,就是自动左右/上下间隙对等*/

贴出所有框的代码,你们对着PS教案细品,细品,细品

#top{ width:1200px; height:94px; background:#fbdff0;margin:0 auto;}
#menu{ width:100%; height:42px; background:url(../img/menu_bg.jpg) repeat-x; margin:0 auto;}
#banner{ width:1200px; height:420px; background:#ff8ba7; margin:16px auto 20px;}
#products{ width:1200px; height:140px; background:#ffc6c7;margin:0 auto;}
#content{ width:1200px; height:231px; background:#faeee7; margin:20px auto 40px;}
#footer{ width:1200px; height:67px; background:#c3f0ca; margin:0 auto;}

因为这边主要靠你们细品,对着PS教案多品一下margin后面的数值,90%可以品出来
全部居中留白后,我们看一下效果


11.头部无限延长
top和menu模块,在我们设定中是应该无限延长的
因为无限长=无限宽度
所以代码修改如下
top:

#top{ width:1200px; height:94px; background:#fbdff0; margin:0 auto;}
#top{ width:100%; height:94px; background:#fbdff0; margin:0 auto;}

menu:

#menu{ width:1200px; height:42px; background:#cf56a1; margin:0 auto;}
#menu{ width:100%; height:42px; background:#cf56a1; margin:0 auto;}

可以看到我将他们的1200px修改成了100%,代表宽占比窗口的100%
看一下效果


12.top以menu及背景
第一步:从PS教案中裁剪出宽为1像素的背景
第二部:保存至img,并命名,这里按照教案命名
以上两步因为本着不放图片的原则,所以不细讲
放入并命名好后,我们修改他的背景,拿top举例

#top{ width:100%; height:94px; background:#fbdff0; margin:0 auto;}

可以看到我们现在背景是颜色是#fbdff0,那我们把它替换成我们刚刚截下的图片

#top{ width:100%; height:94px; background:url(../img/top_bg.jpg) repeat-x; margin:0 auto;}
/*url(../img/top_bg.jpg)表示的是存放的具体路径*/
/*repeat-x 代表这张图片以X轴平铺,因为我们的图宽只有1像素,所以要平铺过去*/

top和menu完成后效果如下

完美


13.最后的logo
先上top代码

/* 头部开始 */
#top{ width:100%; height:94px; background:url(../img/top_bg.jpg) repeat-x; margin:0 auto; }
#top .top_box{ width:1200px; height:94px; margin:0 auto;}
#top .top_box .logo{ margin:34px 0 0 20px;}
/* 头部结束 */

第一行就不用我解释了吧,第二行是在第一个大盒子里再放一个宽1200,高94的盒子
其中#top .top_box 这个代表父级关系top_box的爸爸是top
@#top .top_box .logo
这个的话top是爷爷top_box是爸爸logo是儿子
这些就是相当于画地为牢,给他限制的一个区域活动,这个区域还要在爸爸的区域里画。
回到index.htlm

<!--头部开始-->
<div id="top">
    <div class="top_box">
        <img src="img/logo.png" alt="logo" class="logo">
    </div>
</div>
<!--头部结束-->

解释一下

<div class="top_box">
    <img src="img/logo.png" alt="logo" class="logo">
</div>
<div class="top_box"></div>

这是top的子级,就是我们刚刚画的地

    <img src="img/logo.png" alt="logo" class="logo">
<!--图片地址:img/logo.png 显示图像:alt 根据CSS到自己地盘-->

图片地址和class都理解,alt解释一下,如果没有这句,图片将显示不出来,就像你给我一把刀,你什么的没有说,你是叫我切水果还是???

好了附上全部代码以及效果
index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ASUS中国</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
<!--头部开始-->
<div id="top">
    <div class="top_box">
        <img src="img/logo.png" alt="logo" class="logo">
    </div>
</div>
<!--头部结束-->


<div id="menu"></div>
<div id="banner"></div>
<div id="products"></div>
<div id="content"></div>
<div id="footer"></div>

</body>
</html>

style.css

/* 全局公共样式的设定 */
*{margin:0;padding:0}
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd{margin:0;padding:0;border:0;}
body{background:#fff;color:#444;font:12px Arial,'微软雅黑';}
li{list-style-type:none;}
h1,h2,h3,h4,h5,h6 {font-size:12px; font-weight:normal;}
input,button,textarea,select{font:100% Arial,'微软雅黑';}


/* 默认全局样式超链接样式 */
a:link {color: #444; text-decoration:none;}/* 链接基本样式 */
a:visited {color: #444;text-decoration:none;}/* 链接点击过后的样式 */
a:hover {color: #222; text-decoration:underline;}/* 链接移上时的样式 */
a:active {color: #222; text-decoration:underline;}/* 链接点击时的样式 */

/* 其它常用样式的定义 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both;}
.noBorder{border:none;    }
img li{ vertical-align:top;}


/* 头部开始 */
#top{ width:100%; height:94px; background:url(../img/top_bg.jpg) repeat-x; margin:0 auto; }
#top .top_box{ width:1200px; height:94px; margin:0 auto;}
#top .top_box .logo{ margin:34px 0 0 20px;}
/* 头部结束 */

/* 导航开始 */
#menu{ width:100%; height:42px; background:url(../img/menu_bg.jpg) repeat-x; margin:0 auto;}
/* 导航结束 */

/* 幻灯开始 */
#banner{ width:1200px; height:420px; background:#ff8ba7; margin:16px auto 20px;}
/* 幻灯结束 */

/* 产品开始 */
#products{ width:1200px; height:140px; background:#ffc6c7;margin:0 auto;}
/* 产品结束 */

/* 内容开始 */
#content{ width:1200px; height:231px; background:#faeee7; margin:20px auto 40px;}
/* 内容结束 */

/* 尾部开始 */
#footer{ width:1200px; height:67px; background:#c3f0ca; margin:0 auto;}
/* 尾部结束 */

Last modification:April 5th, 2020 at 06:23 pm