前端学习之路——简单页面效果

最新推荐文章于 2024-04-29 16:27:27 发布

gyt478922579

最新推荐文章于 2024-04-29 16:27:27 发布

阅读量462

点赞数

分类专栏： html+css

本文链接：https://blog.csdn.net/gyt478922579/article/details/52475312

版权

html+css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html：

<!doctype html>
<html>

     <head>

         <meta charset="UTF-8">
         <title></title>
         <link href="简单页面效果实例.css" type="text/css" rel="stylesheet">
    </head>
    <body>

<!--head-->
    <div class="head">
        <div class="headtitle">
            <h2>Colorful Life</h2>
        </div>

        <div class="headlead">
            <ul>
                <li><a href="">Working</a></li>
                <li><a href="">Eating</a></li>
                <li><a href="">Playing</a></li>
                <li><a href="">Sleeping</a></li>
            </ul>
        </div>

        <div class="headimage">
            <img src="%E5%9C%86%E5%BD%A2%E5%9B%BE%E6%A1%88.jpg">
        </div>

        <div class="headform">
            <form>
                <input type="text">
            </form>
        </div>
    </div>

<!--body-->
    <div class="body">
        <div class="bdytitle">
            <h3>Enjoy everyday of us!!</h3>
            <p>let's study with us,improve with us,we need you!</p>

        </div>

        <div class="img1">
            <img src="flour.jpg">
            <p>Scene</p>
        </div>

        <div class="img1">
            <img src="%E5%A4%A9%E7%A9%BA%20(1).jpg">
            <p>Sky</p>
        </div>

        <div class="img1">
            <img src="sherlock.jpg">
            <p>Sherlock</p>
        </div>

        <div class="img1">
            <img src="%E5%A4%A9%E7%A9%BA%20(3).jpg">
            <p>Lake</p>
        </div>
    </div>

    <div class="foot">by Bianca</div>
    </body>
</html>

css：

.head{
    width:100%;
    height:100px;
    background-color:dodgerblue;
}

.headtitle{
    height:100px;
    width: 200px;
    float: left;
    padding-left: 10px;
}

.headlead{
    height:50px;
    width: 400px;
    float: left;
    margin-top: 25px;
}


li{
    padding:2px;
    display: inline;
}


a:link,a{
    color:snow;
    text-align:center;
    padding: 2px;
    text-decoration: none;
}

a:hover{
    color:black;
}

.headimage{
    float:right;
    margin-top:30px;
    margin-right: 5px;
}

.headimage img{
    height: 60px;
    width: 60px;
}

.headform form{
    float:right;
    height:26px;
    margin-right:50px;
}

form input{
    height:20px;
    background-color: cadetblue;
    width:100px;
    margin-top: 50px;
    border-radius: 30px;/*圆角弧*/
    float:right;
}
.body{
    background-color: cadetblue;
    width:100%;
    height:500px;
}
.bdytitle{
    color:snow;
    text-align: left;
}

.bodytitle h3{
    margin-left: 20px;
}
.bdytitle p{
    margin:20px;
}

.img1{
    border:2px solid lightgrey;
    float:left;
    text-align: center;
    margin:30px 34px;
}

.img1 img{
    margin:5px;
    width:250px;
    height:220px;
}

.img1 p{
    color:snow;
    font-size:20px;
}

.foot{
    text-align: center;
    background-color: lightgreen;
    height:50px;
    padding:20px;
    font-size: 30px;
    color:burlywood;
}

gyt478922579

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路——简单页面效果

html：<!doctype html><html> <head> <meta charset="UTF-8"> <title></title> <link href="简单页面效果实例.css" type="text/css" rel="stylesheet"> </head> <body>
复制链接

扫一扫