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

网站布局时间: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>

展开全文

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

TMThosting：VPS月付55折起,独立服务器9折,西雅图机房,支持支付宝

TMThosting发布了今年黑色星期五的促销活动，即日起到12月6日，VPS主机最低55折起，独立服务器9折起，开设在西雅图机房。这是一家成立于2018年的国外主机商，主要提供VPS和独立服务器租用业务，数据中心包括美国西雅图和达拉斯，其中VPS基于KVM架构，都有提供免费的DDoS保护，支持选择Windows或者Linux操作系统。Budget HDD系列架构CPU内存硬盘流量系统价格单核51...

搬瓦工(季付46.7美元)新增荷兰(联通线路)VPS,2.5-10Gbps

搬瓦工最近新增了荷兰机房中国联通(AS9929、AS4837)线路的VPS产品，选项为NL - China Unicom Amsterdam(ENUL_9)，与日本软银和洛杉矶(DC06)CN2 GIA配置一致可以互换，属于高端系列，2.5Gbps-10Gbps大带宽，最低季付46.7美元起。搬瓦工VPS隶属于老牌IT7公司旗下，主要提供基于KVM架构VPS主机，数据中心包括美国洛杉矶、凤凰城、纽...

VPSDime7美元/月，美国达拉斯Windows VPS，2核4G/50GB SSD/2TB流量/Hyper-V虚拟化

VPSDime是2013年成立的国外VPS主机商，以大内存闻名业界，主营基于OpenVZ和KVM虚拟化的Linux套餐，大内存、10Gbps大带宽、大硬盘，有美国西雅图、达拉斯、新泽西、英国、荷兰机房可选。在上个月搞了一款达拉斯Linux系统VPS促销，详情查看：VPSDime夏季促销：美国达拉斯VPS/2G内存/2核/20gSSD/1T流量/$20/年，此次推出一款Windows VPS，依然是...