用HTML和CSS创建一个简单的页面

最新推荐文章于 2025-02-11 17:17:11 发布

miraclelxxy

最新推荐文章于 2025-02-11 17:17:11 发布

阅读量3.8k

点赞数 41

文章标签： html css

本文链接：https://blog.youkuaiyun.com/2301_79709365/article/details/134710601

版权

用HTML和CSS创建一个简单的页面

1.首先要分析页面的布局

 2.html的准备

 3.css的准备

3-1新建css文件，以下代码可以设为以后的通用css
3-2继续美化我们的页面(headline篇)
3-3侧边栏篇
 3-4主体篇

4.内部链接的页面

 5.总结

 6.其他页面的建造(补充)

6-1设置页
 6-2完成页
 6-3排行榜
 6-4彩蛋

1.首先要分析页面的布局

假设要创建如图所示的页面

不难看出他由三个大盒子组成，每个大盒子之间装着几个小盒子，其中下面两个大盒子是一行显示的，所以这两个盒子用浮动float显示，里面的小盒子同理也需要float。

接着主体里六个小盒子也是可以一行排列的，所以也要用float。盒子里面含有标题、图片、文字，标题可以用<h1> <h2> <h3> <h4> <h5> <h6>，图片<img src="">，文字<span>、<p>都可以，引入链接的话填上<a>。

首行和侧边栏里面的选项都是可以跳转的，所以可以加上<a>，但是<a>属于行内元素，没有高度和宽度，所以要将<a>转换为行内块元素。

2.html的准备

在vsc新建html文件后输入英文的叹号即可出现以下界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>写代码是一件非常快乐的事</title>
    <!-- 引入外部样式表，做到结构和样式分离，看起来更舒服，后面会提及 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 先构建好页面大体布局，后面用css对页面进行美化 -->
    <div class="headline">
        <!-- <a href="#"></a>href后面跟链接或者zip，点击内容即可跳转 -->
        <!-- 注意哪些为单标签和双标签！！在上方文本中有些标签，作者并没有打全！！ -->
        <a href="#">昨晚咱俩...是不是...</a>
        <a href="#">哥哥，我们比赛攒钱吧！</a>
        <a href="#">就喜欢凶凶的你</a>
        <a href="#">要不要来我家吃饭？</a>
        <a href="#">我想清楚了 我要的是你</a>
        <a href="#">TO BE OR NOT TO BE</a>
    </div>

    <div class="cebianlan">
        <!-- 因为是无序的列表所以用<ul>，有序就用<ol> -->
        <ul>
            <div>
                <!-- 插入外部链接(绝对路径) -->
                <a href="https://www.bilibili.com/video/BV1wN4y1C7Gb/?spm_id_from=333.337.search-card.all.click&vd_source=d568216c7b66bb157c06245f9e3910cc" target="_blank">
                    <li>故事线</li>
                </a>
            </div>
            <div>
                <!-- 插入内部链接，简单来说就是自己创建网页，电脑里有的(相对路径) -->
                <!-- target="_blank"点开的链接新建一个页面，默认为_self在当前页面生成 -->
                <a href="资料馆.html" target="_blank">
                    <li>资料馆</li>
                </a>
            </div>
            <!-- 剩下几个省略，步骤类似 -->
        </ul>
    </div>

    <div class="zhuti">
        <div>
            <h2>郑梓妍</h2>
            <!-- 相对路径，若所需文件处于当前文件同一层的文件夹中，则需要输入路径加xxx/xx.png或者xx.zip，若属于同一层则直接输入文件名字即可 -->
            <a class="image" href="pink老师-notes/12HTML_images/yao_images.zip">
                <img src="作业images/郑梓妍.png">
            </a>           
            <a class="text" href="https://www.bilibili.com/video/BV1kp4y1T7wB/?spm_id_from=333.337.search-card.all.click&vd_source=d568216c7b66bb157c06245f9e3910cc" target="_blank">
                <span>心动时刻</span>
            </a>
            <!-- 此处<em>使文本倾斜，但这里另有作用，未完待续，请听css分解-->
            <em>|</em>
            <p style="color: rgb(181, 142, 242);">有妍选妍，无妍乱选</p>
        </div>
        <!-- 剩下几个省略，步骤类似 -->
</body>
</html>

做好上述工作，那么html的基本工作也就做好啦，剩下的就交给css接管，当然你也可以在上面的小盒子里面添加图片、链接、文字等内容。

3.css的准备

3-1新建css文件，以下代码可以设为以后的通用css。

/* 几乎是每个css的首行代码，用通配符清除内外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 清除li前面自带的小圆点 */
li {
    list-style: none;
}

/* 清除a链接自带的下划线 */
a {
    text-decoration: none;
}

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

这些可以写在html同一个文件里，只需要用<style>在<title>后面写就好，但是这样样式和结构混在一起，不方便看，所以推荐大家用外部样式表，然后<link rel="stylesheet" href="style.css">进来就好，单独改的再使用行内样式表或者内部样式表。

3-2继续美化我们的页面(headline篇)

/* 在标签中写好class=""即可调用该样式，class中不需要加. */
.headline {
    /* 给定外边距，与下面的盒子隔开一定距离 */
    /* 盒子与盒子的距离一般选择外边距 */
    margin-bottom: 10px;
    height: 100px;
    background-color: rgb(257, 234, 199);
    /* 设置上边框 */
    border-top: 3px solid orange;
}

.headline a {
    /* 因为a为行内元素，需要转化为行内块元素才可以有高度和宽度 */
    display: inline-table;
    height: 100px;
    /* 不设置上下padding值就不会撑开盒子，因为大盒子本身已经设置了高度但是并没有设置宽度 */
    padding: 0 20px;
    /* 设置圆角边框，更好看一点 */
    border-radius: 20px;
    color: white;
    /* 让文字水平居中显示 */
    text-align: center;
    line-height: 97px;
    background-color: rgb(254, 134, 133);
}

/* 注意此处a:hover中间不可以有空格！！否则无法运行 */
/* 设置鼠标移动到上面后发生的变化 */
.headline a:hover {
    color: pink;
    background-color: rgb(185, 235, 255);
}

设置好headline后效果如下:
首行效果

3-3侧边栏篇

.cebianlan {
    /* 前面提到的两个盒子（块级元素放在一行）使用浮动 */
    float: left;
    width: 200px;
    height: 797px;
    background-color: rgb(181, 192, 236);
}

.cebianlan div {
    width: 200px;
    height: 100px;
    /* 盒子和盒子之间用margin，敲重点 */
    margin-bottom: 20px;
}

.cebianlan div:hover {
    /* 将鼠标移动到上方，盒子会产生阴影 */   
    box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
    background-color: pink;
}

上方为box-shadow简写方式：h-shadow(必需，水平阴影位置) v-shadow(必需，垂直阴影位置) blur(可选，模糊距离，即多模糊) spread(可选，阴影尺寸即多大) color(可选) inset(可选，将外部阴影改为内部阴影)。

注意！只有改为inset才需要写！！outset是默认的，不能写！

rgba(red,green,blue,透明度)透明度由0~1，0为全透明，1为全实。

.cebianlan li {
    /* 水平居中 */
    text-align: center;
    /* 行高等于盒子的高度，实现垂直居中 */
    line-height: 100px;
    color: rgb(255,255,255);
    /* 调整文字粗细，normal=400，加粗=700 */
    font-weight: 700;
    /* 文字大小 */
    font-size: larger;
}

.cebianlan li:hover {
    /* 鼠标移动到上面后改变文字颜色 */
    color: rgb(255, 159, 5);
}

设置好侧边栏后效果如下：
侧边栏效果

3-4主体篇

.zhuti {
    /* 此处没有设置float，是因为主体和height和侧边栏一致，而侧边栏浮动了，主体就会处于侧边栏下层，相当于上下图层 */
    height: 797px;
    background-color: rgb(170 169 249);
}

.zhuti div {
    /* 这里一定要设置浮动，为什么不会隐藏到侧边栏里去呢？因为侧边栏本身也是个浮动的盒子！他们都在同一图层！ */
    float: left;
    width: 450px;
    height: 350px;
    background-color: aliceblue;
    margin-top: 28px;
    margin-left: 25px;
}

/* 让插入的图片和父盒子一样宽，宽度和高度设置一个就好，另一个会按比例调整 */
.zhuti div img {
    width: 100%;
}

这里如果直接用margin="12px"会有个问题，两个盒子之间就会相距24px，而第一个只会相距12px，所以只需要设置margin-left和margin-top就好了，剩下可以用行内样式表微调即直接在html里<div style="margin-right=">微调和父盒子右边的距离。这样会让页面更美观。

.zhuti h2 {
    /* 让标题水平居中 */
    text-align: center;
    color: pink;
}

.zhuti .text {
    /* 行内块元素有宽和高 */
    display: inline-block;
    height: 20px;
    margin-left: 10px;
    /* 设置圆角边框 */
    border-radius: 20px;
    background-color: aliceblue;
}

.zhuti a:hover {
    background-color: pink;
}

.zhuti p {
    display: inline-block;
    padding: 0 28px;
    /* 字体大小 */
    font-size: 16px;
}

/* html用了<em>|</em>就是为了方便调节竖线的属性 */
em {
    /* 文本显示方式 */
    font-style: normal;
    color: #4c4c4c;
    margin: 0 6px 0 15px;
}

span {
    padding: 60px;
    color: #ff8500;
}

做好之后主体效果如下：

做到这里主页面已经大功告成啦！

4.内部链接的页面

拿资料馆为例，我想让资料在页面中间显示，但又不想一个个找，所以要设置超链接。
在这里插入图片描述

点击李云思后会跳转到李云思处：
在这里插入图片描述

再点击返回顶端即可回到页面上方

首先做好html结构

<body>
    <h1 id="top">
        <!-- 设置超链接<a href="#xxx">然后在跳转到的地方写id="xxx" -->
        <a href="#zzy">郑梓妍</a>
        <!-- 剩余同理 -->
    </h1>

    <!-- alt="图片不能正常显示时才展示的文本" -->
    <!-- width="多少宽度"，这里也可以设置height，但设置其中一个后，另一个会按照比例缩放，所以不需要同时设置两个 -->
    <div id="zzy"><img src="作业images/郑梓妍资料.jpg" alt="郑梓妍资料" width="500"></div>
    <div><a href="#top">返回顶部</a></div>
    <!-- 剩余同理 -->
</body>

然后做css样式

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(pink老师-notes/12HTML_images/完！美！.png);
    /* 将背景图铺满页面 */
    background-size: cover;
    /* 使背景图不重复出现，若背景图太小，而盒子太大，是会默认repeat的 */
    background-repeat: no-repeat;
    /* 使背景图位置居中 */
    background-position: center;
    /* 固定背景图，即向下滚动时，背景不动，只有内容在动 */
    background-attachment: fixed;
}

h1 {
    text-align: center;
}

div {
    text-align: center;
}

a {
    display: inline-block;
    height: 100px;
    padding: 30px;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

做好之后就和上图一样啦。

5.总结

用html和css做一个简单的页面，首先一定要先分析布局，再用html写好基本结构，最后用css美化页面。

6.其他页面的建造(补充)

6-1设置页

设置页

先分析结构，首先一个大标题<h1>，接着下面是form表格，表格里面有要输入的文本，还有可供选择的按钮和提交的文件，最后是提交和重置键。页面左上方还有一个箭头，可插入的图片。

<body>
    <div class="headline">
        <!-- 超链接返回主页，将图片超链接 -->
        <a href="作业.html"><img src="作业images/返回箭头.jpg"></a>
    </div>

    <div>
        <!-- <em>倾斜文字， text-align: center水平居中显示 -->
        <em><h1 style="text-align: center;">请选择你的属性，慎重考虑，可能会影响剧情发展</h1></em>
    </div>

    <div style="text-align: center;">
    <!-- 以下form的内容上传到# -->
        <form action="#">
            <div>
                <!-- <label for=""><input id="">for和id将两者来联系，扩大点击范围 -->
                <label for="text">用户名：</label><input type="text" name="username" value="顾易" id="text">
                <!-- 这里的value是用户未输入时 默认显示的 -->
            </div>

            <div>
                性别：
                <!-- type是类型 默认是text文本框 radio单选按钮 注意一点 一定要name一致才能有单选效果 推荐每个input都有name 也方便提交的后端看 -->
                <label for="man">男</label><input type="radio" name="sex" checked="checked" id="man"> 
                <label for="woman">女</label><input type="radio" name="sex" id="woman">
                <label for="bag">沃尔玛购物袋</label><input type="radio" name="sex" id="bag">
            </div>

            <div>
                <h3>你的生日是？</h3>
                <!-- <select>下划列表 -->
                <select name="month" id="month">
                    <!-- <option> select里的选项 可以有很多option 默认显示第一个 也可以在<option checked="checked">表示默认选中 -->
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <!-- 剩下省略 -->
                </select>
                <select name="day" id="day">
                    <!-- value是该按钮对应的值 选择该按钮后上传给后台看 -->
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <!-- 剩下省略 -->
                </select>
            </div>
            <h3>你的爱好是？</h3>
            <!-- <textarea col="x" rows="y">生成一个x行y列的文本域 -->
            <textarea name="intro" id="intro" cols="30" rows="10">唱跳rap篮球</textarea>
            <h3>请上传你的帅/美照</h3>
            <!-- 文件域 上传文件 -->
            <input type="file">
            <h3>攻略对象？</h3>
            <p style="color: violet; font-size: large;">
                <label for="zzy">
                    郑梓妍
                </label>
                <!-- checkbox复选框 多选 -->
                <input type="checkbox" name="love" id="zzy">
                <label for="xl">
                    肖鹿
                </label>
                <input type="checkbox" name="love" id="xl">
                <!-- 剩下省略 -->
            </p>
            <h3>被谁攻略？</h3>
            <p style="color: deeppink; font-size: large;">
                <label for="zzy1">
                    郑梓妍
                </label>
                <input type="checkbox" name="loved" id="zzy1">
                <label for="xl">
                    肖鹿
                </label>
                <input type="checkbox" name="loved" id="xl1">
                <!-- 剩下省略 -->
            </p>
            <h3>想添加的元素？</h3>
            <textarea name="idea" id="idea" cols="120" rows="10"></textarea><br>
            <!-- <br>强制换行 单标签 -->
            <!-- submit提交按钮 reset重置按钮 -->
            <input type="submit" name="提交">
            <input type="reset" name="重置">
            <a href="完成页面.html">完成</a>
        </form>
    </div>
</body>

至此设置页面已经构建好，再用css修饰即可

* {
    /* 清除浏览器自带的内外边距 */
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(202, 236, 247);
}

做好后效果图就和上述一样了

6-2完成页

完成页面比较简单，直接写成内部样式表就好。
中间一个大标题<h1>，下面跟着个链接，最后那里还有两行文本

附图：
完成页面效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式表 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            background-color: rgb(202, 236, 247);
        }
        div {
            height: 200px;
            text-align: center;
        }
        span {
            font-size: larger;
            font-style: oblique;
            color: violet;
        }
    </style>
</head>
<body>
    <div>
        <h1>你已经完成设置！祝你游戏愉快！</h1>
        <h3>
            <a href="作业.html">点击此处跳转</a>
        </h3>
    </div>
    <span>
        游戏可以重来，而现实不行。<br>
        游戏终究是游戏，愿各位玩家在现实中找到属于自己的那个TA。
    </span>
</body>
</html>

6-3排行榜

话不多说直接上图：
排行榜效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(pink老师-notes/12HTML_images/完！美！.png);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            /* 注意是内容滚动 */
            background-attachment: fixed;
        }

        div {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <img src="作业images/排行榜1.jpg" width="1300">
    </div>
    <div>
        <img src="作业images/排行榜2.png" width="1300">
    </div>
    <div>
        <img src="作业images/排行榜3.png" width="1300">
    </div>
</body>
</html>

6-4彩蛋

先上图为敬：
彩蛋效果图

首先他有个大标题<h1>，然后左右两边有个圆形图片，应该可以用盒子浮动，最后那个应该可以做个大背景图放在<body>就好了。分析好了我们来敲代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真爱至上</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url(作业images/老六.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }

    .images {
        float: left;
        width: 276px;
        height: 276px;
        /* 把正方形盒子变成圆形 */
        border-radius: 50%;
        border: 1px solid orange;
        /* 减去溢出部分 */
        overflow: hidden;
    }
    /* 这里用的是亲儿子选择器>,意思是只能选择.image下面直接带的img */
    .images > img {
        width: 100%;
        height: 100%;
    }

    h1 {
        color: pink;
        text-align: center;
        font-size: 100px;
    }

    a {
        text-decoration: none;
        color: pink;
    }

    a:hover {
        text-decoration: underline;
    }
</style>
<body>
    <h1><a href="https://www.bilibili.com/video/BV1194y1n7wf/?spm_id_from=333.788&vd_source=d568216c7b66bb157c06245f9e3910cc" target="_blank">
        LOVE IS LOVE
        </a>
    </h1>
    <div class="images">
        <img src="作业images/真爱至上.png" title="恭喜你！成功攻略老六！">
    </div>
    <!-- 剩下略 -->
</body>
</html>