Я использую html5 и css3 в своем проекте сайта.
Мой css
.featured-posts{
display: block;
overflow: hidden;
margin-left: -10px;
margin-bottom: 0px;
width: 960px;
}
.featured-posts li{
display: block;
float: left;
position: relative;
width: 300px;
margin: 10px;
}
.featured-posts li .thumb{
display: block;
width: 300px;
margin-bottom: 0px;
line-height: 0em;
background: #f1f1f1 url(../img/plus.png) no-repeat center center ;
-webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 2px rgba(0,0,0,.3);
box-shadow: 0px 0px 2px rgba(0,0,0,.3);
}
.featured-posts li .thumb img{
margin: 5px;
}
.featured-posts li .thumb span:hover img{
opacity: 0.4;
}
.featured-posts .link-button{
opacity: 0;
}
.featured-posts li:hover .link-button{
opacity: 1;
}
.featured-posts li .link-button:hover{
background: #f1f1f1;
padding: 2px 8px;
-webkit-box-shadow: 0px 2px 0px rgba(56, 7, 7, 1);
-moz-box-shadow: 0px 2px 0px rgba(56, 7, 7, 1);
box-shadow: 0px 1px 0px rgba(0, 0, 0, .2);
}
.featured-posts .excerpt-arrow{
position: absolute;
top: -10px;
left: 20px;
background: url(../img/excerpt-arrow.png) no-repeat top left;
}
.featured-posts .excerpt{
position: relative;
padding: 15px 15px 0px 15px;
margin-bottom: 0px;
}
.featured-posts .excerpt .heading {
font-weight: bold;
font-size: 14px;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}
#content-wrap .featured-posts .excerpt .heading a{
text-decoration: none;
color: #606060;
}
#content-wrap .featured-posts .excerpt .heading a:hover{
color: #000000;
}
мой HTML-код -
<ul class="featured-posts">
<li>
<a href="#" class="thumb" title="An image"><img src="img/Web.png" alt="Post" /></a>
<div class="excerpt">
<div class="heading"><a href="Web-Designing.html">Web Design</a></div>
<p>MCS PMS is a comprehensive Front Desk Reservation/Check-In solution package that is EPABX compliant and integrates well advance with other M Cubic modules like POS & Housekeeping Department.</p><br />
<br />
<a href="Web-Designing.html">Read More,..</a>
</div>
</li>
<li>
<a href="#" class="thumb" title="An image"><img src="img/Logo.png" alt="Post" /></a>
<div class="excerpt">
<div class="heading"><a href="Logo-Designing.html">Logo Design</a></div>
<p>We provide unbelievable, unique logo-design to brand your representation and identity. We offer several designs.</p><br />
<br /><br /><br />
<a href="Logo-Designing.html">Read More,..</a>
</div>
</li>
<li>
<a href="#" class="thumb" title="An image"><img src="img/Broucher.png" alt="Post" /></a>
<div class="excerpt">
<div class="heading"><a href="Brochure-Designing.html">Brochure Design</a></div>
<p>We are ready to produce a fantastic piece of printing design, which really reflects the goals and promotional aims of your business.</p><br />
<br /><br />
<a href="Brochure-Designing.html">Read More,..</a>
</div>
</li>
</ul>
<div class="clear"></div>
Различные ссылкииспользование одного и того же текста ссылки может сбивать с толку: см. соответствующие теги в строке (s
) эта ошибка возникает при каждом теге привязки read more при тестировании всего инструмента Validator.
чтоэто ошибка в
<a href="Logo-Designing.html">Read More,..</a>