前端初学学习进程VII_前端 vii-CSDN博客

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

这几天呢将之前那个网站做成了完善，使之前的按钮里的链接不再是固定链接。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>more</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="2.css">
</head>
<body>
<div id="div_all">
<div id="div_head">
<a href="home.html">
<div id="div_home">
<p id="p_home">羽协首页</p> 
</div>
</a>
<a href="http://www.xiyou.edu.cn/" target="_blank">
<div id="div_more_xupt">
<p id="p_more_xupt">西邮官网</p>    
</div>
</a>
<a href="http://www.badmintoncn.com/" target="_blank">
<div id="div_more_acc">
<p id="p_more_acc">中羽在线</p> 
</div>
</a>
</div>
<img src="more2.jpg" id="img_more">
<div id="div_body">
<div id="div_left">
<a href="#">
<button id="button_bumen">
    <span id="span_left">部门介绍</span>
</button>
</a>
<a href="act.html">
<button id="button_other">
    <span id="span_left">活动介绍</span>
</button>
</a>
<a href="join.html">
<button id="button_other">
    <span id="span_left">加入我们</span>
</button>
</a>
<a href="suggest.html">
<button id="button_other">
    <span id="span_left">更多建议</span>
</button>
</a>
</div>
<div id="div_right">
<div id="div_img">
    <img src="sign.jpg" id="img_all"></div>
    <span id="span_xuanchuan">宣传部</span>
    <p>主要负责每次活动的宣传工作，以及比赛前的场地布置。组织比赛，比赛边裁，拉外联赞助都是我们的兼职，同时负责羽协的对外宣传，形象维护，危机公关，还是很厉害的。在宣传部你可以学到很多综合技能，想提高个人综合能力就来宣传部吧。</br></p>
    <div id="div_img">
    <img src="sign.jpg" id="img_all"></div>
    <span id="span_xuanchuan">组织部</span>
    <p>主要负责每次比赛的组织工作，比赛流程的控制，协调运动员与裁判，以及比赛中坐镇技术台。负责赛制制定与赛制革新赛程安排，比赛中各种突发事件的处理，维持比赛有序进行。如果你觉得你有较强的创新意识，组织能力，策划能力，那就加入组织部吧。</br></p>
<div id="div_img">
    <img src="sign.jpg" id="img_all"></div>
    <span id="span_xuanchuan">仲裁部</span>
    <p>主要负责每次比赛中的裁判工作，这就要求你很清楚羽毛球比赛的规则了，当然仲裁部也是技术含量最高的一个部门，如果你想学习羽毛球的比赛规则，或者对于成为一个公平公正的裁判有兴趣，欢迎加入仲裁部。</br></p>
<div id="div_img">
    <img src="sign.jpg" id="img_all"></div>
    <span id="span_xuanchuan">技术部</span>
    <p>为校队选拔一些选手(类似于后备人员)以及对羽协也培养一些可以带大家一起进步的同志。前提是你要加入上面的三个部门，之后再进行筛选，毛遂自荐也好，我们暗中观察发现你们也好，总之这个技术小分队很有可能使你们有机会进入体育馆和大神以及指导老师面对面进行交流，激动不？心动不？心动不如行动，快快加入我们吧！小哥哥小姐姐在这里等你们！</br></p>
</div>
</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部分：
*{
    margin: 0;
    padding:0;
}
#div_all{
    width: 80%;
    margin:0 auto;
}
#div_head{
    width: 100%;
    height: 80px;
}
#div_home{
    width: 100px;
    height: 35px;
    margin-left: 700px;
    border-left: solid thin black;
    border-right: solid thin black;
    float: left;
}
#p_home{
    font-size: 15px;
    text-align: center;
    padding-top: 5px;
    color: black;
    font-weight: bold;
}
#div_more_xupt{
    width: 100px;
    height: 35px;
    border-right: solid thin black;
    float:left;
}
#p_more_xupt{
    font-size: 15px;
    text-align: center;
    padding-top: 5px;
    color: black;
    font-weight: bold;
}
#div_more_acc{
    width: 100px;
    height: 35px;
    border-right: solid thin black;
    float: left;
}
#p_more_acc{
    font-size: 15px;
    text-align: center;
    padding-top: 5px;
    color: black;
    font-weight: bold;
}
#img_more{
    height: 200px;
    width: 80%;
    margin-top: -45px;
    padding-left: 10%;
}
#div_body{
    margin-left: 15%;
    width: 1000px;
    height:500px;
    padding-top: 30px;
}
#div_left{
    width: 150px;
    height: 500px;
    background-color: #F0F0F0   ;
    float: left;
}
#button_bumen{
    width: 150px;
    height: 60px;
    background-color: #00BB00;
    border:solid thin transparent;
}
#span_left{
    color: black;
    letter-spacing: 3px;
    font-size: 15px;
}
#button_other{
    width: 150px;
    height: 60px;
    background-color: #d0d0d0;
    border:solid thin transparent;
    margin-top: 5px;
}
#div_right{
    width:600px;
    height: 500px;
    margin-left: 200px;
}
#img_all{
    border:solid thin transparent;
    width: 30px;
    height:30px;
    border-radius: 50%;
}
#span_xuanchuan{
    padding-left: 10px;
font-size: 20px;
font-family: sans-serif;
}
#div_img{
    width: 30px;
    height: 30px;
    float: left;
}
#p_share{
    color:black;
    text-align: right;
    font-size: 15px;
}
#img_share{
    width: 20px;
    font-weight: 20px;
    border-radius: 50%;
    padding-left: 5px;
    margin-top: 3px;
}