用HTML+CSS做一个漂亮简单的个人网页详细解析

清欢灬

已于 2022-07-01 17:04:49 修改

阅读量4.6k

点赞数 4

文章标签： html css 前端 webview

于 2022-06-10 09:39:25 首次发布

本文链接：https://blog.csdn.net/a754334599/article/details/125215558

版权

预览地址：

https://static-32f9498d-9b46-413f-a441-4d6984c2edb5.bspapp.com/

Documenthttps://static-32f9498d-9b46-413f-a441-4d6984c2edb5.bspapp.com/

1.代码结构

css：文件存放css样式

img:存放图片

home:首页

form:登陆提交

about:关于我的

css文件结构

img文件：图片自己找，对应html文件中引入地址改下，或者图片名改成下边

2.1 home.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="home">
        <div class="content">
            <div class="stars"></div>
            <img class="bgc" src="./img/01.jpg" width="100%" alt="">
            <h3 class="title">欢迎来到我的个人网站</h3>
            <h3 class="titles">今天也要加油鸭</h3>
            <img class="icon" src="" alt="">
            <div class='ribbon'>
                <a href='./home.html'><span>Home</span></a>
                <a href='./about.html'><span>About</span></a>
                <a href='./from.html'><span>Form</span></a>
            </div>
        </div>
        <div class="icons">
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/120200805125119213375(1).jpg" alt="">
                <span>教学楼是我们每天必去取经之地</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/02.png" alt="">
                <span>每天都要在食堂里面纠结到底吃什么</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/timg.jpg" alt="">
                <span>午饭过后可以躺着休息晒晒太阳的小山坡</span>
            </div>
            <div class="icons_items">
                <img class="icons_items_imgs" src="./img/03.jpg" alt="">
                <span>忙碌的一天结束啦爬上小床跟世界说晚安</span>
            </div>
        </div>
        <div class="introduce">
            <div class="introduce_item">
                <img class="introduce_item_img" src="./img/05.png" alt="">
                <span class="introduce_item_title">天空还是一片浅蓝,转眼间东方出现了一道红霞,红霞慢慢地在扩大，不大一会就染红了小半边天。颜色红得可爱， 又 过了一会儿,在那个地方出现了太阳的小半边脸。</span>

            </div>
            <div class="introduce_item">

                <span class="introduce_item_titles">当清晨的阳光洒进我们温馨的寝室，忙碌的一天又开始了，闹钟开始响起，每个人睡眼惺忪，从床上爬起，忙忙碌碌的穿梭在食堂与教室之间</span>
                <img class="introduce_item_img" src="./img/06.png" alt="">
            </div>
            <div class="introduce_item">
                <img class="introduce_item_img" src="./img/00.jpg" alt=" ">
                <span class="introduce_item_title ">温暖的阳光照耀着大地，远处的小山都金灿灿的美轮美奂，它穿梭于微隙的气息。舒倘，漫长。紫檀的香味，弥漫在春日，把天地间一切空虚盈满，阳光下，是一道纤绝的尘陌，呢喃着天真，充盈着那抹曾经深不可测的孤清而飘逸的影。</span>
            </div>
            <div class="introduce_item " style="margin-bottom: 40px;">
                <span class="introduce_item_titles ">当晚自习结束后，抬头望向天空，几颗大而亮的星星挂在夜空，仿佛是天上的人儿提着灯笼在巡视那浩瀚的太空。美丽极了，裹紧衣裳，在这优美的夜色中慢慢的走回寝室。</span>
                <img class="introduce_item_img " src="./img/04.jpg " alt=" ">
            </div>
        </div>
    </div>

</body>
<script

最低0.47元/天解锁文章

清欢灬

关注

4
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
用HTML+CSS做一个漂亮简单的个人网页详细解析

css：文件存放css样式img:存放图片home:首页form:登陆提交about:关于我的css文件结构 img文件：图片自己找，对应html文件中引入地址改下，或者图片名改成下边 2.2 index.css3.1 form.html3.2 form.css4..1 about.html4.2 about.css......
复制链接

扫一扫