🧑个人网页设计、🙋♂️个人简历制作、👨💼简单静态HTML个人网页作品、👨🏭个人介绍网站模板 、等网站的设计与制作。
⭐个人网页设计网站模板采用DIV CSS布局制作,网页作品有多个页面,如 :个人介绍(文字页面)、我的作品(图片列表)、个人技能(图文页面)、在线留言(表单页面)CSS样式方面网页整体采用左右布局结构,制作了网页背景图片,导航区域每个导航背景色不同,导航背景色与页面背景呼应。
🏅 一套A+的网页应该包含 (具体可根据个人要求而定)
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。
📘网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。
📒网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;
📙网页编辑方面:网页作品代码简单,可使用任意HTML编辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html编辑软件进行运行及修改编辑等操作)。
其中:
(1)📜html文件包含:其中index.html是首页、其他html为二级页面;
(2)📑 css文件包含:css全部页面样式,文字滚动, 图片放大等;
(3)📄 js文件包含:js实现动态轮播特效, 表单提交, 点击事件等等(个别网页中运用到js代码)。
DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
*{
margin: 0;padding: 0;
font-size: 12px;
}
body{
background: url("img/3.jpg") no-repeat;
background-size: 100%;
}
@font-face {
font-family: 'iconfont'; src: url('font/iconfont.eot'); /* IE9*/
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font/iconfont.woff') format('woff'), /* chrome、firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font/iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */ }
[data-icon]:before {
font-family: iconfont;
content: attr(data-icon);
speak: none;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
-moz-transition: -webkit-transform 2s;
-moz-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.plane {
position: absolute;
left:0;
top:0;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: rgba(67, 181, 180, 0.60);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
-moz-transition: -webkit-transform 2s, opacity 2s;
-moz-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 7s infinite linear;
-moz-animation: spin 7s infinite linear;
}
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
}
to { -webkit-transform: rotateY(-360deg);
-moz-transform: rotateY(-360deg);
}
}
/* ---------- cube styles ------------- */
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
-moz-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
-moz-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
-moz-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.5, 0.5, 0.5) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.5, 0.5, 0.5) rotateX(-90deg) translateZ(100px);
}
#shape img{
width:200px;
height: 200px;
}
style>
head>
<body>
<div id="main">
<div id="topDiv">
<ul class="ul_top">
<li><span data-icon="">span>世界并不完美li>
<li><a href="#">射手座<span data-icon="">span>a>li>
<li><a href="#">喜欢的<span data-icon="">span>a>li>
<li><a href="#">讨厌的<span data-icon="">span>a>li>
<li><a href="#">M日记<span data-icon="">span>a>li>
<li><a href="#">关于我<span data-icon="">span>a>li>
ul>
div>
<div id="leftDiv">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one"><img src="img/2.jpg">div>
<div class="plane two"><img src="img/2.jpg">div>
<div class="plane three"><img src="img/2.jpg">div>
<div class="plane four"><img src="img/2.jpg">div>
<div class="plane five"><img src="img/2.jpg">div>
<div class="plane six"><img src="img/2.jpg">div>
div>
<div id="meDiv">
<label class="lableMiss">I MISS YOUlabel><br>
<input class="input_in" type="text">
<div id="in_ease" onclick="login()">
<span data-icon="İ">span>
div>
div>
div>
div>
<div id="rightDiv">
<header><p>始终相信这段话p>header>
<div id="text_Div">
<p class="p_1"> 故不能学者:遇师则不中,用心则不专,好之则不br>br>深,就业则不疾,辩论则不审,教人则不精;於师愠,怀br>br>於俗,羁神於世,矜势好尤,故湛於巧智,昏於小利,惑br>br>於嗜欲;问事则前後相悖,以章则有异心,以简则有br>br>相反;离则不能合,合则弗能离,事至则不能受。此不能br>br>学者之患也!!!p>
div>
div>
<div id="right_1">
<ul>
<li><a href="#"><span data-icon="">span>a>li>
<li><a href="#"><span data-icon="9">span>a>li>
<li><a href="#"><span data-icon="Ũ">span>a>li>
<li><a href="#"><span data-icon="ũ">span>a>li>
<li><a href="#"><span data-icon="Ū">span>a>li>
<li><a href="#"><span data-icon="Ʋ">span>a>li>
ul>
div>
div>
<div id="cava"><canvas id="myCanvas" width="230"height="230">canvas>div>
<div id="missyou"><label>珍惜每一秒label>div>
<div id="login">
div>
body>
<script type="text/javascript"src="js/main.js">script>
html>
#main{
width: 100%;
height:500px;
}
#topDiv{
width: 100%;
height: 60px;
background: rgba(100, 136, 232, 0.48);
position:fixed;
top:0;
z-index: 1000;
}
.ul_top{
margin: 0;
padding: 0;
list-style-type: none;
width:70%;
height: 60px;
/*background: #ff0000;*/
float: left;
margin-left: 10%;
}
.ul_top li{
float: left;
}
.ul_top li a{
text-decoration: none;
}
.ul_top li span{
font-size: 30px;
}
.ul_top li:nth-child(1){
width: 220px;
height: 50px;
.p_1{
font-size: 28px;
color: white;
font-family: "楷体";
}
#cava{
width: 230px;
height: 230px;
position: absolute;
top: 80px;
right: 50px;
-webkit-border-radius: 400px;
-moz-border-radius: 400px;
border-radius: 230px;
border: 20px solid white;
-webkit-box-shadow:0 5px 5px 2px #8c8c8c;
-moz-box-shadow:0 5px 5px 2px #8c8c8c;
-webkit-box-shadow: inset 0 0px 10px 5px #36373a;
-moz-box-shadow: inset 0 0px 10px 5px #36373a;
background:#C68140;
}
#missyou{
width: 120px;
height: 38px;
position: absolute;
top: 135px;
right: 120px;
}
#missyou label{
font-size: 20px;
font-family: "楷体";
font-weight: bold;
color: white;
}
#login{
width: 100%;
height: 100%;
background:white;
position: fixed;
top: 60px;
left: 137px;
/*-webkit-transition:all 1s;*/
visibility: hidden;
}
@-moz-keyframes myanimation{
from{
top:-680px;
}
to{
top:60px;
}
}
@-webkit-keyframes myanimation{
/*from{*/
/*top:-680px;*/
/*opacity: 0;*/
/*}*/
/*to{*/
/*top:60px;*/
/*opacity: 1;*/
/*}*/
0%{
opacity: 0;
}
20%{
opacity: 0.2;
}
50%{
opacity: 0.5;
}
80%{
opacity: 0.7;
}
100%{
opacity: 1;
}
}
#login:hover{
/*top: 0;*/
cursor: pointer;
}
很多刚入门编程的小白学习了基础语法,却不知道语法的用途,不知道如何加深映像,不知道如何提升自己,这个时候每天刷自主刷一些题就非常重要(百炼成神),可以去牛客网上的编程初学者入门训练。该专题为编程入门级别,适合刚学完语法的小白练习,题目涉及编程基础语法,基本结构等,每道题带有练习模式和考试模式,可还原考试模式进行模拟,也可通过练习模式进行练习 。
1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏”
一键三连哦!
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】
带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!
3.