尝试从0开始写一个网页

最新推荐文章于 2024-03-20 16:33:58 发布

D.D.Dero

最新推荐文章于 2024-03-20 16:33:58 发布

阅读量720

点赞数 2

文章标签： html css

本文链接：https://blog.csdn.net/DDDero/article/details/108976102

版权

本篇文章用于记录自己的代码实践操作经历

第一次先写一个普通的个人主页网站

本次编译网页使用的编译器为Visual Studio Code,编译语言随进度增加

首先，用！+ enter 创建一个welcome.html模板，将标题改成 D.D.Dero的主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D.D.Dero主页</title>
</head>
<body>
</body>
</html>

然后设置主页背景

<body background="bgbox/bgphoto.png">

背景图片作者：Mirtilla
在这里插入图片描述
加入导航栏元素：

<div id="title">
        <div id="home" class="home">
            <li><a href="welcome.html">Home</a></li>
        </div>
        <div id="myself" class="myself">
            <li><a href="main.html">个人主页</a></li>
        </div>
        <div id="feedback" class="feedback">
            <li><a href="feedback.html">网页反馈</a></li>
        </div>
        <div id="wait" class="wait">
            <li><a href="wait.html">暂时待定</a></li>
        </div>
    </div>

使用css对html进行排版：

<style type="text/css">
        #title{
            width: 860px;
            height:50px;
            background-image:url(bgbox/title.png);
            margin-left: 500px;
            margin-top: -10px;;
        }
        #home{
            width: 200px;
            height: 50px;
            margin-top: 10px;
            margin-left: 50px;
            float: left;
        }
        #myself{
            width: 200px;
            height: 50px;
            float: left;
            margin-top: 10px;
        }
        #feedback{
            width: 200px;
            height: 50px;
            float: left;
            margin-top: 10px;
        }
        #wait{
            width: 200px;
            height: 50px;
            float: left;
            margin-top: 10px;
        }
        li{
            display:inline;
        }
    </style>

展示：
在这里插入图片描述
然后对右边进行填充：

<div id="body">
        <div id="top">
            <h1>网站主页</h1>
            <h3>这是一个初步开发的静态页面，用于记录个人的知识水平和实践操作</h3>
        </div>
        <div id="Dividing">———————————————————————————————————————</div>
        <div id="bottom">
            <h1>首页新闻</h1>
            <h3>暂时没什么消息，未来可能会进一步改善页面</h3>
        </div>
    </div>

同样使用css进行美化：

        #body{
            width:700px;
            height:800px;
            float: right;
            margin-right: 100px;
            margin-top: 50px;
            background-image:url(bgbox/display.png);
        }
        #top{
            width:700px;
            height:345px;
            margin-top: 20px;
            margin-left: 30px;
        }
        #bottom{
            width:700px;
            height:395px;
            margin-top: 20px;
            margin-left: 30px;
        }
        #Dividing{
            width:700px;
            height: 10px;
            margin-left: 10px;
        }

展示：
在这里插入图片描述
左边有点太空了，加点东西进去：

    <div id="star">
        <img src="bgbox/star.png" style="width: 400px;height: 400px;margin-top: -100px;">
    </div>

调整一下star的大小

#star{
            width: 100px;
            height:100px;
        }

展示：
在这里插入图片描述

D.D.Dero

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
尝试从0开始写一个网页

本篇文章用于记录自己的代码实践操作经历第一次先写一个普通的个人主页网站本次编译网页使用的编译器为Visual Studio Code,编译语言随进度增加首先，用！+ enter 创建一个welcome.html模板，将标题改成 D.D.Dero的主页<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conten
复制链接

扫一扫