拼搏三星期，我要做网页

最新推荐文章于 2024-05-21 21:14:20 发布
最新推荐文章于 2024-05-21 21:14:20 发布
阅读量984 收藏 5
点赞数 5
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shany_Ming/article/details/124510927
版权

经过两周html+css的学习，终于在第三周做出了自己的网页，但由于经验的不足与js的欠缺，使得网页有点简陋，来看看效果吧

目录

效果展示

​

代码段

效果展示

初始页面

主页面

 

 

详细展示：自学三周，做出了自己的网页（虽然有亿点简陋）_哔哩哔哩_bilibili

代码段

初始界面 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青春，心怀壮志</title>
    <style>
        .bg-video{
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    z-index: -1;
    vertical-align:bottom;display:block;
    position:absolute;
 }

.v1{
    width: 100%;
    height: auto;
}
.my{

    color: aliceblue;
    text-align: center;
    font-size: large;
    width: 300px;
    height: 150px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tx {
    text-align: center;
    font-size: large;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.tx img{
width:80px;
min-height:80px;
border-radius: 50%;
}
.nav {
              height: 50px;
              width: 500px;
              position: absolute;
              border-top: 1px solid #080808;
              border-bottom: 1px solid #010206;
              background-color: black;
              line-height: 50px;
              opacity: 0.7;
              margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
        }
        .nav a {
            display: inline-block;
            height: 50px;
            padding: 0 60px;
                  font-size: 12px;
                  color: rgb(227, 141, 44);
                  text-decoration: none;
              }
              .nav a:hover {
                  background-color: #eee;
              }
    </style>
</head>
<body>
    <div class="bg-video">
        <video class="v1"  autoplay muted loop>
            <source src="qunxing.mp4">
        </video>
    </div>
<div class="tx"><img src="tx.jpg"></div>
<div class="my">
青春，心怀壮志
</div>
<div class="nav">
    <a href="main.html #about me">About</a>
<a href="main.html"> Home</a>
<a href="main.html #share_">Share</a>
</div>
</body>
</html>

主界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎来到我的主页</title>
    <style>
            body {
        font-size: 0;
      }
            aside {
                display: inline-block;
                height: 300px;
                width: 70px;
                background-color: black;
                opacity: 0.7;
                position: fixed;
                margin-left: 200px;
                margin-top: 300px;
            }
            aside a{
                display: block;
                text-decoration: none;
                font-size: medium;
                color: rgb(227, 141, 44);
                padding: 20px 0;
                text-align: center;
            }
            aside a:hover{
                background-color: #eee;
            }
            .am2 a{
                display: block;
                text-decoration: none;
                color: rgb(227, 141, 44);
                padding: 15px 0;
                text-align: center;
            }
            .am2 a:hover{
                background-color: #eee;
            }
            .am {
                  display: inline-block;
                  height: 500px;
                  width: 1250px;
                background-color: rgba(9, 9, 9, 0.9);
                margin-left: 300px;
                margin-top: 200px;
            }
            .am .am1 {
                display: inline-block;
                height: 500px;
                width: 800px;
            }
              .am2 {
                display: inline-block;
                height: 500px;
                width: 400px;
                color: #eee;
                font-size: small;
                text-align: center;
              }
              .am2 img{
                  display: inline-block;
                width:100px;
                min-height:100px;
                border-radius: 50%;
              }
              .name {
                  font-size: medium;
                  color: red;

              }
              .share {
                  margin-top: 100px;
                  margin-left: 300px;
                  display: inline-block;
                  height: 700px;
                  width: 600px;
                  color: #eee;
                font-size: large;
                text-align: center;
                padding: 50px 0;
                background-color: rgba(9, 9, 9, 0.9);
            }
                .share1 {
                  margin-top: 100px;
                  margin-left: 50px;
                  display: inline-block;
                  height: 700px;
                  width: 600px;
                  color: #eee;
                font-size:large;
                text-align: center;
                padding: 50px 0;
                background-color: rgba(9, 9, 9, 0.9);
                }
                .game1 {
                    margin-top: 100px;
                  margin-left: 300px;
                  display: inline-block;
                  height: 400px;
                  width: 625px;
                  border: none;
                  color: rgb(239, 11, 220);
                font-size: large;
                text-align: center;
                background-color: rgba(red, green, blue, 0.7);
                }
                .game2 {
                    margin-top: 100px;
                    display: inline-block;
                  height: 400px;
                  width: 625px;
                  border: none;
                  color: rgb(239, 11, 220);
                font-size: large;
                text-align: center;
                background-color: rgba(red, green, blue, 0.7);
                }
                .game3 {
                  margin-left: 300px;
                  display: inline-block;
                  height: 400px;
                  width: 625px;
                  border: none;
                  color: rgb(239, 11, 220);
                font-size: large;
                text-align: center;
                background-color: rgba(red, green, blue, 0.7);
                }
                .game4 {
                    display: inline-block;
                  height: 400px;
                  width: 625px;
                  color: rgb(239, 11, 220);
                  border: none;
                font-size: large;
                text-align: center;
                background-color: rgba(red, green, blue, 0.7);
                }
                .book1 {
                  margin-left: 500px;
                  margin-top: 100px;
                    display: inline-block;
                    height: 300px;
                    width: 800px;
                  color: rgb(230, 19, 15);
                font-size: large;
                background-color: rgba(9, 9, 9, 0.9);
                }
                .ym {
                  float: left;
                  padding-left: 20px;
                  width: 30%;
                }
                .ym1 {
                  line-height: 60px;
                  float: right;
                  width: 40%;
                }
                .book2 {
                  margin-left: 500px;
                    display: inline-block;
                    height: 300px;
                    width: 800px;
                  color: rgb(230, 19, 15);
                font-size: large;
                background-color: rgba(9, 9, 9, 0.9);
                }
                .xz {
                  float: right;
                  width: 25%;
                }
                .xz1 {
                  line-height: 60px;
                  float: left;
                  padding-left: 20px;
                  width: 65%;
                }
                .book3 {
                  margin-left: 500px;
                    display: inline-block;
                    height: 300px;
                    width: 800px;
                  color: rgb(230, 19, 15);
                font-size: large;
                background-color: rgba(9, 9, 9, 0.9);
                }
                .jy {
                  float: left;
                  padding-left: 20px;
                  width: 30%;
                }
                .jy1 {
                  line-height: 60px;
                  float: right;
                  width: 40%;
                }
                .book4 {
                  margin-left: 500px;
                    display: inline-block;
                    height: 300px;
                    width: 800px;
                  color: rgb(230, 19, 15);
                font-size: large;
                background-color: rgba(9, 9, 9, 0.9);
                }
                .zf {
                  float: right;
                  width: 25%;
                  line-height: 300px;
                }
                .zf1 {
                  line-height: 60px;
                  float: left;
                  padding-left: 20px;
                  width: 50%;
                }
    </style>
</head>
<body  background="preview.jpg" style="background-repeat: no-repeat; background-attachment:fixed;background-size: 100% 100%;"> 
  <aside>
    <a href="#about me">关于我</a>
    <a href="#share_">分享</a>
    <a href="#game">游戏</a>
    <a href="#book">小说</a>
    <a href="#">返回顶部</a>
</aside>
    <article id="about me">
      <div class="am">
       <div class="am1">
        <marquee  scrollamount=20 behavior="alternate" loop="-1" deplay="0">
<img src="1.jpg" >
<img src="2..jpg">
<img src="3.png" >
<img src="4.png" >
<img src="5.png" >
<img src="6.png" >
<img src="7.png" >
<img src="8.png" >
<img src="9.png" >
        </marquee>
        </div>
            <div class="am2">
              <img src="tx.jpg">
              <p class="name">宀于</p>
              <p>签名:有志始知蓬莱近，无为总觉咫尺远</p>
              <p>如果成功有捷径，那么一定是努力</p>
              <p>-----------------------------------------------------------------------</p>
              <p><a href="https://blog.csdn.net/Shany_Ming?spm=1000.2115.3001.5343" target="_blank">博客</a></p>
              <p><a href="https://space.bilibili.com/1552151950?spm_id_from=333.1007.0.0" target="_blank">bilibili</a></p>
              <p><a href="https://leetcode-cn.com/u/ming-aun/" target="_blank">leetcode</a></p>
              <p><a href="https://github.com/ShanyMing" target="_blank">github</a></p>
            </div>
      </div>
    </article>
    <div class="share" id="share_">
        <p><img src="a1.png" alt=""></p>
        <h2>C++学习路线</h2>
        <p>c语言学习</p>
        <p>数据结构与算法</p>
        <p>c++学习</p>
        <p>Linux系统编程</p>
        <p>Linux网络编程</p>
        <p>MySQL数据库</p>
    </div>
    <div class="share1">
        <p><img src="a2.png" alt=""></p>
        <h2>网安学习路线</h2>
        <p>（1）学习好Web前后端基础（HTML、PHP、MYSQL）</p>
        <p>（2）掌握编写自适应兵器的语言（Python编程）</p>
    <p>（3）由浅入深的系统性学习渗透测试流程(获取目标最高权限为例）</p>
    <p>（4）掌握各式各样的主流安全工具（nmap、AWVS、Burp、Appscan）</p>
    <p>（5）渗透实战训练(通过刷渗透靶机、刷CTF题库、刷漏洞平台来实战)</p>
    <p>(6)找各种大厂面试笔试题，各种刷题，各种恶补基础知识</p>
    </div>
    <div class="game1" id="game">
<img src="zl.png" alt="">
<p>只狼</p>
<p>19年TGA</p>
    </div>
    <div class="game2">
<img src="lt.png" alt="">
<p>艾尔登法环</p>
<p>唯一一个让我狂肝两周的游戏</p>
    </div>
    <div class="game3">
<img src="dbg.jpg" alt="">
<p>荒野大镖客2</p>
<p>大表哥yyds</p>
</div>
<div class="game4">
<img src="lol.png" alt="">
<p>LOL</p>
<p>一曲终了，繁花散尽，伊人已逝，只余一声空叹。</p>
    </div>
    <div class="book1" id="book">
<div class="ym"><img src="ym.jpg" alt=""></div>
<div class="ym1">
  <h3>《夜的命名术》</h3>
  <p>很喜欢书里的一句话——“永远少年”</p>
</div>
    </div>
    <div class="book2">
<div class="xz"><img src="xz.jpg" alt=""></div>
<div class="xz1">
  <h3>《雪中悍刀行》</h3>
  <p>心目中唯一的江湖，不说了“小二，上酒”</p></div>
    </div>
    <div class="book3">
<div class="jy"><img src="jypng.png" alt=""></div>
<div class='jy1'>
  <h3>《解忧杂货店》</h3>
  <p>无论现在多么的不开心，你要相信，明天会比今天更好</p>
</div>
    </div>
    <div class="book4">
<div class="zf"><img src="zf.jpg" alt=""></div>
<div class="'zf1">
  <h3>《追风筝的人》</h3>
  <p>为你，千千万万遍</p>
</div>
    </div>
</body>
</html>

Shany－Ming
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
顽强拼搏做生活的强者.doc
03-07
顽强拼搏做生活的强者.doc
拼搏百天我要日站——思路
LiBai'S BLOG
05-04 4092
信息收集 第一步做的就是信息收集，正所谓知己知彼百战百胜，我们根据网站URL可以查出一系列关于该网站的信息。通过URL我们可以查到该网站的IP、该网站操作系统、脚本语言、在该服务器上是否还有其他网站等等一些列的信息。更多的关于信息收集，我在另一篇文章中很详细的介绍了信息收集需要收集哪些信息，以及信息收集过程中需要用到的工具，传送门——> 渗透测试之信息收集 漏洞探测 当我们收集到了足够多的信息之后，我们就要开始对网站进行漏洞探测了。探测网站是否存在一些常见的Web漏洞，比如： 1、SQL注入， 传送门
个人成长语录——我愿永远做一个上进的少年，一个敢于拼搏的人
数字世界 万物互联
05-28 1024
收集了近10年的个人成长领悟，有积极的，有消极的，遇事不顺的时候会用这些积极的领悟或自制的鸡汤来鞭策自己，排解少年的困惑与忧虑。后续持续更新，权当是对过去时光的记录与缅怀了~ 11、当实力撑不起自己的梦想时，不要太焦躁，不要爱面子，更不要和别人攀比，现在能做的就是脚踏实地的蓄力，当能够撑起一片天时，才有资格去和过去看起来比你强的人较劲，才有资格去谈面子。——2020.5.28 10、条条道路通罗马，唯有套路险入渊，2020愿遇见更多的真诚，长风破浪的决心，携手共进的初心，愿2021时心仍是热的，血仍是沸
拼搏百天我要日站——常见弱口令
LiBai'S BLOG
05-05 4743
弱口令 弱口令(weak password) 没有严格和准确的定义，通常认为容易被别人猜测到或被破解工具破解的口令均为弱口令。弱口令指的是仅包含简单数字和字母的口令，例如“123”、“abc”等，因为这样的口令很容易被别人破解，从而使用户的互联网账号受到他人控制，因此不推荐用户使用 常见弱口令 网站后台: admin、manager、admin123、admin888、admin666 不同的后台类型拥有不同的弱密码： 数据库（phpmyadmin） 账号：root 密码：root、root123、1234
拼搏百天我要日站——SQL注入基础原理
LiBai'S BLOG
05-06 5206
2021-5-5 我被一个小破站骗钱了，不为别的，拼搏百天我要把它日穿。 以下内容来源于：实验楼 SQL注入 SQL 注入漏洞的原理 Web 程序三层架构 SQL 注入漏洞 SQL注入产生原因及威胁 SQL 注入猜解数据库 SQL 漏洞绕过登录验证 判断 SQL 注入点 判断是否存在 SQL 注入漏洞 判断 SQL 注入漏洞的类型 SQL 注入攻击通过构建特殊的输入作为参数传入 Web 应用程序，而这些输入大都是 SQL 语法里的一些组合，通过执行 SQL ..
html+css网页设计课程设计-红色青春 无奋斗不青春主题
06-21
作业：以红色青春为主题建立一个网站（2个页面以上） 要求 1、div+css 2、有文字列表 3、图片带边框 4、插入视频 5、创建热点链接 6、表格 7、ap div并插入背景颜色和图像 作业带制作截图，代码全。...
团队握手拼搏PPT背景图片
07-16
这是四张团队握手拼搏PPT背景图片，第一PPT模板网提供精美人物幻灯片背景图片免费下载； 关键词：团队幻灯片背景图片，拼搏PPT背景图片，握手PowerPoint背景图片，.PPTX格式；
攀岩运动背景的拼搏励志PPT模板
07-15
这是一份攀岩运动背景的拼搏励志PPT模板。第一PPT模板网提供体育运动背景幻灯片模板免费下载； 关键词：攀岩运动幻灯片背景图片，拼搏奋斗、正能量PPT模板，动态扁平化PowerPoint模板免费下载，.PPTX格式；
拼搏向上psd公司企业可使用的模板.psd
07-12
拼搏向上psd公司企业可使用的模板
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
博客
05-17 137
HTML,CSS,JavaScript,DOM的理解
CSS中的writing-mode属性：解锁文本布局新维度
艾恩小灰灰的博客
05-21 205
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
css sprites如何使用
codedadi的博客
05-18 392
注意：确保在定位图标时考虑到大图像的尺寸和每个图标的尺寸。例如，如果每个图标都是32x32像素的，并且它们在大图像中水平排列，那么第一个图标的background-position是0 0，第二个图标的background-position是-32px 0，依此类推。在CSS中，定义.icon类以设置所有图标的通用样式（如大小、背景图像等），并为每个图标定义特定的background-position。/* 图标2在大图像中的位置（假设每个图标宽度为32px） *//* 图标1在大图像中的位置 */
css笔记总结2
fishniu35的博客
05-15 440
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。4.类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。2.类选择器在 HTML 中以 class 属性表示，在 CSS 中，类选择器以一个点“.”号显示。3.id 选择器和类选择器最大的不同在于使用次数上。
css都有哪些选择器怎么使用
codedadi的博客
05-19 554
实际上，CSS 还提供了许多其他选择器，如组合选择器（如逗号分隔的选择器组、后代选择器、子选择器、相邻兄弟选择器和一般兄弟选择器）等。* `:last-child`、`:nth-child()`、`:nth-last-child()` 等也是常见的伪类选择器。在 HTML 中，你可以这样使用它：<div id="myID">这是一个 ID 为 myID 的 div。CSS 选择器是用于选择你想要样式化的 HTML 元素的模式。这将选择所有的 <p> 元素，并将它们的文本颜色设置为红色。
探索 CSS、Sass 和 SCSS：区别与应用
一个普通人
05-21 510
CSS 是一种用来描述 HTML 或 XML 文档外观和格式的样式表语言。它通过定义样式规则，来控制网页元素的呈现方式。Sass 是一个 CSS 预处理器，扩展了 CSS，添加了变量、嵌套规则、混入、继承等功能，增强了样式表的功能性和可维护性。SCSS 是 Sass 的一种语法，是 CSS 的超集，这意味着所有有效的 CSS 代码在 SCSS 中同样有效。它结合了 CSS 的简单性和 Sass 的强大功能。CSS 是基础的样式表语言，语法简单但功能有限，适用于简单的样式需求。
CSS-元素堆叠顺序
Kevin7_35Durant的博客
05-18 150
元素的堆叠效果，是根据书写的顺序来的，后面的在上面绿色在最上面，随后是红色，最后是蓝色，跟书写的顺序一样我们可以改变这个顺序。
深入了解 CSS 预处理器 Sass
最新发布
_midnight的博客
05-21 337
Sass 是一种 CSS 预处理器，它为 CSS 增加了更强大的功能和灵活性。通过使用 .scss 文件扩展名编写代码，然后编译成标准 CSS，Sass 提供了变量、嵌套、Mixins、继承以及部分文件和导入等功能。这些功能使得 CSS 代码更简洁、可重用且易于维护，是前端开发中非常实用的工具。
vue-cli2项目中使用scss
Hi_MrXiao的博客
05-21 226
首先要搞清楚Sass和Scss的区别：实际上Sass和Scss是同一种东西，Scss是 Sass3 引入新的语法，它们都是css预处理器。：Sass 默认使用“.sass”作为文件扩展名，而 Scss 使用“.scss”作为扩展名。：Sass 最初是以严格的缩进式语法规则来书写，不带大括号和分号，这种方式使得代码更加简洁，但在某些情况下可能不如Scss直观易读；相比之下，Scss的语法允许使用大括号和分号，与常规的 css语法相似，这使得 Scss更容易被 css开发者接受和使用。
我想nodejs做个聊天软件
02-10
当然可以！ Node.js 是一个 JavaScript 运行时，它可以在服务端执行 JavaScript 代码。你可以使用 Node.js 创建聊天软件。 首先，你需要学习一些基本的知识，比如如何使用 Node.js 建立服务器、如何使用 WebSocket 连接进行实时通信、如何使用数据库来存储聊天记录等。 然后，你可以使用 Node.js 框架，比如 Express、Koa 或者 Hapi 等来帮助你开发聊天软件。这些框架可以让你更方便地开发和维护你的聊天软件。 最后，你可以使用前端框架，比如 React、Vue 或者 Angular 等来开发聊天软件的用户界面。 总之，使用 Node.js 创建聊天软件是可行的，但是你需要学习一些基础知识和框架，还需要考虑一些实际问题，比如如何处理高并发场景、如何保证数据安全等。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Shany－Ming

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值