html body{
margin: 0;
padding: 0;
background-color: #e5e5e5;
}
hr{
border: 0;
border-top: 1px solid #eee;
box-sizing: content-box;
height: 0;
overflow: visible;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000066;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover:not(.active) {
background-color: #848dff;
}
.active {
background-color: #0000ff;
}
.navbar{
margin: auto;
padding: auto;
position: center;
height: 51px;
}
.prof{
margin: 5px;
padding: 0;
height: 400px;
width: 300px;
background-color: #ffffff;
}
.prof h1{
font-family: "Open Sans", Sans-serif;
font-size:24px;
text-align:center!important;
font-style: none;
}
.prof p{
font-family: "Open Sans", Sans-serif;
text-align:center!important;
font-style: none;
}
.center{
width: 106px;
height: 106px;
border-radius: 50%;
border-style: none;
position: middle;
margin-top: 5px;
margin-bottom: 10px;
}
.sort{
margin: 5px;
padding: 0;
height: 115px;
width: 300px;
background-color: #4c4cff;
}
.sort ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: "Open Sans", Sans-serif;
text-align: center;
}
.sort li a {
display: block;
color: #ffffff;
padding: 8px 8px;
text-decoration: none;
}
.sort li a:hover {
background-color: #0000ff;
color: #ffffff;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>AUXILIUM</title>
</head>
<body>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="index.php" alt="Home"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#" alt="Profile"><i class="fa fa-user"></i></a></li>
<li><a href="#" alt="Students"><i class="fa fa-users"></i></a></li>
<li><a href="#" alt="Schedules"><i class="fa fa-clock-o"></i></a></li>
</ul>
</div>
</header>
<div class="prof">
<h1>My Profile</h1>
<p class="center">
<img src="avatar3.png" class="center">
</p>
<hr>
<p><a href="#"><i class="fa fa-address-book-o">Professor Name</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Professor ID</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Department</i></p>
</div>
<div class="sort">
<ul>
<li><a href="#">Year</a></li>
<li><a href="#">Section</a></li>
<li><a href="#">Course</a></li>
</ul>
</div>
</body>
</html>
嗨初学者在这里需要帮助我当前的项目(它仍在进行我一分钟前开始)我需要的图像可以放在我需要它的位置,当我添加新的标签,它保持走开,请帮忙,谢谢你。
HTML
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>AUXILIUM</title>
</head>
<body>
<header>
<div class="navbar">
<ul>
<li><a class="active" href="index.php" alt="Home"><i class="fa fa-home"></i>Home</a></li>
<li><a href="#" alt="Profile"><i class="fa fa-user"></i></a></li>
<li><a href="#" alt="Students"><i class="fa fa-users"></i></a></li>
<li><a href="#" alt="Schedules"><i class="fa fa-clock-o"></i></a></li>
</ul>
</div>
</header>
<div class="prof">
<h1>My Profile</h1>
<p class="center">
<img src="avatar3.png" class="center">
</p>
<hr>
<p><a href="#"><i class="fa fa-address-book-o">Professor Name</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Professor ID</i></p>
<p><a href="#"><i class="fa fa-id-card-o">Department</i></p>
</div>
<div class="sort">
<ul>
<li><a href="#">Year</a></li>
<li><a href="#">Section</a></li>
<li><a href="#">Course</a></li>
</ul>
</div>
</body>
</html>
CSS
html body{
margin: 0;
padding: 0;
background-color: #e5e5e5;
}
hr{
border: 0;
border-top: 1px solid #eee;
box-sizing: content-box;
height: 0;
overflow: visible;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000066;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover:not(.active) {
background-color: #848dff;
}
.active {
background-color: #0000ff;
}
.navbar{
margin: auto;
padding: auto;
position: center;
height: 51px;
}
.prof{
margin: 5px;
padding: 0;
height: 400px;
width: 300px;
background-color: #ffffff;
}
.prof h1{
font-family: "Open Sans", Sans-serif;
font-size:24px;
text-align:center!important;
font-style: none;
}
.prof p{
font-family: "Open Sans", Sans-serif;
text-align:center!important;
font-style: none;
}
.center{
width: 106px;
height: 106px;
border-radius: 50%;
border-style: none;
position: middle;
margin-top: 5px;
margin-bottom: 10px;
}
.sort{
margin: 5px;
padding: 0;
height: 115px;
width: 300px;
background-color: #4c4cff;
}
.sort ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family: "Open Sans", Sans-serif;
text-align: center;
}
.sort li a {
display: block;
color: #ffffff;
padding: 8px 8px;
text-decoration: none;
}
.sort li a:hover {
background-color: #0000ff;
color: #ffffff;
}
你可以看到它是一个初学者,这就是为什么代码很少而设计仍然很简单。
答案 0 :(得分:0)
尝试将中心类更改为:
.center{
width: 106px;
height: 106px;
border-radius: 50%;
border-style: none;
margin: 5px auto 10px auto;
}
通过将左右边距设置为auto
,它会自动居中。