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

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

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

  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

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

    2018年10月24日
    2.2K0
  • 那些漂亮的网页banner,用的什么字体?

    banner的字体选用要根据banner的主题,去挑选,因为字体本身也是有性格的。 一、稳定型(协调,齐全,稳定,高质) 微软雅黑、冬青黑体、宋体、华文细黑 方正正中黑 方正兰亭系列 二、刚硬,锐利,清晰,强烈 造字工坊力黑体 造字工坊版黑体 造字工坊劲黑体 锐字逼格锐线体简 张海山锐线体 华康儷金黑 蒙纳超刚黑体 (更适用大气,热烈,权威,声明等主题) 三…

    2019年10月22日 网页设计
    5.1K0
  • 怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载

    字体版权一直是很多设计师的雷区,一不小心就容易触犯。125建设网和大家一起来弄清楚:免费可商用字体到底有哪些?怎么知道哪些字体是侵权的? 怎么知道哪些字体是侵权的? 可以在360查字体:https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的,哪些是商用需要授权的。 免费可商用字体有哪些? 1. 思源黑体(推荐) 思源黑体…

    2023年1月18日 网页设计
    9530
  • 网页制作常用特殊符号大全

    网页常用特殊符号大全-最全的网页制作特殊符号。在做网页时经常会用到一些特殊符号,本文汇总了所有常用网页制作时用到的特殊符号包括18禁、爱心符号、货币符号、箭头符号、日语字符、 皇冠符号、emoji符号等。

    2018年2月19日
    6.7K0
  • 6个技巧让你的版面设计的脱颖而出!

    优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。

    2018年10月2日
    3.4K0

发表回复

登录后才能评论