《网页设计与制作项目教材》-Chapter05穿搭速递 -20210605

最新推荐文章于 2023-02-09 16:35:39 发布

i see the future

最新推荐文章于 2023-02-09 16:35:39 发布

阅读量4.2k

点赞数 17

分类专栏： HTML/CSS/JS/Bootstrap 文章标签： html css

HTML/CSS/JS/Bootstrap 专栏收录该内容

98 篇文章 8 订阅

订阅专栏

这是一个关于网页设计的示例，展示了如何使用HTML和CSS创建一个时尚穿搭网站。HTML代码定义了页面结构，包括头部导航、主要内容区域和页脚。CSS样式表用于设置元素的布局和视觉效果，如背景图片、颜色、边框和链接样式。网站包含导航栏、内容区块、潮流前沿展示以及快速购买通道等元素，整体设计注重用户体验和视觉吸引力。

摘要由CSDN通过智能技术生成

用列表的形式去写网页。
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/style05.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">
    <ul class="nav">
        <li class="logo"><img src="images/logo.png" alt=""></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>
<div id="content">
    <div class="banner"><img src="images/banner.jpg" alt=""></div>
    <div class="style_bg">
        <div class="style">
            <dl>
                <dt class="left1"></dt><dd class="left2"><a href="#">明星风尚</a></dd>
                <dt class="left3"></dt><dd class="left4"><a href="#">时尚博主</a></dd>
            </dl>
            <dl>
                <dt class="center1"></dt><dd class="center2"><a href="#">流行搭配</a></dd>
                <dt class="center3"></dt><dd class="center4"><a href="#">精选秀场</a></dd>
            </dl>
            <dl class="third">
                <dt class="right1"></dt><dd class="right2"><a href="#">环球街拍</a></dd>
            </dl>
        </div>
    </div>
    <h2>潮流前沿 / Tidal current</h2>
    <div class="current">
        <dl>
            <dt class="match_1"></dt>
            <dd class="current01">潮流饰品</dd>
            <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
        </dl>
        <dl>
            <dt class="match_2"></dt>
            <dd class="current01">时尚女鞋</dd>
            <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
        </dl>
        <dl>
            <dt class="match_3"></dt>
            <dd class="current01">精品包包</dd>
            <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
        </dl>
        <dl>
            <dt class="match_4"></dt>
            <dd class="current01">百搭衣帽</dd>
            <dd class="current02"><a class="three" href="#">快速购买通道</a></dd>
        </dl>
    </div>
</div>
<div id="footer">
    <p>Copyright © 2006-2016 CHAOLIUFUSHIcom, All rights reserved.</p>
    <p>2001-2018，版权所有 潮流服饰 85CP备13385453</p>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;list-style: none;}
body{background:#fff9ed;  font-family:"微软雅黑"; font-size:14px; }
a:link,a:visited{text-decoration: none; color:#fff;font-size: 16px;}
#header{
    width: 100%;
    height: 128px;
    background: url("../images/head_bg.jpg") repeat-x;
    border-bottom: 3px solid #d5d5d5;
}
.nav{
    width: 980px;
    margin: 0 auto;
}
li{float: left;}
li a{
    display: inline-block;
    height: 91px;
    width: 119px;
    text-align: center;
    line-height: 70px;
}
li a:hover{background: url("../images/xuanfu.png") no-repeat;}
#content{
    width: 980px;
    margin: 0 auto;
}
.style_bg{
    width: 908px;
    height: 330px;
    background: #ec6e47;
    padding: 10px 36px 5px;
}
.style{
    width: 892px;
    height: 314px;
    background: #fff;
    padding: 8px 10px 8px 6px;
}
.style dl{
    width: 279px;
    height: 313px;
    float: left;
    margin-left: 4px;
}
/*给出widtd background的photo才会显示*/
.style .third{width:322px;}
.style dt,.style dd{float: left;}
.style .left1,.style .left3,.style .center1,.style .center3{width: 162px;}
.style .left2,.style .left4,.style .center2,.style .center4{width: 117px;}
.style .left1,.style .left2,.style .center1,.style .center2{margin-bottom: 8px;}
.style .left1{
    height: 169px;
    background: url("../images/pic01.jpg") no-repeat;
}
.style .left2{
    height: 169px;
    line-height: 169px;
}
.style .left3{
    height: 137px;
    background: url("../images/pic02.jpg") no-repeat;
}
.style .left4{
    height: 137px;
    line-height: 137px;
}
.style .center1{
    height: 117px;
    background: url("../images/pic03.jpg") no-repeat;
}
.style .center2{
    height: 117px;
    line-height: 117px;
}
.style .center3{
    height: 188px;
    background: url("../images/pic04.jpg") no-repeat;
}
.style .center4{
    height: 188px;
    line-height: 188px;
}
.style .right1{
    width: 205px;
    height: 314px;
    background: url("../images/pic05.jpg") no-repeat;
}
.style .right2{
    width: 117px;
    height: 314px;
    line-height: 314px;
}
.style a{
    display: block;
    background-color: #242424;
    text-align: center;
}
h2{
    width: 250px;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: #ec6e47;
    margin-top: 70px;
    text-align: center;
    font-size: 20px;
    font-weight: 100;
}
.current{
    width: 958px;
    height: 342px;
    background-color: #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-bottom: 1px solid #dcd2ba;
}
.current01{
    width: 229px;
    height: 66px;
    background: #fff;
    line-height: 66px;
    color: #7a7a7a;
    font-size: 22px;
    text-align: center;
}
.current02{
    width: 140px;
    height: 38px;
    background:#f3734e url(../images/gouwu.jpg) left center no-repeat;
    line-height: 38px;
    margin: 0 14px;
    color: #fff;
    padding-left: 60px;
}
.match_1{background: url(../images/match01.jpg) center center no-repeat;}
.match_2{background: url(../images/match02.jpg) center center no-repeat;}
.match_3{background: url(../images/match03.jpg) center center no-repeat;}
.match_4{background: url(../images/match04.jpg) center center no-repeat;}

.current a{display:inline-block; width:180px; height:38px;}








#footer{
    width: 100%;
    height: 100px;
    background: #242424;
    color: #fff;
    text-align: center;
    padding-top: 50px;
    line-height: 30px;
    margin-top: 65px;
}