/*
Created on : Mar 24, 2014, 9:05:35 AM
Author : meggleston
*/
#listheader
{
position:absolute;
top:90px;
width:100%;
background:cadetblue;
height: 80px;
text-align: center;
}
#header
{
top: 0;
position: absolute;
height: 90px;
width: 100%;
background: #007400;
margin: 0px;
padding: 0px;
}
#logo
{
position:absolute;
background-image:url(../assets/pics/logomain.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 90px;
height: 100;
width: 100;
}
body
{
margin: 0px;
padding: 0px;
}
#site1Container
{
position:absolute;
background-color: #cd0a0a;
top:170px;
width: 100%;
height: 180px;
}
#site2Container
{
position:absolute;
background-color: bisque;
top:350px;
width: 100%;
height: 180px;
}
#site3Container
{
position:absolute;
background-color: darkgoldenrod;
top:530px;
width: 100%;
height: 180px;
}
#site1logo
{
position:absolute;
top:20%;
background-image:url(../assets/pics/logo1.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 100px;
height: 100%;
width: 100;
}
#site2logo
{
position:absolute;
top:20%;
background-image:url(../assets/pics/logo2.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 100px;
height: 100;
width: 100;
}
#site3logo
{
position:absolute;
top:20%;
background-image:url(../assets/pics/logo3.png);
background-repeat: no-repeat;
background-re:no-repeat;
background-position: left top;
background-size:100px 100px;
height: 100;
width: 100;
}
#site1desc
{
position: absolute;
left:150px;
top: 20%;
}
#site2desc
{
position: absolute;
left:150px;
top: 20%;
}
#site3desc
{
position: absolute;
left:150px;
top: 20%;
}
<html>
<head>
<title>Site Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/basecss.css"/>
</head>
<body>
<div id="header">
<div id="logo"></div>
</div>
<div id="listheader">
<h1><u>List of Web Sites Header</u></h1>
</div>
<div id="site1Container">
<div id="site1logo"></div>
<div id="site1desc">Site description goes here.</div>
</div>
<div id="site2Container">
<div id="site2logo"></div>
<div id="site1desc">Site description goes here.</div>
</div>
<div id="site3Container">
<div id="site3logo"></div>
<div id="site1desc">Site description goes here.</div>
</div>
</body>
</html>
#1 楼
从语义上讲，我建议您更多地使用HTML5元素。例如，代替...<div id="header">
<div id="logo"></div>
</div>
使用代替：（ID可以如果愿意，请留下来）。
<header>
<div id="logo"></div>
</header>
这会将CSS从
#header {}更改为header {} 常见的是在其中看到多个标签复杂的模板。因此，在这种情况下，这样的事情可能是适当的...
<header class="site-header">
<div id="logo"></div>
</header>
CSS将是：
header.site-header {}
一致性，一致性，一致性。
您的大多数类和ID名称都完全小写。但是，有些类使用camelCase，例如：
#site3Container 使您的命名约定一致。通常使用所有camelCase或全部使用小写字母或全部使用大写字母。
通常，我对HTML和CSS使用小写字母（写得更快）。我为PHP使用camelCase。但是，这不是规则。
定位
绝对定位有其用途。但是，它几乎从未用于基本布局。
无需使用任何
position: absolute;即可实现精确的布局。我的一般建议是几乎始终避免使用position: absolute;。如果您发现需要使用它来做某事，那么您实际上并不需要，只是不知道该怎么做。请咨询某人。这里是您当前html和css的JSFiddle
这里是展示相同布局，但没有定位的JSFiddle。
*请注意，说明文字现在的最大宽度为960px（通用站点宽度，尽管1140变得越来越普遍）。说明div也是居中的，因此左右两侧始终有相等的空间。
我在上面的修改还增加了一个特定的CSS选择器：
* { margin: 0; padding: 0; }
星号*是通配符，它实际上表示ANY元素。上面的选择器将每个元素的边距和填充都重置为0。这通常通过称为“重置样式表”的方式完成。这将带我进入下一个主题...
重置样式表
重置样式表包含CSS代码，这些代码标准化了您的网站在所有浏览器中的外观。例如，它将所有填充和边距设置为0，这样就不会向您的网站添加您可能甚至不希望使用的默认样式。
快速的Google搜索将我们带到了这个位置网站：http://www.cssreset.com/
在那里，您可以看到许多流行的重置样式表，它们都有各自不同的警告和特色。我个人建议Normalize.css保留并标准化一些您不一定要重置为0的典型样式。它还包含一些标准的排版样式，因此您的文本看起来很棒，而无需进行任何工作。重置样式表应始终是您链接的第一个.css文件。因此，例如，您将包括这样的对象：
<head>
<title>Site Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css"/>
<link rel="stylesheet" href="css/basecss.css"/>
</head>
ID上的类
ID是特定的，它们可以是使用一次。就是这个“东西”，而且只有这个“东西”。一个班级可以是任意具体的，也可以是任意的。一个类可以应用于同一页面上的多个元素。从上面的JS Fiddles扩展出来的一个示例将是组合描述div的样式。
我们从以下CSS开始：
#site1desc
{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
#site2desc
{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
#site3desc
{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
通过修改HTML，以便每个
<div id="site1desc">现在都是：<div class="contentdesc">我们可以大幅度削减我们的CSS总代码。现在我们的完整HTML如下所示... <div id="site1Container">
<div id="site1logo"></div>
<div class="contentdesc">Site description goes here.</div>
</div>
<div id="site2Container">
<div id="site2logo"></div>
<div class="contentdesc">Site description goes here.</div>
</div>
<div id="site3Container">
<div id="site3logo"></div>
<div class="contentdesc">Site description goes here
</div>
</div>
我们唯一需要的CSS从上面的3个选择器更改为：
.contentdesc
{
width: 100%;
max-width: 960px;
margin: 0 auto;
}
上述的JSFiddle演示
***注意：CSS类以句点
.className引用与#idName不同评论
\ $ \ begingroup \ $
CSS重置不过是蛇油。仅将所有边距设置为0，以便将其设置为在其他地方合理的设置是愚蠢的。
\ $ \ endgroup \ $
–cimmanon
2014年3月27日13:50
\ $ \ begingroup \ $
你在跟我开玩笑吗？有很多充分的理由利用CSS重置。像Normalize这样的好东西除了重设填充和边距空间之外，还带来了很多其他的麻烦。尤其不是将Normalize设置为0，而是设置为许多现代站点使用的非常常见的空间。
\ $ \ endgroup \ $
–迈克尔
2014年3月27日13:56
\ $ \ begingroup \ $
这是SO寻找什么样的答案的一个光辉的例子。
\ $ \ endgroup \ $
– JoshWillik
2014年3月27日19:12
\ $ \ begingroup \ $
TYVM @JoshWillik
\ $ \ endgroup \ $
–迈克尔
2014年3月27日19:16
\ $ \ begingroup \ $
ID提供了一个答案，但似乎您已经在这个答案中找到了一个不错的答案。 +1，但是要添加的内容太多了，我现在很懒，所以我只建议您将伪元素作为您的朋友，您无需在分类所有内容时都非常具体，也无需使用CSS的自然级联。
\ $ \ endgroup \ $
– darcher
2014年3月28日13:00
#2 楼
您应该在哪里使用其他HTML元素的一个示例 <div id="site1Container">
<div id="site1logo"></div>
<div id="site1desc">Site description goes here.</div>
</div>
看起来应该像这样
<div id="site1Container">
<img id="site1logo" src="http://www.google.com/yourpic.jpg" alt="funny picture"/>
<p class="site1desc">Site description goes here.</p>
</div>
您也会多次使用同一个ID属性，这是不行的，对于要在多个标签上使用相似样式的东西，请使用类。同样是
img标记，如果要显示图片，则显示图片而不是背景。我只指出了一个实例，您的代码中还有其他实例
不要使用像这样的旧的过时标签
<h1><u>List of Web Sites Header</u></h1>
如果要加下划线，请使用样式
<h1 style="text-decoration:underline"> List of Web Sites Header </h1>
如果要在多个地方使用同一样式，请使用一个类，仅在绝对必要的地方编写内联样式规则，否则它们可能会使您的HTML变得混乱
评论
\ $ \ begingroup \ $
您可能想将src属性用于img标签，而不是href。
\ $ \ endgroup \ $
–克苏鲁
2014年3月27日12:40
\ $ \ begingroup \ $
另外，将类放在子元素上将促进CSS的自然级联。例如。特异性与隐含性。我个人的喜好是使用类进行样式设置，使用id进行功能设置，因为id优先于类，Pseudo元素和选择器，因此避免使用ID进行样式设置将使其整体具有更大的可伸缩性。
\ $ \ endgroup \ $
– darcher
2014年3月28日在12:49
#3 楼
快速说明：除非您想解决浏览器将模拟的错误，否则不要遗漏DOCTYPE（对于HTML 5为<!doctype html>）。编辑：我忘记了HTML 5中的“ 5”。
另外：使用哪种DOCTYPE并不重要，只要它触发浏览器的标准模式即可。浏览器不会区分HTML版本。您可以使用“旧” HTML 4 DOCTYPE，但可以编写HTML 5代码，也可以使用HTML 5 DOCTYPE并仅编写“普通” HTML4。只要浏览器处于“标准模式”，就可以了。
评论
\ $ \ begingroup \ $
是HTML5还是任何HTML？
\ $ \ endgroup \ $
–马拉奇♦
2014年3月26日在16:28
\ $ \ begingroup \ $
对于任何HTML，尽管如果您不使用HTML5，则应添加正确的文档类型（XHTML Transitional，strict等）
\ $ \ endgroup \ $
– Mitchell Lee
2014年3月26日16:50
\ $ \ begingroup \ $
@MitchellLee谢谢。在大多数情况下，我让我的IDE创建DocType，并且不用理会，可耻的是...。
\ $ \ endgroup \ $
–马拉奇♦
2014年3月26日在16:53
\ $ \ begingroup \ $
@Malachi如果您的IDE将doctype添加到页面，则它是输出的HTML的一部分，这是可以接受的解决方案。最主要的是浏览器必须查看doctype，因为它将消除许多奇怪的问题（尤其是IE6-8）。
\ $ \ endgroup \ $
– Mitchell Lee
2014年3月26日在16:55
\ $ \ begingroup \ $
@Malachi这几天，我想说你应该坚持<！doctype html>。 HTML5是最先进的，并且近来几乎所有浏览器都很好地支持HTML5，并且由于较旧的浏览器的性质（几乎可以宽恕）格式不正确的HTML，因此通常不会在其中引起任何问题。将其与诸如Boostrap，CSS和Modernzr javascript库之类的CSS框架以及其他polyfils结合使用，是实现最低持久性的途径。
\ $ \ endgroup \ $
– Mitchell Lee
2014年3月26日17:15
#4 楼
您的#site1desc和#site2desc等的CSS规则集都相同（复制并粘贴）。相反，可能只有一个类class="sitedesc"和CSS选择器.sitedesc；或用于同一规则集的多个ID选择器#site1desc, #site2desc, #site3desc
{
position: absolute;
left:150px;
top: 20%;
}
您的
#site1logo和#site2logo等定义都相同，除了徽标的URL。您可以使用一个规则集将所有这些都设置为同一类。并使用以下规则对徽标进行区分：#site1Container > .sitelogo
{
background-image:url(../assets/pics/logo1.png);
}
我们的
#site1Container和#site2Container等规则集都一样。除了背景色之外，其他规则集都相同。，所以我建议使用HTML，例如：
<div id="site1" class="siteContainer">
<div class="siteLogo"></div>
<div class="siteDesc">Site description goes here.</div>
</div>
#5 楼
您应该在顶部（在html元素之前）添加DOCTYPE： <!DOCTYPE html>
meta-charset应该在title之前（因此在解析器到达之前就知道编码）： <meta charset="UTF-8">
<title>Site Title</title>
如果这是整个网站的页面，而不仅仅是独立页面：
您的网站标题（似乎以徽标表示）在您的情况下，因此文字标题应为该徽标的
alt值）应为h1。 主要内容（当前具有
h1）应在网站标题的范围内，即h2。甚至更好的是，对主要内容使用节内容元素（section或article）。因此结构如下所示： <body>
<h1><img src="logo.png" alt="Site title"></h1> <!-- don’t append "logo" to the alt value -->
<section> <!-- depending on your content, this could also be 'article' -->
<h1>Main content title</h1>
<!-- here comes your whole main content of that page -->
</section>
</body>
您可以在我的其他文章中了解更多答案：
https://codereview.stackexchange.com/a/40262/16414
https://codereview.stackexchange.com/a/28295/16414
https://stackoverflow.com/a/11915502/1591669
https://stackoverflow.com/a/14920215/1591669
u元素没有似乎在这里正确使用了（“尽管是明确表达的，但非文字注释，非文本注释”）。如果要将此文本显示为带下划线，请改用CSS： #listheader h1 {text-decoration: underline;}
但是请注意Web下划线中的内容通常与超链接相关。
评论
\ $ \ begingroup \ $
我不同意您使用H1标签包围IMG标签。您将通过执行此操作来创建填充，换行符和边距。 H1表示文本标题不封装图形，图形可以用更有意义的HTML5标签（如
\ $ \ endgroup \ $
–马拉奇♦
2014年3月27日15:56
\ $ \ begingroup \ $
@Malachi：重点是网站需要（*）标题（对于属于网站一部分的页面，即具有全局导航的页面）。无论网站标题是什么，都应放在h1中。可能是文本，徽标，甚至是音频文件，都没关系。 -并且标题使用的是语义/可访问性，而不是浏览器可能使用的默认CSS样式。 -（*也可以省略，但是主要内容必须位于sectioning内容元素内，body内容的根目录不得具有其他直接标题。）
\ $ \ endgroup \ $
–未成年
2014-3-27在16:04
\ $ \ begingroup \ $
我看到标题标签内的标题嵌套在标题标签中，该标题所属。就像我说的那样，HTML5在网站
\ $ \ endgroup \ $
–马拉奇♦
2014年3月27日在16:08
\ $ \ begingroup \ $
我认为事情太复杂了。
\ $ \ endgroup \ $
–马拉奇♦
2014年3月27日在17:31
\ $ \ begingroup \ $
img标记现在在html5的h1中有效，但从语义上来说，它不被认为是合理的。如果您的网站名称是该特定页面的标题，则使用带有alt或h1的图像。 h1中的任何文本都没有多大意义，仅仅因为您可以做某事并不意味着您应该这样做。此外，页面上的标题标签和h1应该相互补充页面内容，而不是相互复制。徽标是站点范围的商标，而标题/ h1是特定于页面的。
\ $ \ endgroup \ $
– darcher
2014年3月28日在12:26
评论
简要说明一下，如果您利用Twitter.Bootstrap（getbootstrap.com/2.3.2）这样的CSS框架，就可以省去很多布局上的麻烦，而使用更少的“跨浏览器”创建响应式布局则要容易得多。问题，因为他们已经为您完成了很多繁重的工作。另外，如前所述，不要使用绝对定位，这几乎从来没有必要/一个好主意。@MitchellLee Bootstrap不再是Twitter的一部分，现在也有了Bootstrap 3：getbootstrap.com
使用Bootstrap也是膨胀标记的一种非常好的方法。我不建议任何人使用它。
这就是为什么它提供不同的CSS组件作为单独的.less文件的原因。您可以选择所需的元素（例如，仅是网格系统），而忽略其余元素。结合+缩小CSS，c肿的增加可忽略不计。
如果您想学习，那么最好不使用框架开始。