实现步骤用css布局极目商城_第1页
实现步骤用css布局极目商城_第2页
实现步骤用css布局极目商城_第3页
免费预览已结束，剩余6页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

css布局极目商10第一步：规划，完成后效果基本布局如下图，其分为六个部 Width760pxHeightsearch搜索全站的功能，包 的MainNavigation左侧分 Height:Changesdependingon幻灯片放映效果的（暂以静态代替第二步：创建html模板及文 创建html模板，将其保存为index.html,并创建文件夹创建的大框：建立一个宽100%的盒子，它将包 的所有元素。在html文件的<body></body>之间写<divid="o在css中设在css中设width:margin:08px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：]body{margin:0;padding:第三步：将分为六个div，网页基本布局的基础将“第一步”提到的六个部分都放入盒子中，在html文件中写入为了将六个部分区分开来，这六个部分用不同的背景颜色标示出来，在css文件写入#page_container{width:100%;margin:0auto;}#header{height:30px;background-color:aqua;}#searcher{height:88px;background-color:black;}#navi{height:40px;background-color:fuchsia;} #adv{background-color:maroon;}#right_view{background-color:navy;} height:280px;}省略adv，right的截第四步：设置left、adv、right的宽度，及浮动方式为 {background-color:lime;width:25%;float:left;}#adv{background-color:maroon;width:50%;float:left;}#right_view{background-color:navy;width:25%;float:left;}第五步：创建一个存放内容div，用来存放除header以外的部分，用来控制页面边距<div<div<div<div<div<div <div<divid="right_view">Rightmargin-}第七步：替换header的背景2、填header的内容页面代码<div<ul<liclass="li_1"><b></b><ahref="">收藏极目商城<ul<liclass="li_1"><ahref="">[登陆]</a>&;&;<ahref="">[免费]</a></li><liclass="li_1"><ahref="">订单<liclass="li_1"><ahref="">Css代码3、改变超带下划线的格a:link,a:visited{color:#333;text-decoration:none;}a:hover{color:#F00;text-decoration:underline;}4、星星及分割线（钩子模式）<ul<liclass="li_1"><bclass="b1"></b><ahref="">收藏极目商城<ul<liclass="li_1">欢迎来到极目商城！<ahref="">[登陆]</a>&;&;<ahref="">[免费]</a></li><liclass="li_2"><ahref="">订单<liclass="li_2"><ahref="">Css代码.li_2{float:left;background:url(../images/2.png)no-repeat-230px-320px;padding:2px background:url(../images/1.png)-57px-289px;}5、改body字体的样body{margin0;padding0;background-color:#FFFcolor:#333;font-family:Arial,Verdana,宋体";font-size:12px;font-style:normal;font-weight:normal;font-variant:normal;background-image:none;line-height:150%;}第八步：替换Search搜索部1掉所有的元素边框ding:0px;margin:0px;border:0;}2页面代<div3Css

<divclass="fl"<divclass="i-<bclass="l-<bclass="r-<div<inputclass="text"type="text"<inputclass="button"type="button"value="<divid="hotwords">热门搜索：<ahref="">雷蛇鼠标<divid="shop-<b<ahref="">去购物车结算<b#logo{width:350px;height:80px;#searcher.i-search{height:36px;margin-bottom:3px;position:relative;width:498px;.i-search.l-border{position:absolute;left:-3px;width:4px;height:36px;background:url(../images/1.png)no-repeat-81px-470px;}.i-search.r-border{position:absolute;right:-3px;width:3px;height:36px;background:url(../images/1.png)no-repeat0px-470px;}#search.form{height:30px;overflow:hidden;padding:3px0px;background:url(../images/1.png)repeat-x0px-357px;position:relative;}#search.text{background:url(../images/1.png)repeat-x0px-360px;height:20px;color:#999;line-height:20pxpadding:5pxfont-family:arial,"宋体font-size:14pxwidth:406pxborder:none;position:absolute;top:3px;}#search.button{background:url(../images/1.png)repeat-x0px-395px;width:78px;font-weight:bold;font-size:14px;border:none;height:30px;position:absolute;top:3px;right:0px;#search#hotwords{height:18px;padding:5px0px0px0px;color:#999;position:relative;top:45px;left:-500px;}#search#hotwordsa{#shop-cart{background:url(../images/2.png)0px-252px;width:80px;height:30px;text-align:center;padding:0px16px0px35px;position:absolute;z-index:3;right:150px;#shop-carta{line-#shop-cartb{background:url(../images/1.png)-52px-275px;overflow:hidden;position:absolute;top:9px;width:5px;height:9px;right:10px;}<div<divid="all_item"><ahref="">全部商品分类<ul<liclass="curr"<ahref="">首页<liid="nav-<ahref="">服装城<liid="nav-<ahref="">团购Css代码

#navi{height:40px;background:url(../images/1.png)0px-315px;}}#all_itemheight:40px;width:85px;line-height:40px; font-family:"yahei";font-size:15px;font-style:normal;font-weight:bold;text-decoration:none;}#navi#naviulli{height:40px; position:relative;background:url(../images/1.png)no-repeat--}#naviulliheight:40px;width:85px;line-height:40px;position:absolute;top:0px;left:0px;text-align:center;color:#fff;font-family:"yahei";font-size:15px;font-style:normal;font-weight:bold;#navi.curra{background:url(../images/1.png)repeat-x0px-161px;z-index:1;}#navia:hover{background:url(../images/1.png)repeat-x0px-161px;z-index:1;}<div

<!--列表项循环开始<a<span<span<spanclass="intro">这是音像的说明，或者显示二级菜

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论