将菜单圈放在页面左侧和右侧的图像上方

时间：2018-04-19 16:06:22

标签： html css html5 css3 

@charset "utf-8";

body {
  background-color: #000;
  font-family:'Baskerville', 'Palatino Linotype', 'Palatino', 'Century Schoolbook L', 'Times New Roman', 'serif'
}

.homepage {
  background-image: url(pagepics/big_oscar.png), url(pagepics/emmy.png);
  background-position: left, right;
  background-repeat: no-repeat;
  background-size: 220px, 220px;       
  padding: 250px;

}

.centeredImage {
  padding-left: 750px;  
  top: 50%;
  left: 50%;
  margin-top: 20px;
  
}

h2 {
  font-size: 30px;
  color: white;
  text-align: center;
	
}

h3 {
	font-size: 27.5px;
	color: cornflowerblue;
}

#header1{
	width:1220px;
	margin: 0 auto;
	height:125px;
	background-image:url(pagepics/oscars-banner3.jpg);
}

#header2{
	width:1100px;
	margin: 0 auto;
	height:100px;
	
	background-image:url(pagepics/emmybanner.png);
}

.indent {
    text-indent: 50px;
}

.link1 {
	color: red;
	text-align: center;
}

#footer {
    background-color: #000;
	color: red;
	text-align: center;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#footer1 {
	color: red;
	text-align: center;
}
   
img.floatLeft {
    float:left; 
    margin:5px;
	
}


#centerText1 {
	text-align: center;
	color: red; 
}

li h3 {
    margin: .1px 0;
}

article {
  position: relative;
  z-index: 1;
}

.article:before {
  content: " ";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .3; 
  z-index: -1;
  background: url(pagepics/emmy.png);

}

.menu-container {
  text-align:center;
}

.ca-menu {
    padding: 0;
    margin: 50px auto;
    width: 140px;
	display:inline-block;
}

.ca-menu li{
    width: 150px;
    height: 150px;
	/*Circle Size*/
    border: 10px solid blue;
	/*border color before spin*/
    overflow: hidden;
    position: relative;
    float:left;
    background: red;
	/*background before spin*/
    margin-right: 10px;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
	/*circle vs square*/
    transition: all 1000ms linear;
}

.ca-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: white;
	/*text color before spin*/
    position:relative;
}

.ca-icon{
    font-size: 18px;
	text-shadow: 0px 0px 10px #101254;
    line-height: 135px;
    position: static;
	padding-left: 15px;
    width: 50px;
    left: 20px;
    text-align: center;
    transition: all 900ms linear;
}

.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 50px;
    top: 20px;
}

/*.ca-main{
    font-size: 15px;
	color: #000;
    transition: all 300ms linear;
}*/
/*.ca-sub{
    font-size: 14px;
    color: #000;
    transition: all 300ms linear; 
}*/

.ca-menu li:hover{
    background: blue;
    border-color: red;
    transform: rotate(1440deg);
} /* colors after spin*/

.ca-menu li:hover .ca-icon{
    color: #BEFC00;
	font-size: 18px;
/*text size after spin*/
}

.ca-menu li:hover .ca-main{
    display: none;
}

.ca-menu li:hover .ca-sub{
    opacity: 8.0;
}

video {
	display:block;
	width: 30%;	height: 30%;
	margin:0 auto;
}

table, th, td {
	color: cornflowerblue;
	margin:auto;
    border: 3px solid red;
}

.th1 {
	color: white;
}

caption {
	font-size: 40px;color: white;
	text-align: center;
}

.table1 {
    width:85%;
    margin:auto;
    font-size:25px;
	padding: 40px;
    border:5px solid #D8FF01;
}


.button-3d {
  position:relative;
  width: auto;
  display:inline-block;
  color: white;
  text-decoration:none;
  border-radius:5px;
  border:solid 3px yellow;
  background:red;
  text-align:center;
  padding:16px 18px 14px;
  margin: 12px;
  transition: all 0.1s;
  box-shadow: 0px 5px 0px blue;
}

.button-3d:active{
    box-shadow: 0px 10px 0px white;
    position:relative;
    top:4px;
}

.link {
	font-size: 30px;
}

#div1 {
  width: 350px;
  height: 145px;
  padding: 10px;
  border: 5px solid #D8FF01;
  margin: auto;
}

#div2 {
	margin:auto;
    width: 350px;
    height: 145px;
    padding: 10px;
    border: 5px solid #D8FF01;
} 
#div3 {
	margin:auto;
    width: 350px;
    height: 145px;
    padding: 10px;
    border: 5px solid #D8FF01;
}

#div4 {
	margin:auto;
    width: 350px;
    height: 145px;
    padding: 10px;
    border: 5px solid #D8FF01;
}

textarea.myTextBox {
  width: 40%;
  height: 75px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 5px solid #D8FF01;
  border-radius: 4px;
  background-color: #000;
  color: white;
  font-weight: bolder;
  resize: both;
}

.space {
	padding:10px;
    margin:10px;
}

.font {
	font-weight: bold;
	font-size: 27.5px;
	color: cornflowerblue;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Oscar/Emmy Fan Page">
<meta name="author" content="Brad Anderson">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Oscar, Emmy, Academy Awards, Awards Show, statuette, Movies, Television, TV">

<title>Oscar/Emmy Information Home Page</title>

<link href="AndersonBradCSS.css" rel="stylesheet" type="text/css">


</head>

<body class="homepage">

<div class="menu-container">
	
<header>
		
<ul class="ca-menu">
	<li>
		<a href="AndersonBradHomePage.html" target="_blank">
            <span class="ca-icon"><strong>Home Page</strong></span>
           </a>
	</li>
</ul>

<ul class="ca-menu">
	<li>
		<a href="OscarTrivia.html" target="_blank">
            <span class="ca-icon"><strong>Oscar Trivia</strong></span>
           </a>
	</li>
</ul>

<ul class="ca-menu">
	<li>
		<a href="EmmyTrivia.html" target="_blank">
            <span class="ca-icon"><strong>Emmy Trivia</strong></span>
           </a>
	</li>
</ul>

<ul class="ca-menu">
	<li>
		<a href="OscarWinners.html" target="_blank">
            <span class="ca-icon"><strong>Oscar Winners</strong></span>
           </a>
	</li>
</ul>

<ul class="ca-menu">
	<li>
		<a href="EmmyWinners.html" target="_blank">
            <span class="ca-icon"><strong>Emmy Winners</strong></span>
           </a>
	</li>
	</ul>	

<ul class="ca-menu">
	<li>
		<a href="PretendBestPicture.html" target="_blank">
            <span class="ca-icon"><strong>Best Picture???</strong></span>
           </a>
	</li>                                                                                                                 </ul>
	
<ul class="ca-menu">
	<li>
		<a href="EmmyChange.html" target="_blank">
            <span class="ca-icon"><strong>Change Emmys</strong></span>
           </a>
	</li>                                                                                                                 </ul>	

</header>	

<h5 id="footer">&copy; BPA Productions 2018</h5>
	</div>
</body>

</html>

不可否认，难以接受我并不难做到，但这一次是不合适的，至少对我来说是这样。我想要做的是将我创建的菜单圈放在页面两侧的图像上方。我尝试将它们放在标头标签中，但这也不起作用。总的来说，我需要在我已经拥有的7个圈子中添加至少一个圈子。我可以根据需要调整圆圈/文字的大小，但我确实希望它们略微重叠。我相信我已经包含了所有需要的代码。如果可能的话，我宁愿将其保留在HTML范围内。 

<body class="homepage">

<div class="menu-container">

<ul class="ca-menu">
    <li>
        <a href="AndersonBradHomePage.html" target="_blank">
        <span class="ca-icon"><strong>Home Page</strong></span>
        </a>
    </li>
  </ul>

<ul class="ca-menu">
    <li>
        <a href="OscarTrivia.html" target="_blank">
        <span class="ca-icon"><strong>Oscar Trivia</strong></span>
        </a>
    </li>
  </ul>

<ul class="ca-menu">
    <li>
        <a href="EmmyTrivia.html" target="_blank">
        <span class="ca-icon"><strong>Emmy Trivia</strong></span>
        </a>
   </li>
</ul>

<ul class="ca-menu">
    <li>
        <a href="OscarWinners.html" target="_blank">
        <span class="ca-icon"><strong>Oscar Winners</strong></span>
        </a>
    </li>
</ul>

<ul class="ca-menu">
    <li>
        <a href="EmmyWinners.html" target="_blank">
        <span class="ca-icon"><strong>Emmy Winners</strong></span>
        </a>
    </li>
</ul>   

<ul class="ca-menu">
    <li>
        <a href="PretendBestPicture.html" target="_blank">
        <span class="ca-icon"><strong>Best Picture???</strong></span>
        </a>
    </li>
</ul>

<ul class="ca-menu">
    <li>
        <a href="EmmyChange.html" target="_blank">
        <span class="ca-icon"><strong>Change Emmys</strong></span>
        </a>
    </li>
</ul>   


<h5 id="footer">&copy; BPA Productions 2018</h5>
</div>

.homepage {
    background-image: url(pagepics/big_oscar.png), url(pagepics/emmy.png);
    background-position: left, right;
    background-repeat: no-repeat;
    background-size: 220px, 220px;       
    padding: 250px;
}

h2 {
    font-size: 30px;
    color: white;
    text-align: center;
}

h3 {
    font-size: 27.5px;
    color: cornflowerblue;
}

#footer {
    background-color: #000;
    color: red;
    text-align: center;
    height: 60px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

li h3 {
    margin: .1px 0;
}

.menu-container {
    text-align:center;
}

.ca-menu {
    padding: 0;
    margin: 50px auto;
    width: 140px;
    display:inline-block;
}

.ca-menu li{
    width: 150px;
    height: 150px;
    /*Circle Size*/
    border: 10px solid blue;
    /*border color before spin*/
    overflow: hidden;
    position: relative;
    float:left;
    background: red;
    /*background before spin*/
    margin-right: 10px;
    box-shadow: 5px 5px 2px rgba(0,0,0,0.2);
    border-radius: 125px;
    /*circle vs square*/
    transition: all 1000ms linear;
}

.ca-menu li a{
    text-align: left;
    display: block;
    width: 100%;
    height: 100%;
    color: white;
    /*text color before spin*/
    position:relative;
}

.ca-icon{
    font-size: 18px;
    text-shadow: 0px 0px 10px #101254;
    line-height: 135px;
    position: static;
    padding-left: 15px;
    width: 50px;
    left: 20px;
    text-align: center;
    transition: all 900ms linear;
}

.ca-content{
    position: absolute;
    left: 120px;
    width: 370px;
    height: 50px;
    top: 20px;
}

.ca-menu li:hover{
    background: blue;
    border-color: red;
    transform: rotate(1440deg);
} /* colors after spin*/

.ca-menu li:hover .ca-icon{
    color: #BEFC00;
    font-size: 18px;
    /*text size after spin*/
}

.ca-menu li:hover .ca-main{
    display: none;
}

.ca-menu li:hover .ca-sub{
    opacity: 8.0;
}

0 个答案:

没有答案
相关问题
最新问题