2021-11-12‘穿搭速递’首页制作

html制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../css/style8.css"  type="text/css" rel="stylesheet" />
</head><body>
<!--导航-->
<div id="head"><ul class="nav"><li><img src="../项目5/images/logo.png" /></li><li><a href="#">穿搭速递</a></li><li><a href="#">时尚大片</a></li><li><a href="#">星着装</a></li><li><a href="#">时尚圈</a></li><li><a href="#">时尚专栏</a></li><li><a href="#">会员/登陆</a></li></ul>
</div>
<!--banner-->
<div id="banner">
<img src="../项目5/images/banner.jpg" />
</div>
<div id="fasion"><h2>潮流前沿</h2><div class="current"><dl><dt class="match_1"></dt><dd class="current01">潮流饰品</dd><dd class="current02"><a href="#">快速购买通道</a></dd></dl><dl><dt class="match_2"></dt><dd class="current01">时尚女鞋</dd><dd class="current02"><a href="#">快速购买通道</a></dd></dl><dl><dt class="match_3"></dt><dd class="current01">精品包包</dd><dd class="current02"><a href="#">快速购买通道</a></dd></dl><dl><dt class="match_4"></dt><dd class="current01">百搭衣帽</dd><dd class="current02"><a href="#">快速购买通道</a></dd></dl></div>
</div>
<div id="footer"><p>Copyright@2006-2016 CHAOLIUFUSHIcom, All right reserved.</p><p>2001-2008,版权所有 潮流服饰85cp 备 13385453</p>
</div>
<div></div>
<div></div>
</body>
</html>

css制作

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;list-style:none;
}
body{background-color:#fff9ed;font-family:"微软雅黑";font-size:14px;
}
#head{width:100%;height:128px;background:url(../%E9%A1%B9%E7%9B%AE5/images/head_bg.jpg) repeat-x;border-bottom:3px solid #d5d5d5;/*下边框*/
}
.nav{width:980px;margin:0 auto;
}
.nav li{float:left;
}
.nav li a{display:inline-block;/*将a转换为行内块*/width:119px;height:91px;text-align:center;line-height:70px;
}
a:link,a:visited{text-decoration:none;/*去除链接下划线*/color:#fff;font-size:16px;
}
a:hover{background:url(../%E9%A1%B9%E7%9B%AE5/images/xuanfu.png);/*鼠标悬浮图标*/
}
#banner{width:980px;height:373px;margin:0 auto;background-color:red;
}
#fasion{width:980px;margin:0 auto;
}
h2{width:259px;height:45px;background-color:#ea6c46;font-size:20px;font-weight:100;color:#fff;/*文字颜色*/text-align:center;/*文字水平居中*/line-height:45px;/*垂直方向居中*/margin-top:80px;
}
.current{width:958px;height:342px;background:#fff;border:1px solid #dcd2ba;padding:13px 0 0 20px;
}
.current dl{width:229px;height:330px;border:1px solid #dcd2ba;float:left;margin-right:5px;
}
.current dt{width:229px;height:212px;border:1px solid #dcd2ba;
}
.match_1{background:url(../%E9%A1%B9%E7%9B%AE5/images/match01.jpg) center center no-repeat;
}
.match_2{/*设dt背景图*/background:url(../%E9%A1%B9%E7%9B%AE5/images/match02.jpg) center center no-repeat;
}
.match_3{background:url(../%E9%A1%B9%E7%9B%AE5/images/match03.jpg) center center no-repeat;
}
.match_4{background:url(../%E9%A1%B9%E7%9B%AE5/images/match04.jpg) center center no-repeat;
}
.current01{/*第一个dd*/width:229px;height:66px;background-color:#fff;text-align:center;line-height:66px;color:#7a7a7a;font-size:22px;
}
.current02{width:140px;height:38px;background:#f3734e url(../%E9%A1%B9%E7%9B%AE5/images/gouwu.jpg) no-repeat;padding-left:60px;line-height:38px;margin-left:14px;color:#fff;
}
#footer{width:100%;height:103px;background:#020202;color:#fff;line-height:26px;text-align:center;padding-top:50px;margin-top:65px;
}

2021-11-12‘穿搭速递’首页制作相关推荐

“穿搭速递”首页制作
"穿搭速递"首页制作一.实验名称: 二.实验日期: 三.实验目的: 四.实验内容: 五.实验步骤: 六.实验结果: 七.源程序: 八.心得体会: 一.实验名称: "穿搭 ...
“穿搭速递”——网页制作案例
你们想要的图片都在这里了英文不好随便命名,但是都是对应好的,看标签写样式这是html代码 <!DOCTYPE html> <html><head><met ...
网页设计项目5穿搭速递_小个子穿搭指南，学以下六种服装的穿搭超时髦，轻松驾驭各种风格...
小个子穿搭指南,学以下六种服装的穿搭超时髦,轻松驾驭各种风格相信大多数小个子女生在穿搭上,都有着不少的烦恼吧!身材比例的不足,总是会有着不小的限制,对于许多穿搭而言,也是会显得并没有那么的合适.而对 ...
2021/11/12
复盘: 7 : 50 − 9 : 30 7:50 - 9 : 30 7:50−9:30 审完题后 , 开始肝 T 1 T1 T1. T 1 T1 T1推出来了性质:后五名所得奖励在按顺序排好后一定挨在 ...
C语言中输出两个数中的较大值（2021.11.12）
方法一 if else语句 #include <stdio.h> int main(){ int a, b, max;scanf("%d %d", &a, & ...
中国互联网大厂市值排名单位：亿美元，市值截取时间 2021.11.12
互联网大厂市值排名一线大厂(3家) 新一线大厂(7家) 二线大厂(10家) 三线互联网(30家) 一线大厂(3家) 騰讯(6000) 阿里(4550) 字节(估 3700) 新一线大厂(7家) 美团 ...
Imagination官方信息速递2021年12月期
Imagination在线课程上新! 深入解读业界首个移动端光线追踪GPU架构 PowerVR Photon 架构有哪些全新性能?与软件级光线追踪相比,硬件级的光线追踪优势在哪儿?被称为业界首个移动端 ...
首页推荐流支持快捷修改兴趣标签，问答支持展示gif【2021.11.8】
hello,大家好,这里是「CSDN产品周报」第17期.本次更新主要涉及首页和问答两个产品模块,具体细节请往下看. 一.首页优化 1.「推荐」信息流新增「修改兴趣标签」按钮从用户需求的角度考虑,对内 ...
HTML5期末大作业：在线电影网站设计——电影速递网(12页面)含登录注册HTML+CSS+JavaScript
HTML5期末大作业:在线电影网站设计--电影速递网(12页面)含登录注册HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...

2021-11-12‘穿搭速递’首页制作

2021-11-12‘穿搭速递’首页制作相关推荐

最新文章

热门文章