web个人简介实现

最新推荐文章于 2024-04-03 23:51:26 发布

蓝桥杯备考

最新推荐文章于 2024-04-03 23:51:26 发布

阅读量558

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/weixin_73740228/article/details/135528309

版权

在代码中用到了html,css,js,vue

（链接的图片删了，需要的话自己添加图片）

<!DOCTYPE html>

<head>

<title>黄亦炜的个人网站</title>

<style>

/* 设置整个页面body的样式 */

body {

padding: 0; /* 设置内边距为0 */

margin: 0; /* 设置外边距为0 */

font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; /* 设置优先使用微软雅黑字体，以及一些备选字体，如系统默认字体等 */

background-color: #FFF; /* 设置背景颜色为白色 */

}

/* .content 类的样式 */

.content {

padding-bottom: 15px; /* 底部内边距15像素 */

padding-top: 15px; /* 顶部内边距15像素 */

margin: 0; /* 外边距为0 */

background-color: black; /* 背景颜色为黑色 */

color: purple; /* 文本颜色为紫色 */

font-family: Arial, sans-serif; /* 字体设置为Arial或系统默认无衬线字体 */

height: 5%; /* 高度占父元素的5% */

width: 100%; /* 宽度占父元素的100% */

font-size: 20px; /* 字体大小为20像素 */

position: fixed; /* 设置为固定定位 */

top: 0; /* 与父元素顶部距离为0 */

}

/* .flo 类的样式 */

.flo {

float: right; /* 设置元素右浮动 */

margin-right: 15px; /* 右外边距为15像素 */

text-decoration: none; /* 文本装饰去除 */

}

/* .flb 类的样式 */

.flb {

margin-left: 40px; /* 左外边距为40像素 */

text-decoration: none; /* 文本装饰去除 */

}

/* .b-image 类的样式 */

.b-image {

background-size: cover; /* 让背景图片填充整个元素 */

height: 800px; /* 高度为800像素 */

width: 100%; /* 宽度占父元素的100% */

z-index: -1; /* 层叠顺序为-1，使其位于最底层 */

}

/* .b-image 伪元素的样式 */

.b-image::after {

content: '我希望你能活出最精彩的自己，我希望你能见识到令你惊奇的事物,我希望你能遇见一些想法不同的人，我希望你为你自己的人生感到骄傲如果你发现自己还没有做到我希望你有勇气重头再来——《本杰明巴顿奇事》'; /* 伪元素文本内容 */

position: absolute; /* 绝对定位 */

top: 50%; /* 顶部位置偏移50% */

left: 50%; /* 左侧位置偏移50% */

transform: translate(-50%, -50%); /* 平移使其居中 */

font-family: 'Times New Roman', serif; /* 字体设置为Times New Roman或系统默认衬线字体 */

font-size: 35px; /* 字体大小为35像素 */

color: white; /* 文本颜色为白色 */

text-align: left; /* 文本左对齐 */

z-index: 1; /* 层叠顺序为1，使其位于正常层级 */

}

/* 设置整体容器样式 */

.container {

max-width: 960px; /* 设置最大宽度 */

margin: 0 auto; /* 左右居中 */

padding: 20px; /* 设置内边距 */

background-color: #FFF; /* 背景色为白色 */

box-shadow: 0 0 10px rgba(0,0,0,0.2); /* 添加阴影效果 */

overflow: hidden; /* 清除浮动 */

}

/* 设置章节样式 */

.section {

border-top: 1px dashed #1C2331; /* 设置上边框样式 */

padding: 20px; /* 设置内边距 */

overflow: hidden; /* 清除浮动 */

}

/* 设置章节标题样式 */

.section h1 {

font-size: 24px; /* 设置字体大小 */

margin-bottom: 20px; /* 底部外边距 */

}

/* 设置段落样式 */

.section p {

font-size: 16px; /* 设置字体大小 */

color: #333; /* 设置文字颜色 */

}

/* 设置图片容器样式 */

.photo {

flex: 1; /* 设置为自适应宽度 */

margin-right: 20px; /* 调整图片和文本之间的间距 */

}

/* 设置图片样式 */

.photo img {

max-width: 100%; /* 图片响应式 */

height: auto; /* 图片响应式 */

display: block; /* 修复图片底部留白问题 */

}

/* 设置信息容器样式 */

.info {

flex: 2; /* 自适应宽度 */

}

/* 响应式布局：屏幕宽度小于 600px 时 */

@media (max-width: 600px) {

.section {

display: flex; /* 设置为弹性布局 */

flex-direction: column; /* 主轴方向设置为纵向 */

}

</style>

</head>

<body>

<a class="flb">欢迎来到黄亦炜的个人主页</a>

</div>

</div>

</div>

</div>

<p>大学在青岛理工大学就读，在大一的时候参加了排球队的训练，大一的总成绩在专业的前百分之二十</p>

</div>

<p>我性格开朗，热爱生活，对待工作认真负责。擅长与人沟通，有较强的组织能力和适应能力。热衷于学习新技术，追求卓越。</p>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

/* 设置页面主体样式 */

body {

padding: 0; /* 设置内边距为0 */

margin: 0; /* 设置外边距为0 */

font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; /* 设置字体 */

background-size: cover; /* 让背景图片填充整个元素 */

z-index: -1; /* 将元素置于 z 轴的底层 */

}

/* 设置内容块样式 */

.content {

padding: 15px; /* 设置内边距 */

background-color: black; /* 设置背景颜色为黑色 */

color: purple; /* 设置文字颜色为紫色 */

font-family: Arial, sans-serif; /* 设置字体 */

font-size: 20px; /* 设置字体大小为20像素 */

position: fixed; /* 设置位置为固定定位 */

top: 0; /* 距离顶部距离为0 */

width: 100%; /* 设置宽度为100% */

}

/* 设置左侧按钮样式 */

.flb {

margin-left: 40px; /* 设置左外边距为40像素 */

text-decoration: none; /* 去除文字下划线 */

}

/* 设置右侧按钮样式 */

.flo {

float: right; /* 元素浮动到右侧 */

margin-right: 15px; /* 设置右外边距为15像素 */

text-decoration: none; /* 去除文字下划线 */

}

/* 设置按钮容器样式 */

.button-container {

position: fixed; /* 设置位置为固定定位 */

bottom: 0; /* 距离底部距离为0 */

width: 100%; /* 设置宽度为100% */

display: flex; /* 设置为弹性盒子布局 */

justify-content: space-between; /* 设置子元素空白分布 */

padding: 10px; /* 设置内边距为10像素 */

background-color: #f5f5f5; /* 设置背景颜色 */

border-top: 1px solid #ddd; /* 设置上边框样式 */

}

/* 设置按钮样式 */

.button {

background-color: #4CAF50; /* 设置背景颜色 */

border: none; /* 去除边框 */

color: white; /* 设置文字颜色为白色 */

padding: 10px 20px; /* 设置内边距 */

text-align: center; /* 文本居中显示 */

text-decoration: none; /* 去除文字下划线 */

display: inline-block; /* 设置为行内块元素 */

font-size: 16px; /* 设置字体大小为16像素 */

margin: 4px 2px; /* 设置外边距 */

cursor: pointer; /* 鼠标悬停样式为手型 */

border-radius: 5px; /* 设置圆角边框 */

transition: background-color 0.3s; /* 添加背景颜色过渡效果 */

}

/* 设置鼠标悬停时按钮样式 */

.button:hover {

background-color: red; /* 设置悬停时背景颜色为红色 */

}

/* 设置朋友元素样式 */

.friends{

position:absolute; /* 设置绝对定位 */

top:100px; /* 顶部距离为100像素 */

}

/* 设置居中图片样式 */

#center-image {

position: absolute; /* 设置绝对定位 */

top: 50%; /* 顶部距离为50% */

left: 50%; /* 左侧距离为50% */

transform: translate(-50%, -50%); /* 使用 transform 属性实现水平垂直居中 */

}

/* 设置图片样式 */

.img{

position:fixed; /* 设置固定定位*/

top: 20%; /* 设置元素距离顶部的高度比例 */

left: 40%; /* 设置元素距离左侧的宽度比例 */

width: 300px; /* 设置元素的宽度 */

height: 450px; /* 设置元素的高度 */

display: none; /* 设置元素为隐藏状态，除非有显式显示的样式 */

}

</style>

</head>

<body>

<a class="flb">欢迎来到黄亦炜的个人主页</a>

</div>

<button id="button1" class="button">点击查看朋友1</button>

<button id="button2" class="button">点击查看朋友2</button>

<button id="button3" class="button">点击查看朋友3</button>

</div>

</div>

document.addEventListener('DOMContentLoaded', function() {

var button1 = document.getElementById('button1');

button1.addEventListener('click', function() {

var img = document.getElementById('friendImage');

img.src = 'photos/hbl.jpg';

img.style.display = 'block';

});

var button2 = document.getElementById('button2');

button2.addEventListener('click', function() {

var img = document.getElementById('friendImage');

img.src = 'photos/ll.jpg';

img.style.display = 'block';

});

var button3 = document.getElementById('button3');

button3.addEventListener('click', function() {

var img = document.getElementById('friendImage');

img.src = 'photos/dy.jpg';

img.style.display = 'block';

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

/* CSS 样式 */

/* 设置整个页面的外边距与内边距为0 */

body {

padding: 0;

margin: 0;

/* 设置整个页面的默认字体为 'Microsoft YaHei'，如果不可用则依次使用后续字体 */

font-family: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

/* 设置页面的背景颜色为白色 */

background-color: #FFF;

/* 设置背景图片为 'photos/books.jpg'，并让背景图片充满整个元素 */

background-size: cover; /* 让背景图片填充整个元素 */

}

/* 对页面内容区域的样式设置 */

.content {

/* 设置内容区域底部的内边距为15px，顶部的内边距为15px */

padding-bottom: 15px;

padding-top: 15px;

margin: 0;

/* 设置内容区域的背景颜色为黑色 */

background-color: black;

/* 设置内容区域的文字颜色为紫色 */

color: purple;

/* 设置内容区域的默认字体为 'Arial'，如果不可用则使用 sans-serif 字体 */

font-family: Arial, sans-serif;

/* 设置内容区域的高度为整个页面高度的5% */

height: 5%;

/* 设置内容区域的宽度为整个页面宽度的100% */

width: 100%;

/* 设置内容区域的字体大小为20px */

font-size: 20px;

/* 将内容区域固定在页面顶部 */

position: fixed;

top: 0;

}

/* 对 class 为 'flo' 的元素进行浮动设置 */

.flo {

/* 设置元素向右浮动 */

float: right;

/* 设置元素右外边距为15px */

margin-right: 15px;

/* 设置文本装饰为无 */

text-decoration: none;

}

/* 对 class 为 'flb' 的元素设置左外边距为40px，并且文本装饰为无 */

.flb {

margin-left: 40px;

text-decoration: none;

}

/* 设置书籍容器样式 */

.book-container {

display: flex; /* 使用 Flex 布局 */

justify-content: space-between; /* 在容器内均匀分布每个项目 */

border: 2px solid #000; /* 添加 2 像素黑色实线边框 */

padding: 20px; /* 添加 10 像素内边距 */

gap: 10px; /* 设置项目之间的间距为 10 像素 */

width:100%

}

/* 设置书籍样式 */

.book {

text-align: center; /* 水平居中文本 */

padding: 20px; /* 添加 20 像素内边距 */

flex: 1; /* 设置项目使用剩余空间 */

position: relative; /* 设置相对定位 */

border-right: 2px solid #000; /* 添加右侧 2 像素黑色实线边框 */

box-sizing: border-box; /* 设置盒模型为边框模型 */

}

/* 设置最后一个书籍的样式 */

.book:last-child {

border-right: none; /* 去除最后一个书籍的右侧边框 */

}

/* 设置书籍图片样式 */

.book img {

width: 100px; /* 设置图片宽度为 100 像素 */

height: 100px; /* 设置图片高度为 100 像素 */

margin-bottom: 10px; /* 添加下边距以在图片和标题之间创建间距 */

}

/* 设置书籍段落样式 */

.book p {

margin: 0; /* 重置段落边距 */

}

/* 设置书籍描述样式 */

.bookDescription {

display: block; /* 设置为块级元素 */

position: absolute; /* 设置绝对定位 */

top: 130%; /* 从顶部偏移 130% 的位置 */

left: 0; /* 从左侧对齐 */

width: 100%; /* 宽度占满父容器 */

background-color: white; /* 修改文本区域的背景颜色 */

padding: 10px; /* 添加 10 像素内边距 */

border: 1px solid #000; /* 添加 1 像素黑色实线边框 */

z-index: 1; /* 设置堆叠顺序 */

box-sizing: border-box; /* 设置盒模型为边框模型 */

color: #940da3; /* 修改文本区域的文字颜色 */

}

/* 更新书籍容器样式 */

.book-container {

display: flex; /* 使用 Flex 布局 */

justify-content: space-between; /* 在容器内均匀分布每个项目 */

gap: 20px; /* 增加书籍间的间距为 20 像素 */

border-top: 1px solid #000; /* 添加 1 像素黑色实线上边框 */

padding-top: 10px; /* 在顶部添加 10 像素内边距 */

}

/* 设置app元素的位置样式 */

#app {

position: absolute; /* 设置绝对定位 */

top: 100px; /* 从顶部偏移 100 像素 */

width:100%;

}

</style>

</head>

<body>

<a class="flb">欢迎来到黄亦炜的个人主页</a>

</div>

<p @click="showDescription(index)">{{ book.title }}</p>

</div>

<div>

<p class="bookDescription"v-if="activeBook !== null">{{books[activeBook].snippet}}</p>

</div>

// Vue 代码

new Vue({

el: '#app',

data: {

activeBook: null,

books: [{

title: '白夜行',

image: 'photos/平凡的世界.jpg',

snippet: '一边是罪，一边是爱。一边是黑，一边是白。一边是正，一边是邪。一边是显，一边是隐。表面上纯洁美丽的雪穗是罪恶的，她黑暗的童年阴影无法去除，所以生命中没有太阳。桐原亮司表面上是神秘而且阴暗的，但他承受了父亲罪行的后果，为雪穗不惜一切，他代替了太阳，成为雪穗的亮光，她便可以在白夜中行走。我的天空里没有太阳，总是黑夜，但并不暗，因为有东西代替了太阳，虽然没有太阳那样明亮，但对我来说已经足够。凭借这份亮光，我便能把黑夜当成白天。我从来没有太阳，所以不怕失去。 '

{

title: '平凡的世界',

image: 'photos/平凡的世界.jpg',

snippet: '伟大的生命，不论以何种形式，将会在宇宙间永存。我们这个小小星球上的人类，也将继续繁衍和发展，直至遥远的未来。可是，生命对于我们来说又多么短暂。不论是谁，总有一天，都将会走向自己的终点。死亡，这是伟人和凡人共有的最后归宿。热情的诗人高唱生命的恋歌，而冷静的哲学家却说：死亡时自然法则的胜利……'

{

title: '许三观卖血记',

image: 'photos/许三观卖血记.jpg',

snippet: '生活中的各种事情带来的味道总是相伴而至，有时这个味道重点，有时那个味道重点，这样才真实。质朴之人，秉持真性情之人，不是一定什么都看得开，不是一定什么都做得对，不是一定什么问题都能解决，但是生活在他们眼里，就像他们的性情一样真，他们的生活中有所守护，有所坚持，有所为，有所不为，他们的生活即使无奈，但总是有一种可以用来面对无奈的幽默，生活的种种不幸中总会弥漫人性的暖意。'

{

title: '龙族',

image: 'photos/龙族.jpg',

snippet: '“真正爱你的人，只有魔鬼！只有我这个魔鬼啊！嗨！哥哥！为什么不拥抱我呢？为什么不拥抱这个世界上唯一需要你的人？”路鸣泽在雨中张开双臂，嘶哑地咆哮，满脸笑容，这一刻他是这世界上最忘我的戏子，在演出世界上最经典的悲剧，全世界的悲辛都融于他癫狂的独白中，他的背后站着巧巧桑、李尔王、美狄亚和俄狄浦斯的群像。他看着路明非，却仿佛在质问整个世界。'

}

]

methods: {

showDescription(index) {

if (this.activeBook === index) {

this.activeBook = null;

} else {

this.activeBook = index;

}

});

</script>

</body>

</html>

<!DOCTYPE html>

<head>

<style>

/* 设置body的背景图像为link.jpg */

body{

background-size: cover; /* 让背景图片填充整个元素 */

}

/* 设置content的样式 */

.content {

padding-bottom: 15px;

padding-top:15px ;

margin: 0;

background-color: black;

color: purple;

font-family: Arial, sans-serif;

height: 5%;

width: 100%;

font-size: 20px;

position:fixed;

top:0;

}

/* 设置flo类的浮动及边距样式 */

.flo {

float: right;

margin-right: 15px;

text-decoration: none;

}

/* 设置flb类的边距及文本装饰样式 */

.flb{

margin-left:40px;

text-decoration: none;

}

/* 设置body和html的高度、外边距、以及flex布局相关的样式 */

body, html {

height: 100%;

margin: 0;

display: flex;

justify-content: center;

align-items: center;

font-family: Arial, sans-serif;

}

/* 设置form的布局、内边距、边框、圆角以及阴影样式 */

form {

display: flex;

flex-direction: column;

padding: 20px;

border: 2px solid #ccc;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

max-width: 400px;

width: 100%;

}

/* 设置label的外边距、颜色以及字体大小样式 */

label {

margin-bottom: 6px;

color: red; /* 修改为红色 */

font-size: 18px; /* 增加字体大小 */

}

/* 设置input和textarea的填充、外边距、边框、圆角以及字体大小样式 */

input, textarea {

padding: 10px;

margin-bottom: 12px;

border: 1px solid #ccc;

border-radius: 4px;

font-size: 16px;

}

/* 设置重置按钮和提交按钮的填充、外边距、边框、圆角以及鼠标样式 */

input[type="reset"], input[type="submit"] {

padding: 10px 20px;

margin-top: 10px;

border: none;

border-radius: 4px;

cursor: pointer;

font-size: 16px;

}

/* 设置重置按钮的背景颜色 */

input[type="reset"] {

background-color: #f0f0f0;

}

/* 设置提交按钮的背景颜色和文字颜色 */

input[type="submit"] {

background-color: #007bff;

color: #fff;

}

/* 设置alert元素的固定定位、上边距、左边距、水平位移、背景颜色、填充、圆角以及阴影样式 */

#alert {

position: fixed;

top: 10px;

left: 50%;

transform: translateX(-50%);

background-color: #ffcc00;

padding: 10px 20px;

border-radius: 4px;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

display: none;

}

</style>

</head>

<body>

<a class="flb">欢迎来到黄亦炜的个人主页</a>

</div>

</form>

function saveData() {

var name = document.getElementById('name').value;

var contact = document.getElementById('contact').value;

var message = document.getElementById('message').value;

var data = {

contact: contact,

message: message

};

var alertBox = document.getElementById('alert');

alertBox.innerText = '已保存：' + JSON.stringify(data); /* 设置警告框内部的文本内容为“已保存：”加上data的JSON字符串形式 */

alertBox.style.display = 'block';

}

</script>

</body>

</html>

蓝桥杯备考

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
web个人简介实现

web课设，需要的自取
复制链接

扫一扫

web个人简介实现

“相关推荐”对你有帮助么？