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

Html 图片放置,并正确标记h1和h2元素,html,css,Html,Css,好吧,我只是在玩网页开发,我制作我的个人网站只是为了获得经验。目前我有两个问题 我有我的“关于”部分,我似乎无法将我的图片移动到中心,使半径达到100%。我真的很烦,因为它不起作用。我已经把CSS边框半径:100%和边距:0自动;但是什么都没用。然后我尝试了文本对齐:居中;但它不起作用 我有一个从“#section”ID延伸的实心边框。但我不希望它覆盖我的页脚。在索引页面中,它包含了我不想要的页脚,但在我的其他页面上,如About,Contact,它并没有像我最初打算的那样覆盖页脚。 在我的页眉

好吧,我只是在玩网页开发,我制作我的个人网站只是为了获得经验。目前我有两个问题

  • 我有我的“关于”部分,我似乎无法将我的图片移动到中心,使半径达到100%。我真的很烦,因为它不起作用。我已经把CSS边框半径:100%和边距:0自动;但是什么都没用。然后我尝试了文本对齐:居中;但它不起作用

  • 我有一个从“#section”ID延伸的实心边框。但我不希望它覆盖我的页脚。在索引页面中,它包含了我不想要的页脚,但在我的其他页面上,如About,Contact,它并没有像我最初打算的那样覆盖页脚。 在我的页眉上还有一个返回主页的H1和H3元素。我的问题是,当我将鼠标从标题水平向左或向右移动时,它仍然显示有链接,即使字母不在那里。我希望链接在单词的结尾处结束

  • 有人能找出我做错了什么,以及我如何避免它吗

    我将包括我的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>
    

    问题1的答案

    改变这个

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

    一个查看问题的链接会很有帮助。对我来说,它看起来像你正在体验的:(圆形图片是的,这正是我所想的!!但不知怎么的,我无法理解它。
     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%;
    
        }
    
    <img src="IMG/dalexis.jpg" alt="my photo">
    
    <div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>
    
    .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%;
    }