无论屏幕大小如何,如何将链接保持在屏幕右侧?

时间:2016-07-13 18:38:20

标签: html css

以下是问题的代码。我希望页面右侧中心的链接保持在页面的右侧中心,无论屏幕在查看它的人的任何设备上有多大。



.purplebox {
  background-color: #515151;
  position: fixed;
  top: 0px;
  right: 0;
  width: 100%;
  height: 50px;
  border: 3px solid #515151;
  float: center-right;
  font-family: 'Oswald', sans-serif;
}
.greenbox {
  top: -100px;
  width: 100%;
  height: 500px;
  z-index: 2;
  text-align: center;
  margin: 150px 100px 30px 10px;
  float: center;
  font-family: 'Oswald', sans-serif;
}
.blog {
  top: -9px;
  position: absolute;
  right: 340px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.contact {
  top: -9px;
  position: absolute;
  right: 590px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.mybutton {
  top: -9px;
  position: absolute;
  right: 600px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.buttons {
  position: absolute;
  top: -9px;
  right: 430px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.bottom {
  background-color: #6d6d6d;
  position: absolute;
  width: 100%;
  height: 80px;
  right: 0;
  top: 883px;
}
.legal {
  top: -3px;
  position: absolute;
  right: -220px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.home {
  top: -3px;
  position: absolute;
  right: -70px;
  width: 200px;
  height: 0px;
  border: 3px solid #ffffff;
}
.picture {
  float: center-left;
  position: fixed;
  top: -25px;
  left: 50px;
  font-family: 'Secular One', sans-serif;
  color: #353535;
  font-size: 100%;
}
a:link {
  position: absolute;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}
.large {
  font-size: 300%;
}
h1 {
  font-size: 250%;
}

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Secular+One" rel="stylesheet">
    <body link="#515151" vlink="#515151" alink="#515151">
<div class="purplebox">

  <div class="buttons">

      <p><b><a href="creations.html" target="_self">Creations</a></b>
      </p>
      <center>
  </div>


  <div class="mybutton">

    <body link="#515151" vlink="#515151" alink="#515151">
      <center>
        <p><b><a href="about.html" target="_self">About</a></b>
        </p>
        <center>

  </div>


  <div class="picture">
    <h1>A</h1> 

  </div>



  <div class="blog">

    <body link="#515151" vlink="#515151" alink="#515151">
      <p><b><a href="http://andrewdevs.tumblr.com/" target="self">Blog</a></b>
      </p>
      <center>

  </div>





  <div class="contact">

    <body link="#515151" vlink="#515151" alink="#515151">
      <p><b><a href="contact.html" target="_self">Contact</a></b>
      </p>
      <center>



        <div class="legal">

          <body link="#515151" vlink="#515151" alink="#515151">
            <p><b><a href="legal.html" target="_self">Legal</a></b>
            </p>
            <center>
</body>
&#13;
&#13;
&#13;

0 个答案:

没有答案