310.简约清新的服装设计网页大学生期末大作业 Web前端网页制作 html+css

最新推荐文章于 2024-08-09 10:57:46 发布

仙女网页制作

最新推荐文章于 2024-08-09 10:57:46 发布

阅读量1k

点赞数 12

分类专栏： Web网页设计实例服装文章标签：前端 html html5 javascript css jquery xhtml

本文链接：https://blog.csdn.net/A240307/article/details/139847716

版权

Web网页设计实例同时被 2 个专栏收录

788 篇文章

订阅专栏

服装

10 篇文章

订阅专栏

欢迎光临仙女的网页世界！这里有Web前端网页制作的各行各业的案例，样式齐全新颖，并持续更新！感谢CSDN，提供了这么好的知识学习、技术交流的平台，让我们在这里相遇，小伙伴们，来吧，让我们一起开启Web前端网页制作的奇妙之旅！

说起Web前端，大学开启这扇技术之门以来，一切起始于兴趣爱好和专业钻研。自16年中大研究生毕业步入社会工作以来，才真正开启了这段奇妙的旅行！在一次次需求分析、成品交付和客户服务的过程中，进行了一次又一次的知识应用的实践和验证。学以致用，实践出真知！从最初的Web前端的迷途小书童到如今的技术专家，多年的服务客户和服务大学生的实践经验，早就驾轻就熟！

奇妙之处在于：当你得到客户的认可、公司的赞赏和同事的敬仰，尤其是业余时间为广大的大学生提供各种各样的帮助和指引，学弟学妹们一致好评，认为学姐是他们的榜样的时候，你会发现，知识的应用除了体现自身价值，还能实现自我满足！这种感觉是相当奇妙的！

我在CSDN的奇妙旅行，除了学习其他知识和持续发布优质的网页实例之外，后续时间允许的情况下，我会发布前端相关知识的学习和应用的教程。目前提供的服务类型包括：Web前端网页制作的专题研究辅导、网页定制、大学生课程作业辅导、毕设辅导、网页模板源码、教程资料、技术咨询，以及其他有偿或无偿的服务。如有需要，欢迎随时咨询！能满足你们所需，是我的荣幸！

非常感谢大家的关注和点赞，你们的关注和点赞是我持续创作的动力，谢谢！

一、网页概述

本实例应用html+css： 代码简短，适用于大学生网页课程作业设计。本网页支持如Dreamweaver、HBuilder、Text 、Vscode 等任意html编辑软件进行编辑修改；支持包括IE、Firefox、Chrome、Safari主流浏览器浏览。

二、网页文件

本网页实例共包含5个页面：

三、网页效果

以下是本篇文章正文内容，下面案例仅供参考（节选示例）：

四、代码展示

1.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="style/style.css" rel="stylesheet" type="text/css">
<link href="style/index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="main">

<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="nav">
<ul class="nav_menu">
<li class="nav_menu-item"><a href="index.html" >首页</a></li>
<li class="nav_menu-item"><a href="zhuanti.html" >专题简介</a>
</li>
<li class="nav_menu-item"><a href="sheji.html" >设计展示</a>
</li>
<li class="nav_menu-item"><a href="jingpin.html" >大师精品</a>

</li>
<li class="nav_menu-item"><a href="lianxi.html" >联系我们</a></li>
</ul>
</div>
</div>

<div class="wrap" id="wrap">
<img src="images/banner1.jpg" alt="">

</div>

<div class="sbox1">
<h2>专题简介</h2>
<h2>Introduction</h2>
<img src="images/img01.jpg" />
</div>

<div class="sbox2">
<div class="bx1">
<div class="bx1-left"><img src="images/img02.jpg" /></div>
<div class="bx1-right">
<div class="bxbox mabot30">
<div class="tit"><h2>行业</h2></div>
<p>服装设计是设计服装款式的一种行业，</p>
<p>服装设计过程"即根据设计对象的要求进</p>
<p>行构思，并绘制出效果图、平面图，再根</p>
<p>据图纸进行制作，达到完成设计的全过程"。</p>
<br />
<p><a href="#">更多详情>></a></p>
</div>

<div class="bxbox">
<div class="tit"><h2>设计</h2></div>
<p>设计是物质生产和文化创造的首要环</p>
<p>节。它总是以一定的文化形态为中介。</p>
<p>例如，运用相似的服装设计构思，不同</p>
<p>的社会规范也会产生完全不同的设计风格。</p>
<br />
<p><a href="#">更多详情>></a></p>
</div>
</div>
</div>
<div class="bx2"><img src="images/img03.jpg" /></div>
</div>

<div class="sbox3"><img src="images/img04.jpg" /></div>

<div class="footer">
<div class="foot">
<div class="foot-left">
<h2>联系方式</h2>
<p>联系地址：服装设计地址   邮编：0055</p>
<p>邮箱：88888.@163.com</p>
<p>电话：88888888</p>
</div>
<div class="foot-right">
<ul>
<li><img src="images/foot1.jpg" /><p>扫一扫关注微信公众号</p></li>
<li><img src="images/foot2.jpg" /><p>扫一扫了解更多详情</p></li>
</ul>
</div>
</div>
<div class="banquan">
<p>服装设计 Copyright@ 2019-2023 </p>
<p>版权与免责声明 | 服装设计 </p>
</div>
</div>
</div>
</body>
</html>

...

2.CSS

代码如下（节选示例）：

@charset "utf-8";
/* CSS Document */
.wrap {
width:100%;
   height:703px;
   position:relative;
   overflow:hidden;
}

.sbox1{ height:217px; margin-top:60px;text-align:center; }
.sbox1 h2{ color:#0a5783; font-size:26px; font-family:"宋体"; line-height:35px; height:35px;}
.sbox2{ height:904px; margin-top:86px; background:url(../images/bg01.jpg) no-repeat bottom left;}
.sbox2 .bx1{ width:815px; height:535px; margin:0 auto; }
.sbox2 .bx1-left{ width:530px; height:532px; float:left; margin-right:30px;}
.sbox2 .bx1-right{ width:252px; height:532px; float:left;}
.bxbox{ width: 252px;
height: 240px;
margin-bottom: 30px;
background: #cbd7d9;
padding-top: 10px;}
.tit{ width: 108px;
height: 73px;
background: url(../images/bg02.png) no-repeat;
margin: 0 auto; margin-top:10px; margin-bottom:10px;}
.tit h2{ text-align: center;
width: 30px;
color: #FFF;
font-size: 16px;
margin-left: 37px;
padding-top: 15px;}
.bxbox p{ font-size: 12px;
line-height: 20px;
text-align: center;}
.bxbox p a{ color:#3a6391; margin-top:20px;}
.mabot30{ margin-bottom:30px;}
.sbox2 .bx2{ width:1110px; height:250px; background:#345885; margin-top:75px; float:right; margin-right:2px;}
.sbox3{ height:88px;}