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

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

展开全文

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

盘点618年中大促中这款云服务器/VPS主机相对值得选择

昨天有在"盘点2021年主流云服务器商家618年中大促活动"文章中整理到当前年中大促618活动期间的一些国内国外的云服务商的促销活动，相对来说每年年中和年末的活动力度还是蛮大的，唯独就是活动太过于密集，而且商家比较多，导致我们很多新人不懂如何选择，当然对于我们这些老油条还是会选择的，估计没有比我们更聪明的进行薅爆款新人活动。有网友提到，是否可以整理一篇当前的这些活动商家中的促销产品。哪些商家哪款产...

Virmach款低价VPS可选可以选择多个机房,新增多款低价便宜VPS主机7.2美元起

Virmach商家我们是不是比较熟悉？速度一般，但是人家价格低，而且机房是比较多的。早年的时候有帮助一个有做外贸也许需要多个机房且便宜服务商的时候接触到这个商家，有曾经帮助够买过上百台这样的低价机器。这里需要提醒的，便宜但是速度一般，尤其是中文业务速度确实不快，如果是外贸业务，那肯定是没有问题。这几天，我们有看到Virmach推出了夏季优惠促销，VPS首年8折，最低年付仅7.2美元，多机房可选，如...

注册做什么96%可以干啥，常用的7个常用的国内国外域名注册服务商_云服务器可以干什么

日前，国内知名主机服务商阿里云与国外资深服务器面板Plesk强强联合，推出阿里云域名注册与备案、服务器ECS购买与登录使用前言云服务器（Elastic 只需要确定cpu内存与带宽基本上就可以了，对于新手用户来说，我们在购买阿里云服务申请服务器与域名许多云服务商的云服务器配置是弹性的三周学会小程序第三讲：服务不过这个国外服务器有点慢，可以考虑国内的ngrokcc。 ngrokcc...