首页综合练习网站首的整体布局商品分类版块

网站布局时间:2021-02-12 阅读:()

掌握使用DIV+CSS页面布局的方法实现网站首页。

实验所需软件

Ultra Edit

实验内容

1练习——贵美首页的整体布局。

需求说明

重新实

现贵美

2、练习贵美商品分类版块。

需求说明在上一练习基础上根据提供的素材重新实现贵美左边的商品分类版块。如

图

1.2所示。

 1 实现页面HTML吉构

2实现CSS

1练习一一贵美首页的整体布局代码如下:<html>

<head>

<title>box</title>vstyle type="text/css">

★container

{width:980;margi n:0px auto;

实

验 }

内

容 #header

由

学 {

生

填 height:136px;

backgro un d:#ccc;

}

#ma in1

{float: left;height:300px;width:240px;backgro un d:gree n;

#mai n2

{float: left;height:300px;width:500px;backgro un d:blue;}

#mai n3{float:right;height:300px;width:240px;backgro un d:yel low;

}

#footer

{clear:both;height:136px;backgro un d-color:#ccc;}v/style>

</head>

<div id="header">header

</div>

<divid="mai n1">

商品分类cat

</div>

<divid="mai n2">

内容content 

</div>

<divid="mai n3">右侧sidebar  </div><d iv id="footer">footer

</div>

v/div>v/body><html>

运行结果如下:rjEsder

2、练习- -贵美商品分类版块代码如下:

<html>

<head>

#container{width:1000px;margi n:auto;

width:100%; height:136px;backgro un d:url(images/logo.jpg)

#sidebar{ width:20%;

#foote r{width:100%; height:100px; backgrou nd:#ccc;

}v/style>

</head>

<body>

<divclass="me nu">

<ul>

帮助中心</a>v/l i>

</ul>v/div>

</div>

展开全文

首页综合练习网站首的整体布局商品分类版块相关文档

美国200G美国高防服务器16G，800元

美国高防服务器提速啦专业提供美国高防服务器，美国高防服务器租用，美国抗攻击服务器，高防御美国服务器租用等。我们的海外高防服务器带给您坚不可摧的DDoS防护，保障您的业务不受攻击影响。HostEase美国高防服务器位于加州和洛杉矶数据中心，均为国内访问速度最快最稳定的美国抗攻击机房，带给您快速的访问体验。我们的高防服务器配有最高层级的DDoS防护系统，每款抗攻击服务器均拥有免费DDoS防护额度，让您...

Megalayer优化带宽和VPS主机主机方案策略 15M CN2优化带宽和30M全向带宽

Megalayer 商家主营业务是以独立服务器和站群服务器的，后来也陆续的有新增香港、菲律宾数据中心的VPS主机产品。由于其线路的丰富，还是深受一些用户喜欢的，有CN2优化直连线路，有全向国际线路，以及针对欧美的国际线路。这次有看到商家也有新增美国机房的VPS主机，也有包括15M带宽CN2优化带宽以及30M带宽的全向线路。Megalayer 商家提供的美国机房VPS产品，提供的配置方案也是比较多，...

Krypt（$120/年）,2vCPU/2GB/60GB SSD/3TB

Krypt这两天发布了ION平台9月份优惠信息，提供一款特选套餐年付120美元(原价$162/年)，开设在洛杉矶或者圣何塞机房，支持Windows或者Linux操作系统。ion.kryptcloud.com是Krypt机房上线的云主机平台，主要提供基于KVM架构云主机产品，相对于KT主站云服务器要便宜很多，产品可选洛杉矶、圣何塞或者新加坡等地机房。洛杉矶机房CPU：2 cores内存：2GB硬盘：...