检查CSS布局代码
检查CSS布局代码
提问于 2012-10-20 21:17:25
我想要得到我的第一个CSS布局审查。首先，相关的HTML代码如下-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Preferences </title>
<script src="options.js"></script>
<link rel="stylesheet" href="options.css" />
</head>
<body>
<h1> Search in New Tab - Preferences </h1>
<form id="preference-form">
<label for="search-engine"> Search Engine </label>
<select id="search-engine">
<option id="google" value="google" selected="selected"> Google </option>
<option id="bing" value="bing"> Bing </option>
<option id="yahoo" value="yahoo"> Yahoo! </option>
<option id="duckduckgo" value="duckduckgo"> DuckDuckGo </option>
<option id="wikipedia" value="wikipedia"> Wikipedia </option>
</select>
<br>
<label for="focus-search-tab"> Make the search tab active </label>
<input type="checkbox" value="focus-search-tab" id="focus-search-tab" />
</form>
</body>
</html>我编写了以下CSS文件，以便为HTML提供满意的表示-
h1
{
width : 40%;
background : #eeeeee;
box-shadow : 0 0 5px 5px #888;
margin-top : 10%;
margin-left : 30%;
margin-right : 30%;
padding-top : 10px;
padding-bottom : 10px;
text-align : center;
font-family : "Arial", "Century Gothic", "Lucida Sans Unicode";
}
form
{
width : 30%;
background : #eeeeee;
box-shadow: 0 0 5px 5px #888;
margin-top : 1%;
margin-left : 35%;
margin-right : 35%;
padding-top : 10px;
padding-bottom : 10px;
}
label
{
width : 60%;
display : inline-block;
text-align : right;
margin-top : 10px;
margin-bottom : 10px;
margin-right : 10px;
font-family : "Arial";
}生成的HTML文档如下所示：
基本上，我想避免使用float属性。我觉得我可以通过使用内联块属性、填充和边距的组合来完成同样的任务。所以我就用了。这是正确的方式吗？除此之外，我想知道我做得对不对。此外，任何使我的CSS代码更好的改进都是受欢迎的。
回答 2
Code Review用户
发布于 2012-10-23 19:15:23
我不是CSS专家，但我要改变的两件事是：
- 删除不必要的空格(缩进和‘：')。
- h1{宽度:40%；background:#eee；框影:0 0 5px5 5px #888；边距:10% 30% 0 30%；填充:10 5px 0 10 5px；文本对齐:居中；字体-族：“Arial”，“世纪哥特式”，"Lucida Sans Unicode"；}窗体{宽度:30%；background:#eee；框影:0 0 5 px5 5px #888；边距:1% 35%；填充:10 5px 0 10 5px；}标签{宽度:60%；显示:内联块；文本对齐:右；边距:10 60 10 60 10 60；字体系列：“Arial”；}
Code Review用户
发布于 2012-11-14 16:00:20
我认为使用“浮动:左”和“显示:内联块”没有根本区别。在第一种情况下，在插入不在浮动块上的新元素之前，我们必须清除输出。在第二种情况下，我们使用内联元素内联块。
以下是另一个变体：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Preferences </title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<h1> Search in New Tab - Preferences </h1>
<br>
<form id="preference-form">
<label> Search Engine
<select>
<option id="google" value="google" selected> Google </option>
<option id="bing" value="bing"> Bing </option>
<option id="yahoo" value="yahoo"> Yahoo! </option>
<option id="duckduckgo" value="duckduckgo"> DuckDuckGo </option>
<option id="wikipedia" value="wikipedia"> Wikipedia </option>
</select>
</label>
<label> Make the search tab active
<input type="checkbox" value="focus-search-tab" id="focus-search-tab">
</label>
</form>
<script src="options.js"></script>
</body>
</html>风格：
body { text-align: center; }
h1, form {
display: inline-block;
background: #eee;
box-shadow: 0 0 5px 5px #888;
font-family: Arial,Helvetica,Garuda,sans-serif;
}
h1 {
margin: 10% auto 1%;
padding: 10px;
text-align: center;
}
form {
margin: 1% auto;
padding: 10px;
}
label {
display: block;
margin: 10px;
}页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/17764
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号