网页编写入门

最新推荐文章于 2024-06-04 13:04:19 发布

_wensea_

最新推荐文章于 2024-06-04 13:04:19 发布

阅读量1.2k

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_48547489/article/details/110709624

版权

笔记专栏收录该内容

34 篇文章 1 订阅

订阅专栏

一、准备

下载nginx，链接
在这里插入图片描述

在这里插入图片描述
双击.exe文件即可运行。

二、制作网页

1.创立两个文件，并在文件中分别写入以下代码
html文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>web</title>
    <style>
        body 
        {
            background-image:url('./2.jpg');
        }
    </style>
    <link rel="stylesheet" href="./web.css">
</head>
<body>
<header>
    <h1>自己紹介</h1>
</header>
<div id="containter">
    <nav>
        <h3>我的博客<h3>
        <a href="https://blog.csdn.net/weixin_48547489/article/details/110709624">自我介绍网页</a>
        <h3>喜欢的动漫<h3>
        <a href="https://www.bilibili.com/bangumi/play/ss34430/">咒术回战</a>
    </nav>
    <section>
        <article>
            <header>
                <h1>个人简介</h1>
            </header>
            <ul type="square">
                <li>姓名：wensea</li>
                <li>性别：男</li>
                <li>爱好：听歌、动漫</li>
            </ul>
            <footer>
                <img border="0" src="./1.jpg" alt=""  width="304" height="300">
            </footer>
        </article>
    </section>
</div>
</body>
</ht

CSS文件


body{
    background-color: #cccccc;//这些均为颜色代码，也可以使用red等来代表
    font-family: "Microsoft Yahei","SimHei";
    margin: 0 auto;
    max-width: 900px;
    border: solid #FFFFFF;
}
header{
    background: rgb(211, 140, 140);
    display: block;
    color: #FFFFFF;
    text-align: center;
}

h1{
    font-size: 72px;
    margin: 0;
}

h3{
    font-size: 18px;
    margin: 0;
    text-align: center;
    color: rgb(211, 140, 140);
}

nav{
    display: block;
    width:25%;
    float:left;
}
nav a:link, nav a:visited{
    display:block;
    color: rgb(211, 140, 140);
    border-bottom: 3px solid #FFFFFF;
    padding: 10px;
    text-decoration: none;                                                                                                                                                                                                                                          
    font-weight: bold;
    margin: 5px;
}
nav a:hover{
    color: white;
    background-color: #d11d1d;
}
nav h3{
    margin: 15px;
    color: white;
}
#container{
    background-color: #888888;
}
section{
    display: block;
    width: 50%;
    float:left;
}
article{
    /*background: #eee;*/
    display: block;
    margin: 10px;
    padding: 10px;
    /*
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    */
    border-radius: 10px;
    /*-webkit-box-shadow:2px 2px 20px #888;*/
    /*-webkit-transform:rotate(-10deg);*/
    /*-moz-box-shadow:2px 2px 20px #888;*/
    /*-moz-transform:rotate(-10deg);*/
    transform:rotate(-10deg);
    box-shadow: 2px 2px 20px rgb(112, 110, 110);
}
article header{
    border-radius: 10px;                                                                                                                                             
    padding: 5px;
}
article footer{
    border-radius: 10px;
    padding: 5px;
}
article h1{
    font-size: 18px;
}

footer{
    clear:both;
    display: block;
    background: rgb(224, 140, 140);
    color: #FFFFFF;
    text-align: center;
    padding: 15px;
}

这里我是使用的vscode进行编写，可以一边写一边改网页的样式。
2.将刚才的两个文件和网页所需要的图片复制粘贴到nginx的html目录下
在这里插入图片描述
3.修改nginx的conf目录下的nginx.conf（使用记事本方式打开）并作以下修改

4.找到nginx.exe运行，之后就可以使用ip127.0.0.1看到自己的网页了

两个跳转网页。