当前位置：网站首页>Simple pages

Simple pages

2022-06-30 00:40:00 【Like the evening wind】

Simple framing for homework ... Not very technical （ With vscode）
Insert picture description here
Made a simple page for a rainy day .

Code ：
index.html

<!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> home page </title>
    <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!--  Head area  -->
    <div class="header w">
        <div class="logo">
             Ah , it's time for bed ！
        </div>
        <!--  Navigation  -->
        <div class="nav">
            <ul>
                <li><a href="#"> home page </a></li>
                <li><a href="#"> Commodity management </a></li>
                <li><a href="#"> Know us </a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text">
            <button> Search for </button>
        </div>
        <div class="user">
            qq-wwr
        </div>
    </div>
    <!-- banner Area  -->
    <div class="banner">
        <div class="w">
            <div class="subnav">
            <ul>
                <li><a href="#"> The front-end development  <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
                <li><a href="#"> The front-end development <span>></span></a></li>
            </ul>
            </div>
        </div>

    </div>
    <!--  Course area  -->
    <div class="box w">
        <div class="box-hd">
            <h3> Excellent recommendation </h3>
            <a href="#"> Check all </a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
                <li><img src="./../../imgs/wangwenrui_g.webp"></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <dl>
                <dt> Learn to make </dt>
                <dd><a href="#"> contact </a></dd>
                <dd><a href="#"> contact </a></dd>
                <dd><a href="#"> contact </a></dd>
                <dd><a href="#"> contact </a></dd>
                <dd><a href="#"> contact </a></dd>
                </dl>
            </div>
            <div class="left">
                <div class="logo">
                     Ah , it's time for bed ！
                </div>
                <p> Spring flowers compete for fragrance , Five color lingsu , The Qin is still playing , And the new voice replaces the old ！
                 There are Mandarin in Jinshui , Han Palace has wood , That thing is new , I'm a man of the world , To commit fornication without understanding ！
                 Zhu Xianduan , Lack of bright mirror , Chaolu Xi , Let's have a rest , White headed chant , Farewell to the wounded , Try not to miss my concubine ,
                 Brocade water soup , With the king long Jue ！</p>
                <a class="app" href="#"> download APP</a>
            </div>
            
        </div>

    </div>
</body>
</html>

css style ：

*{
    
    margin: 0;
    padding:0;
}
/*  Write the version first  */
.w{
    
    width:1200px;
    margin:auto;
}
.clearfix:before,.clearfix:after{
    
    content:"";
    display:table;

    }
    .clearfix:after{
    
    clear: both;
    }
    .clearfix{
    
    *zoom:1;
    }
li{
    
    list-style: none;
}
a{
    
    text-decoration: none;
}
.header{
    
    height:42px;
    background-color: pink;
    margin: 30px auto;
}
.logo{
    
    float: left;
    width: 198px;
    height:42px;
    background-color: transparent;
    font-size: 30px;
    font-family: " Song style ";
    font-style: italic;
    font-weight: 10px;
    color: rgb(236, 236, 243);
}
.nav{
    
    float: left;
    margin-left: 60px;
}
.nav ul li{
    
    float: left;
    margin:0 15px;
}
.nav ul li a{
    
    display: block;
    height: 42px;
    padding: 0 10px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover{
    
    border-bottom: 2px solid #00a4ff;
    color:#00a4ff;
}
.search{
    
    float: left;
    width:412px;
    height: 42px;
    margin-left: 50px;
}
.search input{
    
    float: left;
    width:345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: none;
    background-color: rgb(156, 228, 153);
}
.search button{
    
    float: left;
    width:50px;
    height:42px;
    border:none;
    background-color: #00a4ff;
}
.user{
    
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}
.banner{
    
    height: 421px;
    background-color:#191f3b;

}
.banner .w{
    
    height: 421px;
    background-color: #00a4ff;
    background-image: url(../imgs/monter.png);
}
.subnav{
    
    width:190px;
    height:420px;
    background-color:rgba(29, 35, 63,0.3);
}
.subnav ul li {
    
    height: 45px;
    line-height: 45px;
    padding :0 20px;
}
.subnav ul li a{
    
    font-size: 14px;
    color:aliceblue;
}
.subnav ul li a span{
    
    float: right;
}
.subnav ul li a:hover{
    
    color:#00a4ff;
}
.box{
    
    margin-top: 30px;
}
.box-hd{
    
    height: 45px;
    
}
.box-hd h3{
    
    float: left;
    font-size: 20px;
    color: #050505;
}
.box-hd a{
    
    float: right;
    font-size:12px ;
    color: #666;
}
.box-bd ul li{
    
    float: left;
    width: 228px;
    height: 270px;
    background-color: #00a4ff;
    margin-left: 15px;
    margin-bottom: 15px;
}
.box-bd ul img{
    
    float: left;
    width: 228px;
    height: 270px;
    margin-left: 15px;
    margin-bottom: 15px;
}
.box-bd ul{
    
    width: 1225px;
}
/* .box-bd{ overflow:hidden; } */
.footer{
    
    height: 415px;
    background-color:black;
}
.footer .w{
    
    padding-top: 30px;
}
.footer .copyright{
    
    float: right;
}
.footer .left{
    
    float: left;
}
.footer .left dl dt{
    
    font-size: 16px;
    color: #00a4ff;
    margin-bottom: 5px;
}
.footer .left dl dt a{
    
    color:aliceblue;
    font-size:12px;
}
.copyright .p{
    
    margin: 20px 0 50px 0;
    font-size: 12px;
    color:#666;
}
.copyright .app{
    
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    color:#00a4ff
}

原网站

版权声明
本文为[Like the evening wind]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206300028411602.html

当前位置：网站首页>Simple pages

Simple pages

边栏推荐

猜你喜欢

随机推荐