HTML网页制作——设计系学生静态HTML网页设计作品

HTML网页制作——设计系学生静态HTML网页设计作品

网站主题为荷兰风格派，主要介绍荷兰风格设计的网站，由设计系学生亲自设计，独立开发网页，适用于学生自己的作品。

网站效果视频：

荷兰风格派（设计系学生网页设计成品）

网站效果图（共15页）其一如下所示：

参考代码（html）

 <header><nav class="navBox"><div class="left"><img src="../img/logo/logo.jpg" alt=""></div><div class="right"><ul><li><a href="../index.html" style="color: #fff; ">起源</a></li><li><a href="./people.html" style="color: #fff; ">人物</a></li><li><a href="./work copy.html " style="color: #fff; ">作品精选</a></li><li><a href="./chengjiu.html" style="color: #fff; ">成就</a></li><li><a href="./chengjiu1.html" style="color: #fff; ">再设计</a></li><li><a href="./news.html" style="color: #fff; ">新闻</a></li><li><a href="./user.html" style="color: #fff; ">个人中心</a></li><li>EN/CN</li><li><a href="./login.html" style="color: #fff; ">登陆/注册</a></li></ul></div></nav></header><div class="container"><!-- <img src="../img/02起源/1.jpg" alt=""> --></div><!-- 任务区域 --><div class="people banner" ><div class="boxx"><div class="le"><img src="../img/03人物/何塞·佩德罗·科斯蒂廖洛.jpg" alt=""></div><div class="re"><p><a style="font-size: 1.3em; font-weight: 700;">De Stijl</a>china</p><p style="color: gray;">Peel away the essential shape, and you will get the style.</p><hr></div></div><div class="title"><div class="item" style="border-bottom:  3px solid yellow;">关于</div><div class="item">收藏</div><div class="item">评论和@</div></div><div class="boxxx"><div class="lef">about</div><div class="rig"><p>+0880 89696328</p><p>安徽省蜀山区史河路8号安徽大学江淮学院</p><p>简介</p><p><hr></p><p>我认为蒙德里安，杜斯伯格，里特维尔德这些大师在过去，当人们的生活充满与自</p><p>然的互动时，抽象性很容易达到;它在潜意识当中完成。然而当我们生活的与自然</p><p>相去甚远之后，抽象就需要经过努力才能完成。</p></div></div><div class="boxxxxx"><div class="leftt"><div class="leftttt"><div class="l"><img src="../img/03人物/何塞·佩德罗·科斯蒂廖洛.jpg" alt=""></div><div class="r">风格派调研组</div></div><div class="leftttt"><div class="l"><img src="../img/03人物/乔治·范通格鲁.jpg" alt=""></div><div class="r">风格派调研组</div></div><div class="leftttt"><div class="l"><img src="../img/03人物/塞萨尔·多梅拉.jpg" alt=""></div><div class="r">风格派调研组</div></div><div class="leftttt"><div class="l"><img src="../img/03人物/巴特·范德莱克.jpg" alt=""></div><div class="r">风格派调研组</div></div><div class="leftttt"><div class="l"><img src="../img/03人物/弗里茨·格拉纳.jpg" alt=""></div><div class="r">风格派调研组</div></div></div><div class="middlee"><p style="background-color: #EFEFEF;">取消关注</p><p style="background-color: #F7F7F7;">+</p><p style="background-color: #EFEFEF;">取消关注</p><p style="background-color: #F7F7F7;">+</p><p style="background-color: #EFEFEF;">取消关注</p><p style="background-color: #F7F7F7;">+</p><p>看看其他</p></div><div class="rightt"><img src="../img/15个人中心/2.jpg" alt=""><div class="boxxxxxx"><p>Activity</p><p>荷兰风格派周年纪念活动组织会</p><p>荷兰风格派再设计大赛</p><p>风格派线上交流活动</p></div></div></div></div></div><footer><div class="footer" style="height: 260px;"><p style="text-align: center; margin-bottom: 50px;"><div class="box"><img src="../img/logo/logo.jpg" alt=""><h3>荷兰风格派</h3></div></p><p>安徽省合肥市蜀山区史河路8号</p><p>027-87157587 , 027-87462184</p><p>邮箱:[e-mail]</p><p>线下活动,请提前预约</p><p><img src="../img/二维码/https___baike.baidu.com_item_荷兰风格派_266638.png" alt="" style="width: 100px; height:100px"></p><p>蒙德里安/杜斯伯格/里特维尔德</p></div></footer>

参考代码：(css)

*{margin: 0;padding: 0;}ul{list-style: none;}a{text-decoration: none;color: #000;}.banner{margin: 0 auto;width: 1200px;}/* 导航区域 */header{z-index: 9999;width: 100%;position: absolute;top: 30px;color: #fff;}.navBox{display: flex;}.left{flex: 30%;text-align: center;}.left img{width: 60px;height: 60px;}.right{flex: 70%;}.right ul{height: 60px;display: flex;}.right ul li{height: 60px;line-height: 60px;flex: 1;}.right ul li:hover{color: yellow;}/* 背景图区域 */.container{height: 120px;width: 100%;background-image: url("../img/02起源/1.jpg");}.people span{display: inline-block;font-weight: 700;font-size: 1.2em;margin: 80px 20px 30px 0;}.artical{width: 1000px;margin: 0 auto;text-align: center;}.human{display: flex;margin-top: 30px;margin-left: 80px;}/* 人物区域 *//* footer 区域 */.footer{top: 150px;position: relative;height: 200px;background-color: #000;color: #fff;text-align: center;padding: 50px 0 50px;}   .footer p{margin: 15px 0 ;font-size: 10px;color: rgb(197, 194, 194);text-align: center;}.footer .box{display: flex;position: absolute;top: 30px;left: 50%;transform: translateX(-50%);}.footer  img{width: 20px;height: 20px;vertical-align: middle;margin: 0 5px;}.boxx{display: flex;padding: 20px;}.le{flex: 20%;text-align: center;}.le img{width: 100px;height: 100px;border-radius: 50%;}.re{flex: 80%;line-height: 45px;}.title{text-align: center;}.item{margin-right: 20px;display: inline-block;}.boxxx{display: flex;background-color: #E1E1E1;margin-top: 20px;}.lef{flex: 30%;text-align: center;box-sizing: border-box;padding-top: 100px;}.rig{flex: 70%;line-height: 36px;}.boxxxxx{display: flex;}.leftttt{display: flex;}.leftt{flex: 25%;}.l{flex: 20%;text-align: center;}.l img{width: 50px;height: 50px;border-radius: 50%;}.r{flex: 80%;line-height: 50px;padding-left:10px ;margin-bottom: 10px;}.middlee{flex: 25%;}.rightt{flex: 50%;}.rightt img{width: 100%;height: 200px;}.middlee p{height: 50px;line-height: 50px;}.boxxxxxx{background-color: #EFEFEF;width: 200px;height: 200px;margin-left: 260px;line-height: 30px;}

tips(小提示)：

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

如：获取详细代码私信我嗷！