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