练习一：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
微信扫一扫 
支付宝扫一扫