前端初学学习进程VI_vi 前端-CSDN博客

本文链接：https://blog.csdn.net/qq_38318537/article/details/77266713

本周没有进行前端的学习，主要是写了一系列简单的静态网页，下面将附上代码

html代码

<html>
<head>
    <title>西邮羽协</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="1.css">

</head>
<body id="body_background">
<div id="top">
    <p id="sign_up">
    <span><a href="#" id="underline" class="span1">注册</a></span>
    <span class="span_padding">|</span>
    <span class="span_padding"><a href="#" id="underline" class="span1">登录</a></span>
    </p>
</div>
<div class="background1" id="body">
<div id="div_button">
<a id="underline" href="#">
<button id="button1">
<span id="div_left_span">首页</span>
</button>
<a id="underline" href="more.html">
<button id="button2">
<span id="div_left_span">了解更多</span>
</button>
</a>
</div>
<div id="sign_center">
    <img src="sign.jpg" class="sign_jpg">
</div>
<p id="p_1"> Faster,Higher,Stronger</p>
<div id="div_join">
    <a href="#">
    <button id="button_join">
    <span id="span_join">Join us</span>
    </button>
    </a>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="4.jpg" id="img_bumen">
<span id="span_bumen">宣传部</span>
</button>
</a>
<p id="p_jieshao">在宣传部你可以学到很多综合技能，想提高个人综合能力就来宣传部吧
</p>
</div>
<div id="div_zuzhi">
<a href="#">
<button class="button_xuanchuan">
<img src="3.jpg" id="img_bumen">
<span id="span_bumen">组织部</span>
</button>
</a>
<p id="p_jieshao">如果你觉得你有较强的组织能力，策划能力，那就加入组织部吧
</p>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="2.jpg" id="img_bumen">
<span id="span_bumen">仲裁部</span>
</button>
</a>
<p id="p_jieshao">如果你想学习羽毛球的比赛规则，或者对于成为一个公平公正的裁判有兴趣，欢迎加入仲裁部
</p>
</div>
<div id="div_xuanchuan">
<a href="#">
<button class="button_xuanchuan">
<img src="1.jpg" id="img_bumen">
<span id="span_bumen">技术部</span>
</button>
</a>
<p id="p_jieshao">这个技术小分队很有可能使你们有机会进入体育馆和大神以及指导老师面对面进行交流
</p>
</div>
</div>
<p id="p_share">分享至：
<a href="#"><img src="qq.jpg" id="img_share"></a>
<a href="#"><img src="wechat.jpg" id="img_share"></a>
<a href="#"><img src="xin.jpg" id="img_share"></a>
</p>
</body>
</html>

css文件

padding:0;}
#body_background{
    background-color: gray;
}
#div_all{
    width: 80%;
    margin:0 auto;
}
#top{
    width: 100%;
    height: 30px;
    background-color: gray;
    padding-top: 0px;
}
#sign_up{
    padding-left: 90%;
    padding-top: 5px;
}
#underline{
    text-decoration: none;
}
.span1{
    color: white;
}
.span_padding{
    padding-left: 5px;
}
.background1{
    background:url(background4.jpg) 0px 0px;
    height: 100%;
    width: 100%;
    background-repeat: repeat-x;
    overflow: hidden;
}
#body{
    width:100%;
    height:100%; 
}
.sign_jpg{
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: solid 1px transparent;
        margin-top: 50px;
}
#sign_center{
    width: 150px;
    height: 150px; 
    margin: 0 auto;
}
#div_button{
    margin-left:515px;
    width: 100%;
    height:30px;
}
#button1{
    border: solid thin white;
    width: 15%;
    height: 30px;
    background-color:rgba(153, 204, 153, 0.5);
    display: inline;
}
#div_left_span{
    color: #fff;
    text-align: center;
}
#button2{
    border: solid thin white;
    width: 15%;
    height: 30px;
    margin-left: -5px;
    background-color:rgba(142, 142, 142, 0.3);
    display: inline;
}
#p_1{
    font-size: 40px;
    color: white;
    font-weight:bold;
    text-align: center;
    padding-top: 50px;
}
#button_join{
    border: dotted 2px white;
    height: 70px;
    width: 200px;
    background-color: transparent;
}
#span_join{
    color: white;
    font-size: 30px;
    font-weight: bold;

}
#div_join{
    padding-top: 50px;
    margin:0 auto;
    height: 70px;
    width: 200px;
}
.button_xuanchuan{
    height: 150px;
    width: 150px
    border:solid thin white;
    background-color:rgba(255, 255, 255, 0.2);
}
#div_xuanchuan{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 200px;
    height: 100%;
    width: 150px;
    float: left;
}
#img_bumen{
    width: 100px;
    height: 100px;
    margin:10px 25px 0px 25px;
    border-radius: 50%;
    text-align:center; 
}
#span_bumen{
    color: white;
    font-weight: bold;
    letter-spacing: 2px;
}
#p_jieshao{
    margin-top: 20px;
    color: white;
    letter-spacing: 1px;
}
#div_zuzhi{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 200px;
    height: 100%;
    width: 150px;
    float: left;
}
#p_share{
    color:white;
    text-align: right;
    font-size: 15px;
}
#img_share{
    width: 23px;
    font-weight: 23px;
    border-radius: 50%;
    padding-left: 5px;
    margin-top: 3px;
}