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

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

练习一: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%的人还看了以下文章

  • 错位排版设计的5个实用方法(精)

    错位编排是通过对标题文字大小、位置和笔画的调整,打破固定的排版样式,让标题的排版更具个性化,是提升标题编排设计感和美感最简单最实用的设计技巧。

    本期分享 5 个常用的错位排版方法,学会这些方法你也可以快速设计出个性的标题排版。

    2023年1月18日
    2.6K0
  • 汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。

    2023年1月18日 网页设计
    7.2K0
  • 网页设计心得-图片的选择和处理

    网页设计师心得-图片的选择和处理,教给你如何根据色彩角度、网页角度、摄影角度来选图,并通过几个简单的案例教会你如何处理图片。

    2022年3月19日 网页设计
    9620
  • 如何提升设计价值——方法篇

    设计≠艺术,设计从诞生之初就是为“解决问题”而存在。在体验设计场景,如果业务方是“需求提出者”,那产品经理和设计师就是从不同视角切入的“问题解决者”,而用户既是“需求源头”,又是“方案验证者”和最终“价值创造者”。下面我们详细解读设计价值与业务/用户/产品三方的关系.

    2023年1月16日 网页设计
    1.4K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    2.8K0
  • 最完善的前端开发流程(详解)

    前端侧重于人机交互和用户体验,后端侧重于业务逻辑和大规模数据处理。理论上,面向用户的产品里,所有问题(包括产品、设计、后端、甚至看不见的问题)的表现形式,都会暴露在前端,而只有部分问题(数据问题、计算问题、安全问题等)暴露在后端,这就意味着前端起到了至关重要的承载和连接作用。 一、前端开发流程 需求评审 一般在做需求评审时,PRD里只有交互稿,尚未有视觉稿。…

    2023年1月18日
    2.5K0

发表回复

登录后才能评论