掌握使用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>
<body>vdiv id="con tai ner">
<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>
<title>贵美商城</title>
<style type="text/css">
#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>
<l i nk rel="stylesheet" href="css/layout.css"type="text/css"/>
</head>
<body>
<div id="co ntai ner">
<div id="header">
<divclass="me nu">
<ul>
<l i class="pic5"><a herf="#"> 注册</a>v/l i>
<l i class="pic5"><a herf="#"> 登陆</a>v/l i>
<l i><aherf="#"> 设位首页</a></l i>
<l i class="pic4"></l i>
<l i><a herf="#"> 加入收藏</ax/l i>
<l i class="pic3"></l i>
<l i><aherf="#">
帮助中心</a>v/l i>
<l i class="pic2"></l i>
<l i><aherf="#"> 购物车v/a>v/| i><l i class="pic1"></l i>
</ul>v/div>
<div class="hel lo">
</div>
港云网络官方网站商家简介港云网络成立于2016年,拥有IDC/ISP/云计算资质,是正规的IDC公司,我们采用优质硬件和网络,为客户提供高速、稳定的云计算服务。公司拥有一流的技术团队,提供7*24小时1对1售后服务,让您无后顾之忧。我们目前提供高防空间、云服务器、物理服务器,高防IP等众多产品,为您提供轻松上云、安全防护。点击进入港云网络官方网站港云网络中秋福利1元领【每人限量1台】,售完下架,活...
Hostodo商家算是一个比较小众且运营比较久的服务商,而且还是率先硬盘更换成NVMe阵列的,目前有提供拉斯维加斯和迈阿密两个机房。看到商家这两年的促销套餐方案变化还是比较大的,每个月一般有这么两次的促销方案推送,可见商家也在想着提高一些客户量。毕竟即便再老的服务商,你不走出来让大家知道,迟早会落寞。目前,Hostodo有提供两款大流量的VPS主机促销,机房可选拉斯维加斯和迈阿密两个数据中心,且都...
麻花云怎么样?麻花云公司成立于2007年,当前主打产品为安徽移动BGP线路,数据中心连入移动骨干网。提供5M,10M大带宽云主机,香港云服务器产品,数据中心为香港将军澳机房,香港宽频机房 cn2-GIA优质线路、采用HYPER-V,KVM虚拟技术架构一、麻花云官网点击直达麻花云官方网站合肥网联网络科技有限公司优惠码: 专属优惠码:F1B07B 享受85折优惠。最新活动 :双11 云上嗨购 香港云主...