CSS练习之路----练习搭了一个超简易的页面

最新推荐文章于 2024-03-18 11:28:08 发布

我可是小老虎

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量285

点赞数

分类专栏：前端文章标签： html5 html css css3

本文链接：https://blog.csdn.net/weixin_49114058/article/details/108683319

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、以下是HTML的源码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的个人博客首页</title>
    <link rel="stylesheet" href="我的博客css代码.css">
</head>
<body>
<div class="blog-left">
    <div class="blog-avatar">
    	<!--这里可以修改成你自己的图片路径-->
        <img src=flower.jpg alt="" title="我的个人头像">
    </div>
    <div class="info">
        <p class="p1">
            我的个人博客
        </p>
        <p>
            从计算机小白<br>
            到计算机大佬的成神之路
        </p>
    </div>
    <div class="addr">
        <ul>
            <li>关注我</li>
            <li>
                <a href="https://weibo.com/u/5973083939/home?wvr=5" target="_blank">我的微博</a>
            </li>
            <li>
                <a href="https://blog.csdn.net/weixin_49114058" target="_blank">我的博客</a>
            </li>
            <li>
                <a href="">我的微信</a>
            </li>
        </ul>
    </div>
    <div class="msg">
        <p id="p1">技术栈</p>
        <p>Python</p>
        <p>Golang</p>
        <p>Java</p>
    </div>
</div>
<div class="blog-right">
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
    <div class="article">
        <div class="title">
            <p>
                烟雨江南&nbsp;&nbsp;最是迷人
            </p>
        </div>
        <div class="date">
            <p>
                2020-09-19 16:00
            </p>
        </div>
        <div class="content " >
            <p>风雨人生来时路，再回首，往事如烟，满腹惆怅谁人怜，看今朝，曲终人散</p>
            <hr>
        </div>
        <div class="where">
            <span>上海</span>
            <span>苏州</span>
        </div>

    </div>
</div>

</body>
</html>

二、以下是css的源码

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    /*target: "_blank";*/
    /*target-name: new;*/
    /*target-new: tab;*/
}

a:link {
    color: yellow;
}

a:hover {
    color: whitesmoke;
}

a:visited {
    color: burlywood;
}

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
    clear: both;
}

body {
    background-color: rgba(0, 191, 255, 0.5);
    /*opacity: 0.5;*/
}

.blog-left {
    width: 25%;
    height: 100%;
    background-color: gray;
    position: fixed;
    float: left;
}

.blog-avatar {
    width: 180px;
    height: 180px;
    border: 5px solid white;
    margin: 50px auto;
    border-radius: 50%;
    overflow: hidden;

}

.blog-avatar > img {
    margin-top: -40px;
    max-width: 100%;
    /*height: 100%;*/
}

.info p {
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    font-family: 方正姚体;
    color: yellow;
}

.info p:hover, .msg p:hover ,.addr ul > li:hover{
    color: white;
    font-size: 45px;
}

.p1 {
    margin-bottom: 20px;
}

.addr ul {
    margin-top: 50px;
    list-style: none;
}

.addr ul > li {
    font-size: 35px;
    font-family: 方正姚体;
    text-align: center;
    color: yellow;
    margin-top: 10px;
}



.msg {
    margin-top: 50px;
    text-align: center;
}

.msg p {
    font-size: 35px;
    font-family: 方正姚体;
    color: yellow;
    margin-top: 10px;
}

.blog-right {
    float: right;
    width: 75%;
    height: 1200px;
}

.article {
    width: 90%;
    height: 15%;
    background-color: whitesmoke;
    margin: 60px auto;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    /*border-left: 10px solid red;*/
}

.title {
    border-left: 10px solid red;
    float: left;
    width: 50%;
    /*height: 40%;*/
}

.title p {
    margin: 10px 20px;
    font-size: 60px;
    font-family: 隶书;
    font-weight: bold;
    /*text-decoration: none;*/
}

.date {
    font-size: 20px;
    margin: 30px 5px;
    font-weight: bold;
    float: right;
    width: 20%;
    /*height: 10%;*/
}

.content {
    /*margin: 10px;*/
    width: 100%;
    /*height: 50px;*/
    float: left;
    /*background-color: yellow;*/
}
.content p {
    font-size: 30px;
    font-family: 隶书;
    margin: 10px 20px;
}
.where {
    height: 10%;
    float: left;
    margin-top: 5px;
}
.where span {
    font-size: 20px;
    margin-left: 30px;
    /*padding: 10px 20px;*/
    font-weight: bold;
}

三、以下是效果图，没有最丑，只有更丑

我可是小老虎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS练习之路----练习搭了一个超简易的页面

一、以下是HTML的源码<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta .
复制链接

扫一扫

专栏目录