首先祝大家圣诞快乐！
我刚刚写了2015年阅读挑战的简单页面。我几乎没有问题。
我将非常感谢代码的任何帮助，如果你有时间解释我做错了什么，那么我可以改进。
这是我的代码：
body {
background-color: #f8f5ee;
color: #000305;
font-size: 87.5%;
font-family: Tahoma;
text-align: left;
}
a {
text-decoration: none;
color: #fc5c5c;
}
#body {
margin: 0 auto;
width: 70%;
clear: both;
}
img {
display:block;
margin-left:auto;
margin-right:auto;
}
.mainContent {
overflow: hidden;
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content {
width: 100%;
float: left;
padding-left: 15%;
}
.leftcontent {
width: 25%;
float: left;
}
.rightcontent {
width: 35%;
float: left;
}
.mainfooter {
width: 100%;
padding-left: 40%;
float: left;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 18px;
font-family: Times New Roman;
color: #201f1d;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottombottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=checkbox] {
display: none;
}
.checkbox label:before {
border-radius: 3px;
}
input[type=checkbox]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="assets/css/main.css">
<title>215 Reading Challenge</title>
</head>
<body id="body">
<img src="http://s11.postimg.org/sdorw4vlf/logo.jpg" alt="2015 Reading Challenge logo">
<div class="mainContent">
<div class="content">
<header>
<h2><a href="#" title="Valentina's Challenge">My Challenge</a></h2>
</header>
<article class="leftcontent">
<content>
<div class="checkbox">
<input id="check1" type="checkbox" name="check" value="check1">
<label for="check1">A book with more than 500 pages</label>
<br>
<input id="check2" type="checkbox" name="check" value="check3" checked="checked">
<label for="check2">A classic romance</label>
<br>
<input id="check3" type="checkbox" name="check" value="check3" checked="checked">
<label for="check3">A book that became a movie</label>
<br>
<input id="check4" type="checkbox" name="check" value="check3" checked="checked">
<label for="check4">A book published this year</label>
<br>
<input id="check5" type="checkbox" name="check" value="check3" checked="checked">
<label for="check5">A book written by someone under 30</label>
<br>
<input id="check6" type="checkbox" name="check" value="check3" checked="checked">
<label for="check6">A book with nonhuman characters</label>
<br>
<input id="check7" type="checkbox" name="check" value="check3" checked="checked">
<label for="check7">A funny book</label>
<br>
<input id="check8" type="checkbox" name="check" value="check3" checked="checked">
<label for="check8">A book by female author</label>
<br>
<input id="check9" type="checkbox" name="check" value="check3" checked="checked">
<label for="check9">A mystery or thriller</label>
<br>
<input id="check10" type="checkbox" name="check" value="check3" checked="checked">
<label for="check10">A book with a one-word title</label>
<br>
<input id="check11" type="checkbox" name="check" value="check3" checked="checked">
<label for="check11">A book of short stories</label>
<br>
<input id="check12" type="checkbox" name="check" value="check3" checked="checked">
<label for="check12">A book set in different country</label>
<br>
<input id="check13" type="checkbox" name="check" value="check3" checked="checked">
<label for="check13">A nonfiction book</label>
<br>
<input id="check14" type="checkbox" name="check" value="check3" checked="checked">
<label for="check14">A popular author's first book</label>
<br>
<input id="check15" type="checkbox" name="check" value="check3" checked="checked">
<label for="check15">A book from an author you love that you haven't read yet</label>
<br>
<input id="check16" type="checkbox" name="check" value="check3" checked="checked">
<label for="check16">A book a friend recommended</label>
<br>
<input id="check17" type="checkbox" name="check" value="check3" checked="checked">
<label for="check17">A Pulitzer Prize-winning book</label>
<br>
<input id="check18" type="checkbox" name="check" value="check3" checked="checked">
<label for="check18">A book at the bottom of your to-read list</label>
<br>
<input id="check19" type="checkbox" name="check" value="check3" checked="checked">
<label for="check19">A book your mom loves</label>
<br>
<input id="check20" type="checkbox" name="check" value="check3" checked="checked">
<label for="check20">A book that scares you</label>
<br>
<input id="check21" type="checkbox" name="check" value="check3" checked="checked">
<label for="check21">A book more than 100 years old</label>
<br>
<input id="check22" type="checkbox" name="check" value="check3" checked="checked">
<label for="check22">A book based entirely on its cover</label>
<br>
<input id="check23" type="checkbox" name="check" value="check3" checked="checked">
<label for="check23">A book you were supposed to read in school but didn't</label>
<br>
<input id="check24" type="checkbox" name="check" value="check3" checked="checked">
<label for="check24">A memoir</label>
<br>
</div>
</content>
</article>
<article class="rightcontent">
<content>
<input id="check25" type="checkbox" name="check" value="check2" checked="checked">
<label for="check25">A book you can finish in a day</label>
<br>
<input id="check50" type="checkbox" name="check" value="check4" checked="checked">
<label for="check50">A book with antonyms in the title</label>
<br>
<input id="check51" type="checkbox" name="check" value="check4" checked="checked">
<label for="check51">A book set somewhere you've always wanted to visit</label>
<br>
<input id="check52" type="checkbox" name="check" value="check4" checked="checked">
<label for="check52">A book that came out the year you were born</label>
<br>
<input id="check27" type="checkbox" name="check" value="check4" checked="checked">
<label for="check27">A book with bad reviews</label>
<br>
<input id="check28" type="checkbox" name="check" value="check4" checked="checked">
<label for="check28">A trilogy</label>
<br>
<input id="check29" type="checkbox" name="check" value="check4" checked="checked">
<label for="check29">A book from your childhood</label>
<br>
<input id="check30" type="checkbox" name="check" value="check4" checked="checked">
<label for="check30">A book with a love triangle</label>
<br>
<input id="check31" type="checkbox" name="check" value="check4" >
<label for="check31">A book set in the future</label>
<br>
<input id="check32" type="checkbox" name="check" value="check4" checked="checked">
<label for="check32">A book set in high school</label>
<br>
<input id="check33" type="checkbox" name="check" value="check4" checked="checked">
<label for="check33">A book with color in the title</label>
<br>
<input id="check34" type="checkbox" name="check" value="check4" checked="checked">
<label for="check34">A book that made you cry</label>
<br>
<input id="check35" type="checkbox" name="check" value="check4" checked="checked">
<label for="check35">A book with magic</label>
<br>
<input id="check36" type="checkbox" name="check" value="check4" checked="checked">
<label for="check36">A graphic novel</label>
<br>
<input id="check37" type="checkbox" name="check" value="check4" checked="checked">
<label for="check37">A book by an author you've never read before</label>
<br>
<input id="check38" type="checkbox" name="check" value="check4" checked="checked">
<label for="check38">A book you own but have never read</label>
<br>
<input id="check39" type="checkbox" name="check" value="check4" checked="checked">
<label for="check39">A book that was originally written in a different language</label>
<br>
<input id="check40" type="checkbox" name="check" value="check4" checked="checked">
<label for="check40">A book set during Christmas</label>
<br>
<input id="check41" type="checkbox" name="check" value="check4" checked="checked">
<label for="check41">A book written by an author with your same initials</label>
<br>
<input id="check42" type="checkbox" name="check" value="check4" checked="checked">
<label for="check42">A play</label>
<br>
<input id="check43" type="checkbox" name="check" value="check4" checked="checked">
<label for="check43">A banned book</label>
<br>
<input id="check44" type="checkbox" name="check" value="check4" checked="checked">
<label for="check44">A book based on or turned into a TV show</label><br>
<input id="check45" type="checkbox" name="check" value="check4" checked="checked">
<label for="check45">A book you started but never finished</label>
<br>
</content>
</article>
</div>
<footer class="mainfooter">
<p>Copyright © 2015 <a href="#">Reading Challenge</a>
</footer>
</body>
</html>
祝福！
答案 0 :(得分：0)
我几乎没有问题。
- 我认为我没有以我想要的最佳方式将内容集中在一起
- 要记住的复选框（如果已选中），如果有什么是
- 检查旁边的标签是否被删除
演示小提琴：http://jsfiddle.net/abhitalks/79pe1j08/1/
第一个，可以通过删除float并在margin: 0 auto上添加.rightcontent来解决：
.rightcontent {
width: 35%;
margin: 0 auto;
}
第三个，可以通过在label上添加一个组合器来解决，就像用于label:before一样：
input[type=checkbox]:checked + label {
text-decoration: line-through;
}
第二个，不能仅使用CSS来完成。你需要Javacript来保存/加载cookie。创建和检索cookie对于这个答案来说太宽泛了。为了避免欺骗，我想指出这个问题：How do I create and read a value from cookie?
希望有所帮助。