时间：2023-09-20 16:42:01 | 来源：网站运营
时间：2023-09-20 16:42:01 来源：网站运营
大一学生《Web编程基础》期末网页制作 HTML+CSS+JavaScript 网页设计实例 企业网站制作：HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
在线咨询
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"><!-- <link rel="stylesheet" href="css/iconfont.css"> --> <script language="JavaScript" src="js/iconfont.js"></script> <title>ONE PIECE</title></head><body> <header> <div class="navbar clearfix layout"> <a href="#" class="logo">ONE PIECE</a> <ul class="nav"> <li><a href="">Saying</a></li> <li><a href="1.html">Intro</a></li> <li><a href="2.html">Four emperor</a></li> <li><a href="3.html">Team</a></li> <li><a href="4.html">Contact</a></li> </ul> </div> <div class="introduce layout"> <h1>Welcome to the new world</h1> <h2>「我是要成為海賊王的男人」</h2> <a class="button" href="#Saying">START YOUR JOURNEY</a> </div> </header> <main class="layout"> <section id="Saying"> <h2>Saying</h2> <p>你们知道这片海洋的尽头，有着世界最珍贵的宝物吗？而且得到它的人就可以成为海贼王，是不是让人热血沸腾？前所未有的冒险正等着我们！</p> <ul class="clearfix"> <li> <span class="iconfont icon-fon1"></span> <h3>Title Language</h3> <p>这世界，没错！一个追求自由任凭选择的世界，就在每个人的眼前无限地延伸。如果我们的梦想可以引导你的方向的话，就去追寻吧，在名为信念的旗帜下！</p> </li> <li> <span class="iconfont icon-fon2"></span> <h3>Title Language</h3> <p>世代传承的意志、时代的变迁、人们的梦。这些都是阻挡不住的，只要人们继续追求自由的答案，这一切的一切都将永不停止。</p> </li> <li> <span class="iconfont icon-fon3"></span> <h3>Title Language</h3> <p>财富、名声、势力－－－拥有全世界财富的海贼王哥尔罗杰，他在临刑前的一句话，让人们趋之若鹜、奔向大海！</p> </li> </ul> </section> </main> <footer class="layout"> <p>Copyright © Your Website 2021</p> <div class="end"> <a href="#"> Privacy Policy</a> <a href="#"> Terms of Use</a> </div> </footer></body></html>/*reset*/*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; font-family:PilGi, "Imprint MT Shadow","Brush Script MT";}a{ text-decoration: none;}ul{ list-style: none;}/*reset*/.clearfix::after{ content: ' '; display: block; clear: both;}.layout{ width: 1100px; margin: 0 auto;}.button{ font-size: 20px; color: #fff; background: #f7ba3e; padding: 15px 25px; display: inline-block; border-radius: 5px;}.button:hover{ background-color: #fdc42e;}body,html{ height: 100%;}body{ font:14px/1.5 "微软雅黑"; background: #F7F7F7; color: #444;}header{ height: 100%; min-heigt:800px; background: #000 url("../image/bg.png") center center no-repeat; background-size: cover; position: relative; z-index: 2;}header::before{ content: ' '; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.3); z-index: -1;}header .logo{ float: left; color: #f7ba3e; font-size: 32px; margin-top: 10px;}header .nav{ float: right;}header .nav > li{ float: left; margin: 10px;}header .nav > li > a{ display: block; padding: 5px; border-radius: 4px; color: #fff; font-size: 16px;}header .nav > li > a:hover{ background: #f7ba3e;}header .introduce{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; color: #fff;}header .introduce > h1{ font-size: 32px;}header .introduce > h2{ font-size: 50px; margin-top: 20px;}header .introduce .button{ margin-top: 20px;}section{ margin-top: 100px; text-align: center; background-color: #F7F7F7;}section:first-of-type{ /*background-color: #FFF;*/ box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1);}section > h2{ font-size: 40px;}section > p{ margin-top: 10px; margin-bottom: 50px;}section > ul .iconfont{ font-size: 60px;}section > ul > li{ width: 33.33%; float: left; padding: 10px 20px;}section > ul p{ margin-top: 10px;}section .family figure{ width: calc(33.33% - 20px); margin: 10px; height: 400px; float: left; background-color: #fff; box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3); border-radius: 20px;}section .family a{ position: relative; display: block; height: 330px;}section .family img{ width: 100%; height: 100%; border-top-left-radius:20px ; border-top-right-radius:20px ;}section .family figcaption{ font-size: 18px; font-weight: bold; margin-top: 10px;}section .family p{ color: #666; margin-top: 5px; font-style: italic;}section .family a:hover::before { content: '⎈'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(253,208,72,0.8); color: #fff; font-size: 100px; display: flex; align-items: center; justify-content: center; border-top-left-radius:20px; border-top-right-radius:20px;}.describe{ display: block; margin-top: 50px; text-align: center; border-radius: 20px;}.down{ margin: 10px auto; list-style: none; display: flex; padding-left: 0; flex-direction: column; /*flex-wrap: wrap;*/ position: relative; z-index: 99;}.down:after{ content: ' '; display: block; height: calc(100% - 200px); width: 0; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; border:1px solid #ccc;}.down > li > span{ box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1); background-color: #fdc42e; border: 6px solid #eee; width:150px; height: 150px; color: #FFFFFF; border-radius: 50%; display: block; float:left; position:relative; right:50%;}.down > li{ display: block; width: 150px; height: 200px; float:left; position:relative; left:50%;}.down > li img{ height: 100%; width: 100%; border-radius: 50%; display: block;}.matter{ width: 300px; height: 100px; float:left; position:relative; top:-50%; right:-90%; font-size: 18px;}.matter-left{ float:right; position:relative; top:-50%; left:-180%;}.matter > p{ color: #999; font-style: oblique; font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:4;}.matter > h4,.matter > p{ float:left; margin: 0; text-align: left;}.matter-left > h4,.matter-left > p{ float:right; margin: 0;}section .group figure{ width: calc(33.33% - 60px); margin: 30px; height: 300px; float: left; background-color: #fff; box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.3); border-radius: 50%; border: 5px solid #fff;}section .group p{ position: relative; display: block; height: 100%;}section .group img{ width: 100%; height: 100%; border-radius: 50%;}section .group figcaption{ font-size: 18px; font-weight: bold; margin-top: 10px;}.icon:hover{ background: #fdc42e;}.icon { width: 3em; height: 3em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; margin:10px; background: #222; border-radius: 50%;}section .p{ font-style: inherit; width: 70%; margin: 100px auto;}.contact{ width: 100%; height: 400px; background: #fff url("../image/plat.jpg") no-repeat center center; background-size: cover; box-shadow: 0 2px 4px 1px rgba(0,0,0, 0.1); font-size: 20px;}.contact .private,.email,.cellphone{ text-align: left; width: 45%;}.contact .message{ text-align: right; display: inline-block; width: 45%; float: right;}.contact .message textarea{ margin-top: 20px; width: 100%; height: 180px; font-size: 20px;}input[type="text"],input[type="email"],input[type="phone" ]{ height: 50px; width: 100%; margin-top: 20px; border-radius: 5px; background: #F7F7F7; font-size: 20px;}.submit{ display: inline-block; height: 50px; width: 200px; margin-top: 50px;}.submit > input[type="submit"]{ background: #fdd048; width: 100%; height: 100%; border-radius: 10px; border: 1px solid darkgoldenrod; color: #fff; font-size: 20px;}.submit > input[type="submit"]:hover{ background: #fdc42e;}footer{ height: 100px;}footer p{ margin-top: 30px; float: left;}footer .end{ float: right; margin-top: 30px;}footer .end a{ color: #fdc42e;}footer a:hover{ text-decoration: underline;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：设计,企业,实例,基础,学生
