图片放置,并正确标记h1和h2元素

时间:2014-10-10 17:49:00

标签: html css

好的,所以我只是在玩网络开发,而我正在创建我的个人网站以获得经验。目前我有两个问题。

  1. 我有“关于”部分我似乎无法将图片移动到中心并使半径达到100%。它真的让我烦恼,因为它不起作用。我已经把CSS border-radius:100%和Margin:0 auto;但是没有工作。然后我尝试了Text-align:center;它不起作用。

  2. 我有一个从“#section”ID扩展的实线边框。但我希望它不要覆盖我的页脚。在索引页面中,它包含我不想要的页脚,但在我的其他页面上,如关于,并且它不会像我最初打算那样覆盖页脚。 同样在我的标题上我有一个H1和H3元素可以回到我的主页。我的问题是,当我将鼠标从标题向左或向右水平移动时,即使字母不存在,它仍然显示有链接。我希望链接结束单词结束的位置。

  3. 有人可以找出我做错了什么以及如何避免它?

    我将包含我的HTML索引页面,然后是关于页面,然后是我的CSS。

    索引页面,我想从固体边框中排除页脚。

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="stylesheet.css">
            <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
            <title>Dalexis The Great Critic</title>
        </head>
        <body>
            <header >
            <a href="index.html" class="headersection">
                <h1>Dalexis Peguero</h1>
            </a>
            <a href="index.html" class="headersection">
                <h3>Designing Websites Since Last Month</h3>
           </a>
            <nav class="navsection">
                <ul id="nav">
                    <li>
                        <a href="index.html" class="selected">Home</a>
                    </li>
                    <li>
                         <a href="About.html">About</a>
                    </li>
                    <li>
                         <a href="Portfolio.html">Portfolio</a>
                    </li>
                    <li>
                         <a href="Contact.html">Contact Us</a>
                    </li>
                </ul>
            </nav>
            </header>
            <div id="section">
                <section >
                 <div id="statement">
                    <h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2>
                           <h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4>
                           <h4>Make them happy: We'll make sure your customers are all happy! </h4>
                 </div>
                <div id="testimonies">
                    <h2> Client Testimonies </h2>
                    <hr style="width:90%; />
                    <p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p>
                        <h6>Home Town Loser </h3>
                    <hr style="width:90%; />
                    <p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p>
                        <h6>MArvelous Marv</h3>
                    <hr style="width:90%; />
                    <p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p>
                        <h6>Another Home Town Loser </h3>
                    <hr style="width:90%; />
                    </div>
    
                </section>
            </div>
            <footer>
                    <a href="http://facebook.com"><img src="IMG/facebook-logo.png" alt="facebook" class="socialicon"></a>
                    <a href="http://twitter.com"><img src="IMG/twitter-logo.png" alt="twitter" class="socialicon"></a>
                    <p>&copy Dalexis Industries </p>
            </footer>
        </body>
    </html>
    

    这是我的页面,我想让我的照片居中并使半径达到100%。

    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="stylesheet.css">
            <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
            <title>Dalexis The Great Critic</title>
        </head>
        <body>
            <header >
               <a href="index.html" class="headersection">
                <h1>Dalexis Peguero</h1>
            </a>
            <a href="index.html" class="headersection">
                <h3>Designing Websites Since Last Month</h3>
           </a>
            <nav class="navsection">
                <ul id="nav">
                    <li>
                        <a href="index.html">Home</a>
                    </li>
                    <li>
                         <a href="About.html" class="selected">About</a>
                    </li>
                    <li>
                         <a href="Portfolio.html">Portfolio</a>
                    </li>
                    <li>
                         <a href="Contact.html">Contact Us</a>
                    </li>
                </ul>
            </nav>
            </header>
    
    
    
                 <img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" > 
                 <h3>About<h3>
                 <p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p> 
                 <p> If you like to follow me on facebook you can find me at <a href="http://facebook.com/dalexis">Dalexis</a>.
            </div>
            <footer>
                    <a href="http://facebook.com"><img src="IMG/facebook-logo.png" alt="facebook" class="socialicon"></a>
                    <a href="http://twitter.com"><img src="IMG/twitter-logo.png" alt="twitter" class="socialicon"></a>
                    <p>&copy Dalexis Industries </p>
            </footer>
        </body>
    </html>
    

    CSS

     body {
          font-family: abel;
      }
    
      h1, h3 {
             text-align:center;
       }
    
     a {
       text-decoration: none;
       color: #373737;
      }
    
      ul {
         list-style: none;
       }
    
       img {
           max-width: 100%;
    
        }
    
    html {
         color: #373737;
         background-image:url('bkg-blu.jpg');
     }
    /******************************
    HEADER    
    ***********************************/
    
    
     }
    
     #nav li  {  display:inline; border-style:groove;  }
     #nav  {text-align:center; }
    
    
    
    /******************************
    nav    
    ***********************************/
    
    
    /******************************
    SECTION
    ***********************************/
    
    
    
     #statement {
                text-align: center;
    }
    
    
      #testimonies {
                   text-align: center;
       }
     section h2 {
             margin: 0 20px;
             padding: 0px 60px;
      }
    
      #section {
               border-style:solid;
               border-width: 1px;
               width: 90%;
               height: 100%;
               padding: 5px 5px;
               margin:15px 5px 15px 100px;       
       }
    
       section div p img {
                  font-style:italic;
                  color: blue;
        }
    
    
    .clients {
      width: 40px;
      height: 40px;
      margin: 0 10px;
      padding: 10px;
      font-style: italic;
    } 
    /******************************
    footer
    ***********************************/
    
    .socialicon {
      width: 20px;
      height: 20px;
      margin: 0 5px;
    } 
    
     footer img {
    
            margin: 0;
            color: fff;
            clear: both;
    
      }
    
    
      .selected, a:hover {
                color: grey;
       }
    
       /******************************
       PAGE:  ABOUT 
       /***************************/
    
       .about-photo {
                    width: 250px;
                    height: 200px;
                    display: block;
                    display: block;
      margin: 0 auto 30px;
      max-width: 150px;
      border-radius: 100%;
    
        }
    

1 个答案:

答案 0 :(得分:1)

问题1的答案。

更改此

<img src="IMG/dalexis.jpg" alt="my photo">

到此

<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>

CSS

.about-photo {
    width: 250px;
    height: 200px;
    margin: 0 auto;
}
.about-photo img {
    width: 100%;
    height: 100%;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
}