HTML-文本不在按钮内_Html_Css

HTML-文本不在按钮内

html css

HTML-文本不在按钮内,html,css,Html,Css,我是新来的。我只是想问一下这个问题文本似乎在盒子外面，看起来很奇怪。如何使文本显示在框内？我在编码方面做错了什么？我认为我的编码没有任何问题。顺便说一下，我使用Dreamweaver来编写这个接口 HTML代码： <html> <head> <meta charset="utf-8"> <title>Deane.co</title> <link href="style.css" rel="stylesheet" type="te

我是新来的。我只是想问一下这个问题

文本似乎在盒子外面，看起来很奇怪。如何使文本显示在框内？我在编码方面做错了什么？我认为我的编码没有任何问题。顺便说一下，我使用Dreamweaver来编写这个接口

HTML代码：

<html>
<head>
<meta charset="utf-8">
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
<div id="nav1">
 <h4><a href="index.html"><h1>Deane.co</a></h4>
 <ul>
    <li id="active"><a href="index.html"</a>Home</li>
    <li><a href="service.html"</a>Products</li>
    <li><a href="contact.html"</a>Contact</li>
    <li><a href="about.html"About</a>About</li>
 </ul>
 </div>
 <div id="main-content">
 <br>
 <h1> Welcome To Deane.co </h1>
 <br>
 <p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
 <br>
 <div id = "products">
 <h5><a href="products.html">Check our products</a></h5>
 </div>
 </div>
 <div id="shirtsaesthetic"> 
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 </div>
 <div id="footer">
 <h2>&copy; Allright Reserved</h2>
 <div>
 <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 </ul>
 </div> 
 </div>
 </body>
 </html>

你的第一部分代码都搞乱了。正确关闭标签：

<head>
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>    
<body>
<div id="nav1">
<h4><a href="index.html"><h1>Deane.co</h1></a></h4>
 <ul>
    <li id="active"><a href="index.html">Home</a></li>
    <li><a href="service.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html"About>About</a></li>
 </ul>
 <div id="main-content">
 <br>
 <h1> Welcome To Deane.co </h1>
 <br>
 <p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
 <br>
 <div id = "products">
 <h5><a href="products.html">Check our products</a></h5>
 </div>
 </div>
 <div id="shirtsaesthetic"> 
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 </div>
 <div id="footer">
 <h2>&copy; Allright Reserved</h2>
 <div>
 <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 </ul>
 </div> 
 </div>
 </body>


迪恩公司








欢迎来到迪恩公司


欢迎来到Deane.co，这是一个更容易买到漂亮衣服的地方




时髦女衬衫

40令吉


时髦女衬衫

40令吉


时髦女衬衫

40令吉
&抄袭；版权所有

您的第一个代码位被弄乱了。正确关闭标签：

<head>
<title>Deane.co</title>
<link href="style.css" rel="stylesheet" type="text/css" >
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>    
<body>
<div id="nav1">
<h4><a href="index.html"><h1>Deane.co</h1></a></h4>
 <ul>
    <li id="active"><a href="index.html">Home</a></li>
    <li><a href="service.html">Products</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="about.html"About>About</a></li>
 </ul>
 <div id="main-content">
 <br>
 <h1> Welcome To Deane.co </h1>
 <br>
 <p> Welcome to Deane.co the place to shop beautiful clothes easier </p>
 <br>
 <div id = "products">
 <h5><a href="products.html">Check our products</a></h5>
 </div>
 </div>
 <div id="shirtsaesthetic"> 
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 <div id="shirtsaesthetic1"> <img src="Images/shirtsaesthetic.jpg"> <br>
 <h4> Hipster Blouse </h4> <br>
 <p> RM40 </p>
 </div>
 </div>
 <div id="footer">
 <h2>&copy; Allright Reserved</h2>
 <div>
 <ul>
    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li><a href="#"><i class="fa fa-instagram"></i></a></li>
 </ul>
 </div> 
 </div>
 </body>


迪恩公司








欢迎来到迪恩公司


欢迎来到Deane.co，这是一个更容易买到漂亮衣服的地方




时髦女衬衫

40令吉


时髦女衬衫

40令吉


时髦女衬衫

40令吉
&抄袭；版权所有

在style.css文件中，删除以下行：

 #products a {
  color: white;
  text-decoration: none;
  padding: 25px; //remove this line
 }

在html文件中，以下行中缺少“>”标记：

<ul>
    <li id="active"><a href="index.html"></a>Home</li>
    <li><a href="service.html"></a>Products</li>
    <li><a href="contact.html"> </a>Contact</li>
    <li><a href="about.html"></a>About</li>
</ul>


主页
产品
接触
关于

在style.css文件中，删除以下行：

 #products a {
  color: white;
  text-decoration: none;
  padding: 25px; //remove this line
 }

在html文件中，以下行中缺少“>”标记：

<ul>
    <li id="active"><a href="index.html"></a>Home</li>
    <li><a href="service.html"></a>Products</li>
    <li><a href="contact.html"> </a>Contact</li>
    <li><a href="about.html"></a>About</li>
</ul>


主页
产品
接触
关于

第一个无序列表中的标签未正确关闭。

导航中的

标签错误，您需要从

产品a

中删除

填充

正文{
字体系列：“Raleway”，无衬线；
}
*{
填充：0px；
边际：0px；
}
#导航1{
宽度：100%；
高度：70像素；
线高：70px；
背景#a5aab1；
}
#导航1 h1{
浮动：左；
字号：2.5em；
左边距：15px；
}
#导航1 h1 a{
文字装饰：无；
颜色：白色；
}
#nav1 ul{
浮动：对；
右边距：15px；
}
#nav1 ul li{
显示：内联块；
列表样式类型：无；
}
#nav1 ul li a{
文字装饰：无；
颜色：白色；
填充：25px；
}
#nav1 ul li：悬停{
背景：#bfc5ce；
过渡：全部缓进缓出0.45秒；
}
#活跃的{
背景：#bfc5ce；
}
#主要内容{
宽度：100&；
高度：600px；
背景：url（Images/store-background3.jpg）不重复；
背景尺寸：封面；
文本对齐：居中；
颜色：黑色；
线高：40px；
}
#主要内容a{
文字装饰：无；
颜色：黑色；
}
#产品{
背景#a5aab1；
宽度：170px；
高度：60px；
线高：60px；
左边距：自动；
右边距：自动；
边界半径：5px；
颜色：白色；
字号：100；
}
#产品:hover{
盒影：1px10px10px10pxRGBA（136,131,131,0.83）；
过渡：全部缓进缓出0.45秒；
}
#产品a{
颜色：白色；
文字装饰：无；
}
#衬衫美学{
宽度：100%；
高度：400px；
背景：白色；
}
#衬衫1{
宽度：400px；
高度：300px；
填充物：5px；
显示：内联；
浮动：左；
利润率：19px；
文本对齐：居中；
}
#Shirtsa1 img{
宽度：300px；
高度：220px；
边界半径：5px；
}

迪恩公司








欢迎来到迪恩公司


欢迎来到Deane.co，这是一个更容易买到漂亮衣服的地方




时髦女衬衫

40令吉


时髦女衬衫

40令吉


时髦女衬衫

40令吉
&抄袭；版权所有





导航中的a
标记错误，您需要从#products a
中删除padding


正文{
字体系列：“Raleway”，无衬线；
}
*{
填充：0px；
边际：0px；
}
#导航1{
宽度：100%；
高度：70像素；
线高：70px；
背景#a5aab1；
}
#导航1 h1{
浮动：左；
字号：2.5em；
左边距：15px；
}
#导航1 h1 a{
文字装饰：无；
颜色：白色；
}
#nav1 ul{
浮动：对；
右边距：15px；
}
#nav1 ul li{
显示：内联块；
列表样式类型：无；
}
#nav1 ul li a{
文字装饰：无；
颜色：白色；
填充：25px；
}
#nav1 ul li：悬停{
背景：#bfc5ce；
过渡：全部缓进缓出0.45秒；
}
#活跃的{
背景：#bfc5ce；
}
#主要内容{
宽度：100&；
高度：600px；
背景：url（Images/store-background3.jpg）不重复；
背景尺寸：封面；
文本对齐：居中；
颜色：黑色；
线高：40px；
}
#主要内容a{
文字装饰：无；
颜色：黑色；
}
#产品{
背景#a5aab1；
宽度：170px；
高度：60px；
线高：60px；
左边距：自动；
右边距：自动；
边界半径：5px；
颜色：白色；
字号：100；
}
#产品:hover{
盒影：1px10px10px10pxRGBA（136,131,131,0.83）；
过渡：全部缓进缓出0.45秒；
}
#产品a{
颜色：白色；
文字装饰：无；
}
#衬衫美学{
宽度：100%；
高度：400px；
背景：白色；
}
#衬衫1{
宽度：400px；
高度：300px；
填充物：5px；
显示：内联；
浮动：左；
利润率：19px；
文本对齐：居中；
}
#Shirtsa1 img{
宽度：300px；
高度：220px；
边界半径：5px；
}

迪恩公司








欢迎来到迪恩公司


欢迎来到德