学习了半个月的html+css做出来的一个简单网页

最新推荐文章于 2024-07-25 00:55:07 发布

南希owo

最新推荐文章于 2024-07-25 00:55:07 发布

阅读量107

点赞数

文章标签： html 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_56158343/article/details/128708413

版权

学习了半个月的html+css，想找点网页练练手，嘿嘿，请大家看看有没有啥需要改进的地方（第一次写博客还有点小紧张~~）

这是链接(85条消息) HTML、css项目上手练习_雨云21的博客-CSDN博客_html和css练习

我是看着这个做的，里面也有源码

先看一下效果吧

导航栏还加了点hover效果

嘿嘿，看起来是有点简单哈

下面是html部分的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>音乐--和谐现场</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <div class="content">
        <div class="header">
            <div class="head clearfix">                
                <div class="head-left">
                    <ul class="clearfix">
                        <li><a href="">首页</a></li>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">简介</a></li>
                        <li><a href="">团队</a></li>
                        <li><a href="">项目</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                </div>
                <div class="head-right clearfix">
                    <div>
                        <p>天堂鸟</p>
                        <p style="font-size:16px">Bird of Paradise</p>
                    </div>
                </div>
            </div>
            <div class="head-bottom">
                <div>
                    <p class="one">震撼来袭</p>
                    <p class="two">来自心灵深处，无限激情！</p>
                    <p class="three"><span>From</span><span>deep</span><span>heart，infinite</span><span>passion！</span></p>
                </div>
            </div>
        </div>
        <div class="team">
            <div class="team-top">
                <p>我的团队</p>
                <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            </div>
            <div class="team-bottom">
                <div><img src="images/team1.jpg"><p>Elizabeth</p></div>
                <div><img src="images/team2.jpg"><p>Max Payne</p></div>
                <div><img src="images/team3.jpg"><p>Diana</p></div>
                <div><img src="images/team4.jpg"><p>Johnny Blaz</p></div>
            </div>
        </div>
        <div class="foot">
            <div class="foot-top">
                <p>让你自己可以，订阅我们</p>
                <span>Make Yourself Available, Subscribe To Us</span>
            </div>
            <div class="foot-middle clearfix">
                <div class="left">
                    <p>关于我们</p>
                    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
                </div>
                <div class="center">
                    <p>顾客服务</p>
                    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span>
                </div>
                <div class="right">
                    <p>联系我们</p>
                    <span>VISIT US<br>MAIL US<br>CALL US</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

下面是css部分的代码

* {
    margin: 0;
    padding: 0;
}
.clearfix:after {
    content:'';
    display: block;
    clear: both;
}
.content {
    width: 1519px;
    margin: 0 auto;
    padding: -5px;
}
.header {
    width: 1519px;
    height: 940px;
    background-image: url(../images/banner4.jpg);

}
.head {
    margin-left: 150px;
    height: 100px;
    padding-top: 50px;
}
.head-left {
    width: 800px;
    height: 100px;
    float: left;
    
}
.head-left ul li {
    width: 130px;
    list-style: none;
    font-weight: bold;
    float: left;
    text-align: center;
    font-size: 20px;

}
.head-left ul li a {
    color: white;
    text-decoration: none;
}
.head-left a:hover {
    font-size: 26px;
    display: block;
}
.head-right div {
    float: right;
    padding-right: 180px;
}
.head-right div p {
    height: 30px;
    color: white;
    font-size: 30px;
    text-align: center;
    padding-top: 20px;
}
.head-bottom {
    width: 1200px;
    height: 400px;
    margin-top: 400px;
    margin-left: 200px;
}
.head-bottom div .one {
    font-size: 50px;
    color: #EAE6E6;
    letter-spacing: 20px;
}
.head-bottom div .two {
    font-size: 20px;
    color: #EB0000;
    letter-spacing: 20px;
}
.head-bottom div .three {
    font-size: 20px;
    color:#FF0000;
    letter-spacing: 10px;
}
.team-top {
    padding: 50px 0;
    width: 1500px;
    text-align: center;
}
.team-top p {
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 10px;
    padding: 10px 0;
}
.team-top h3 {
    color: #696969;
}
.team-bottom {
    text-align: center;
    padding-bottom: 80px;
}
.team-bottom div {
    display: inline-block;
    padding: 10px;
    border: 1px solid #A9A9A9;
}
.team-bottom img {
    width: 280px;
}
.team-bottom p {
    padding-top: 10px;
    line-height: 10px;
    font-weight: bold;
    color: #696969;
}
.foot {
    width: 1519px;
    background-color: black;
    color: white;
    position: relative;
    padding-bottom: 100px;
}
.foot-top {
    width: 1000px;
    padding-left: 60px;
    padding-top: 20px;
}
.foot-top p {
    display: inline-block;
    font-size: 24px;
    padding: 0 20px;
}
.foot-middle {
    padding: 100px 100px 0;
    border-bottom: 2px solid #A9A9A9;
}
.foot-middle > div {
    width: 330px;
    float: left;
    padding: 0 50px 50px 50px;
}
.foot-middle  p {
    width: 280px;
    padding: 10px;
    font-size: 20px;
    border-bottom: 2px solid #FF7F50;
}
.foot-middle  span {
    display:block;
    padding: 20px 0;
    line-height: 2em;
    color: #A9A9A9;
}

基本就这样了，网页有点简单哈，复杂的咱目前也不会