HTML / CSS标题问题 [英] HTML/CSS header problem

查看：57 发布时间：2019/6/12 23:02:45 CSS HTML

本文介绍了HTML / CSS标题问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好我是游戏开发人员和Web开发新手我已经开始制作自己的静态网站但是我遇到了一些问题

这里变焦价值是100％，它完美运行

100％ZOOM VALUE PICTURE

这里缩放值是190％，因为你可以看到一些菜单元素消失了

190％ZOOM VALUE PICTURE

现在我的最后一个问题是HOME按钮有背景和边框，但HOME文本不居中我想修复背景颜色和边框，以便文本可以在其中居中。

网站是 sadeqrasheed.com 测试，您可以检查元素以查看我的`HTML / CSS`

HTML CODE

Hello I am a game developer and new to web development And I have started making my own static site but I am facing a couple of problems

here the zoom value is 100% and it works perfectly
100% ZOOM VALUE PICTURE

Here the zoom value is 190% as you can see some of the menu elements are gone

190% ZOOM VALUE PICTURE

Now my final problem is the HOME button has a background and a border but the HOME text is not centered I want to fix the background-color and the border so the text can be centered inside it.

site is sadeqrasheed.com test and you can inspect the elements to see my `HTML/CSS`

HTML CODE

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HOME</title>
<link rel="stylesheet" href="des.css">

</head>

<body>
<header class="header">
<div class="logo">
SADEQ<span>rasheed</span>
</div>

<nav class="main-nav">
<ul>
<li class="active"><a href="#">HOME</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SAMPLES</a></li>
<li><a href="#">HIRE</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">DRUSKERS</a></li>
</ul>
</nav>
<img class="path" src="img/Path.png">
</header>

<section>

</section>

</body>
</html>

css样式表是：

css style sheet is :

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,700,600,400italic);
/* CSS Document */

body {
	font-family: 'Open Sans', sans-serif;
	margin:0;
	}
.header{
    width:100%;
	height:80px;
	background-color: #76c7c0;
	position:relative;
	}	
	.path {
		position:absolute;
		bottom:0px;
		width: 100%;
		}
	.logo {
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	position:absolute;
	left :140px;
	top:20px;
	}
	.logo span{
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	font-size: 25px;
	font-weight: 400;
	line-height: 30px;
		}
		/*naaav*/
		.main-nav{
			width:100%;
			}
		
		.main-nav ul{
			list-style:none;
			position:absolute;
			top:18px;
			left :500px;
            width:750px;

			}
		.main-nav li {
			float: left;
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 15.6px;
	margin-right:35px;
			}
		
		.main-nav li a {
			text-decoration:none;
				color: #ffffff;

			}
			.active {
			    height: 30px;
				width: 70px;
				border-bottom: 4px solid #5B9A94;
				border-radius: 5px;
	            background-color: #62A29E;
				}

HTML / CSS标题问题 [英] HTML/CSS header problem

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录关闭

HTML / CSS标题问题 [英] HTML/CSS header problem

问题描述

推荐答案

相关文章

其他开发语言最新文章

热门教程

热门工具

登录 关闭

登录关闭