【静态网页制作大作业 |
您所在的位置：网站首页 › html5设计网页作业 › 【静态网页制作大作业 |
【静态网页制作大作业
|
文章目录
作品介绍一、作品展示二、代码实现预览地址总结
作品介绍
网页作品简介： 寒假期间学习HTML和CSS即部分Javascript后的第一个大作业，搭建一个个人静态博客，后面出于兴趣，将其部署到GitPage上并利用GitHub添加了留言功能。 一、作品展示
代码如下（示例）： Li Shu's site html{ position: relative; } .top{ background-color: #FFFFFF; height: 60px; width: 1900px; position: absolute; top: 0; left: 0; } .top h1{ padding-left: 150px; font-family: "华文新魏"; } .top-left{ width: 250px; height: 50px; } .top-left span{ position: absolute; top: 15px; left: 250px; font-family: "华文新魏"; font-size: 28px; color: pink; float: left; display: none; } .top-left:hover span{ display: block; } .top1{ position: absolute; top: 0px; left: 600px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top2{ position: absolute; top: 0px; left: 800px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top3{ position: absolute; top: 0px; left: 1050px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } .top4{ position: absolute; top: 0px; left: 1300px; padding: 20px; font-family: "华文新魏"; font-size: 30px; } a{ text-decoration: none; color: black; } a:hover{ text-decoration: none; color: orange; } a:active{ text-decoration: line-through; color: cadetblue; } .top-right{ position: absolute; top: 0px; right: 30px; padding: 20px; font-family: "华文新魏"; font-size: 20px; } .top img{ width: 40px; height: 40px; border-radius: 25px; position: absolute; top: 5px; right: 0px; } .top-right1{ position: absolute; top: -4px; right: -150px; padding: 20px; } .top-right1 input{ font-family: "华文新魏"; font-size: 20px; border-radius: 8px; } .main{ position: absolute; top: 60px; left: 0; background-image: url(img/人生背景.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; width: 2133px; height: 1141px; } .main-left h1{ position: absolute; left: 50px; top: 180px; color: #517693; font-size: 40px; font-weight: bold; font-family: "华文行楷"; } .main-left h3{ position: absolute; left: 50px; top: 280px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文行楷"; } .center-left{ position: absolute; top: 30px; left: 550px; width: 250px; height: 850px; border: 3px solid white; border-radius: 20px; background-color:white; opacity: 0.8; } .center-left img{ width: 100px; height: 100px; border-radius: 100px; position: absolute; top: 5px; left: 75px; } .center-left #name{ position: absolute; top: 110px; left: 75px; text-align: center; font-family: "华文新魏"; font-size: 17px; } .span ul{ position:absolute; top: 200px; left: 510px; width: 250px; height: 680px; } .span li{ line-height: 111px; list-style-type: none; } .pane{ width: 256px; text-align: center; font-family: "华文新魏"; font-size: 20px; } .pane:hover{ background-color: white; } .pane1{ width: 256px; height: 114px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; text-align: center; font-family: "华文新魏"; font-size: 20px; } .pane1:hover{ background-color: white; } .center{ position: absolute; top: 30px; left: 820px; width: 850px; height: 850px; border: 3px solid white; border-radius: 20px; background: rgba(250,250,250,0.8); } .center iframe{ border-radius: 20px; } #showtime1{ position: absolute; left: 30px; bottom: 20px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文新魏"; } #showtime2{ position: absolute; left:40px; bottom: -15px; color: #517693; font-size: 25px; font-weight: bold; font-family: "华文新魏"; } .time{ position: absolute; right: 30px; bottom: 5px; color: #517693; font-size: 28px; font-weight: bold; font-family: "华文新魏"; } .bottom { position: absolute; top: 1110px; width: 2110px; height: 85px; } 止于此 风止于秋水，我止于你💗 首页 苦海无涯 人生旅途 人生良言 黎曙 欢迎来到黎曙的世界！Welcome to Li Shu's world! 今天也要加油昂！Today, we still have to refuel! 黎曙非常热爱生活 主页 笔记 归档 邮箱 关于 更多 哈雷彗星的约定： 14193天3:22:55 var showtime2 = function () { var nowtime = new Date(); endtime = new Date("2061/1/1"); var lefttime = endtime.getTime() - nowtime.getTime(); leftd = Math.floor(lefttime/(1000*60*60*24)); lefth = Math.floor(lefttime/(1000*60*60)%24); leftm = Math.floor(lefttime/(1000*60)%60); lefts = Math.floor(lefttime/1000%60); return leftd + "天" + lefth + ":" + leftm + ":" + lefts; } var div = document.getElementById("showtime2"); setInterval (function () { div.innerHTML = showtime2(); }, 1000); document.write("") setInterval("time.innerText=new Date().toLocaleString()",1000) 预览地址 [网站预览地址](https://ylishu.github.io/) 总结以上就是今天要讲的内容，本文仅仅简单介绍了个人静态博客，而部署个人静态博客基本上是所有前端开发者必经的一个阶段。 |
【本文地址】
今日新闻 |
推荐新闻 |