网页制作实战项目九:飘城旅行社(分步教程)精

网页制作实战项目九:飘城旅行社(分步教程)精

练习一:PC端固定布局

地址:http://www.125jz.com/wp-content/demo/20190113demo1.html 

练习二:流体移动布局

地址:马上上线

练习三:兼容响应式布局

地址:马上上线

【时间要求】4学时( 45 分钟×4=180 分钟)

【上机内容】 飘城旅行社

【上机目的】

1 、掌握整站开发的步骤及流程

2 、掌握网页固定布局的方法和技巧

3、培养团队意识和协作精神

【上机重点】

网页固定布局的方法和技巧

【上机难点】

网页固定布局的方法和技巧

【上机教学方法】

1 、采用分组教学 , 每个小组模拟一个开发团队

2 、充分发挥小组内各成员的积极性、主动性和创造性

【上机教程】

本章主要用 HTML5 和 CSS3 来构建 Web 页面,项目采用 PC 端固定布局来实现,采用像素(px)单位。

一、创建项目

1.创建index.html文件,添加html5基本格式;

2.创建img和css两个目录;

3.创建style.css文件,存放在css目录,并在html5引入css;

二、网站结构

nav导航、header头部、section首页主体、footer尾部

<nav></nav>
<header></header>
<section></section>
<footer></footer>

三、制作导航

<nav id="nav">
    <section class="center">
        <h1 class="logo"> 瓢城旅行社</h1>
        <ul class="link">
            <li class="active">
                <a href="###"> 首页</a>
            </li>
            <li>
                <a href="###"> 旅游资讯</a>
            </li>
            <li>
                <a href="###"> 机票订购</a>
            </li>
            <li>
                <a href="###"> 风景欣赏</a>
            </li>
            <li>
                <a href="###"> 公司简介</a>
            </li>
        </ul>
    </section>
</nav>

CSS代码

body, h1, ul {
    margin: 0;
    padding: 0;
}
body {

    background-color: #fff;
}
ul {
    list-style: outsidenonenone;
}
a {
    text-decoration: none;
}
#nav {
    width: 100%;
    height: 70px;
    background: #333;
}
#nav .center {
    width: 1263px;
    margin: 0auto;
}
#nav .logo {
    width: 240px;
    height: 70px;
    background-image: url(../img/logo.png);
    text-indent: -9999px;
    float: left;
}
#nav .link {
    width: 650px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    float: right;
}
#nav .link li {
    width: 120px;
    height: 70px;
    text-align: center;
    float: left;
}
#nav .link a {
    display: block;
    color: #eee;
}
#nav .active a, #nav .link a:hover {

}

LOGO采用的是h1标签,一般为了让搜索引擎更好的抓取关键字,我们建议一个 页面只有一个h1,而且是最重要的关键词放在里面。

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/3173.html

(4)
上一篇 2019年1月5日 下午9:55
下一篇 2019年1月19日 上午11:25

99%的人还看了以下文章

  • 左侧固定,右侧自适应布局的两种实现方法

    左侧固定,右侧自适应布局效果图 很多页面,特别是网站后台管理页面,不少采用左右布局。本文讲解左侧固定,右侧自适应布局的两种实现方法。 左侧固定200px宽,右侧自适应,中间间隔10px。 HTML: <div class=”parent”> <div class=”side”></div> <div class=”m…

    2019年3月10日
    2.9K0
  • 网站设计的七个步骤

    一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 初学网页制作从这里开始 …

    2020年6月13日
    2.2K0
  • 网页制作实战项目六:中融宝企业网站制作

    【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 中融宝企业网站制作 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用 【上机难点】 1、网页布局 2、CSS的定义和使用 【…

    2018年5月17日 网页设计
    4.9K1
  • 第3章CSS基础

    本章学习目标:
    了解CSS基本概念
    掌握CSS选择器的使用
    掌握在网页中应用CSS的方法
    掌握使用Dreamweaver编辑CSS的方法

    2018年3月22日
    3.9K0
  • 网页设计中最常用的7款字体

    字体主要分为衬线字和无衬线字。网站制作中,选用什么样的字体是比较重要。 衬线字和无衬线字的区别:左边的中文和英文字属于衬线字,右边中文和英文属于无衬线字。 衬线字指的是在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。 如宋体,观察比划可以看到横细竖粗的特点,这就是典型的称线字。 无衬线字体没有这些额外的装饰,而且笔画的粗细差不多。比如微软雅…

    2019年10月22日 网页设计
    7.7K0

发表回复

登录后才能评论