当前位置：网站首页>Xiaobai programmer's seventh day

Xiaobai programmer's seventh day

2022-07-25 22:20:00 【Too difficult L】

HTML Traditional layout

html file

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>H5 Layout </title>

    <link rel="stylesheet" href="./index.css">

    <style>

        body{

            background-color: #C94154;

            width: 850px;

            height: 900px;

            margin: 0px auto;

        }

        header{

            width: 800px;

            height: 50px;

            background-color: white;

            margin: 50px auto 0px auto;

        }

        nav{

            width: 800px;

            height: 50px;

            background-color: white;

            border-top: 2px #ccc solid;

            margin: 0px auto;

        }

        section{

            color: black;

            width: 800px;

            height: 400px;

            background-color: white;

            margin: 20px auto;

        }

        footer{

            width: 800px;

            height: 50px;

            background-color: white;

            margin: 0px auto;

        }

        aside{

            width: 330px;

            height: 330px;

            background-color: #4F4E4F;

            float: left;

            margin: 50px 5px 20px 20px;

        }

        article{

            width: 410px;

            height: 330px;

            background-color: #4F4E4F;

            float: right;

            margin: 50px 20px 20px 5px;

        }

        hgroup{

            width: 360px;

            height: 40px;

            background-color: #C94154;

            margin: 50px auto 15px;

        }

        article>.p1{

            width: 360px;

            height: 150px;

            background-color: #C94154;

            margin: 0px auto;

        }

        article>.p2{

            width: 360px;

            height: 40px;

            background-color: #C94154;

            margin: 15px auto;

        }

    </style>

</head>

<body>

    <header></header>

    <nav></nav>

    <section>

        <aside></aside>

        <article>

            <hgroup> </hgroup>

            <p class="p1">  </p>

            <p class="p2"> </p>

        </article>

    </section>

    <footer>

    </footer>

</body>

</html>

css file

/* Remove default style */

* {

    padding: 0;

    margin: 0;

}

a {

    text-decoration: none;

}

li{

    list-style: none;

}

a:hover {

    color: red !important;

}

/* Set the overall style */

#wrap {

    width: 340px;

    height: 350px;

    /* background-color: pink; */

    border-top: 3px solid  #ccc;

    margin: 50px auto;

}

#wrap >h2{

    line-height: 2;

    display: inline-block;

    border-top: 3px solid red;

    margin-top: -3px;

}

#wrap >h2>a{

    color: black;

}

/* Set pictures */

.pic{

    width: 100%;

    height:165px ;

    overflow: hidden;

}

.pic>img{

    width: 100%;

    height: 100%;

   

}

.pic>img:hover{

    transform: scale(1.1);

}

.pic>img:hover+p{

    transform: scale(1);

}

.pic>p{

    /* background-color: red; */

    /* background-color: rgba(0, 0, 0, .5); */

    color: #fff;

    margin-top: -40px;

    margin-left: 30px;

}

#wrap>ul{

    /* margin-left: 20px; */

    margin-top: 15px;

}

#wrap>ul>li{

    line-height: 2;

    /* list-style: square;

    color: #888788; */

    width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

    /* background-color: royalblue; */

    overflow: hidden;

}

#wrap>ul>li::before{

    content: '';

    display: inline-block;

    width: 5px;

    height: 5px;

    margin-right: 10px;

    background-color:#888788 ;

}

#wrap>ul>li>a{

    color: #888788;

    font-size: 14px;

}

#wrap>ul>li>a:hover{

    color: red;

}

 

原网站

版权声明
本文为[Too difficult L]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/201/202207190520526130.html

边栏推荐

猜你喜欢

随机推荐