day45作业

利用 html + css 写一个最基本的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用样式*/
        body {
            margin: 0;
            background: #D5D5D5;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            color: whitesmoke;
        }

        ul {
            list-style-type: none;
            padding-left: 0;
        }

        .clearfix:after {
            content: ' ';
            clear: both;
            display: block;
        }


        /*内容样式*/
        .left {
            width: 20%;
            height: 1000px;
            background-color: #767676;
            position: fixed;
            float: left;
        }

        .left .img {
            border: 3px solid white;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            overflow: hidden;
            margin: 30px auto;
        }
        .img img {
            width: 100%;
        }

        .info1 {
            font-size: 20px;
            color: darkgray;
            text-align: center;
        }

        .info2 {
            font-size: 20px;
            color: black;
            text-align: center;
        }

        .info3 {
            font-size: 20px;
            color: black;
            text-align: center;
        }




        .right {
            width: 80%;
            height: 1000px;
            background-color: white;
            float: right;
        }

        .title {
         border-left: 5px solid red;
            margin-left: 10px;
        }

        .list {
            background-color: white;
            margin: 20px 40px 20px 10px;
            box-shadow: 5px 5px 5px 5px rgba(129,70,34,0.8);
        }
        .title .t {
            /*float: left;*/
            font-size: 35px;
            margin-left: 18px;
        }
        .title .date {
            float: right;
            margin: 20px;
        }

        .content p {
            text-indent: 25px;
        }

        .content {
            border-bottom: 1px solid black;
        }

        .buttom {
            text-indent: 20px;
        }


    </style>
</head>
<body>

<div class="left clearfix">
    <div class="img"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2947173397,1134386833&fm=26&gp=0.jpg" alt=""></div>
    <div class="info1">
        <p>Jack秦</p>
        <p> 爱又怎样,又不能当饭吃 我口袋没有钱请你吃饭 爱我很累,...</p>
    </div>
    <div class="info2">
        <ul>
            <li><a href="https://www.cnblogs.com/qinyujie/">关于我</a></li>
            <li><a href="https://www.cnblogs.com/qinyujie/">微博</a></li>
            <li><a href="https://www.cnblogs.com/qinyujie/">微信公众号</a></li>
        </ul>
    </div>
    <div class="info3">
        <ul>
            <li><a href="https://www.cnblogs.com/qinyujie/"># Python</a></li>
            <li><a href="https://www.cnblogs.com/qinyujie/"># Linux</a></li>
            <li><a href="https://www.cnblogs.com/qinyujie/"># MySQL</a></li>
        </ul>
    </div>

</div>




<div class="right clearfix">
    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>


    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>


    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>

    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>

    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>

    <div class="list">
        <div class="title">
            <span class="t">标题一</span>
            <span class="date">2019/11/15</span>
        </div>
        <div class="content">
            <p>人生就像一场舞会，教会你最初舞步的人却未必能陪你走到散场</p>
        </div>
        <hr>
        <div class="buttom">
            <span># Python</span>
            <span># Shell</span>
        </div>
    </div>

</div>

</body>
</html>
posted @ 2019-11-15 20:53  GeminiMp  阅读(93)  评论(0)    收藏  举报