Source: http://www.ido321.com/888.html
The needs of the altar friends
This is similar to the implementation of the last Friend category menu.
Html:
1:<body>
2: <Divclass= "Test">
3: <Div>
4: <imgsrc= "my.jpg"alt= "Test" >
5: <h3> picture title </h3 >
6: < span >< a = "#" > edit </ a > < a =" # " > Delete </ a ></ span >
7: </div>
8: <Div>
9: <imgsrc= "my.jpg"alt = "Test" >
< h3 > picture caption </ h3 >
one: < span >< a = "#" > edit </ a > < a =" # " > Delete </ a ></ span >
: </div>
: <Div>
: <imgsrc= "my.jpg"alt = "Test" >
: < h3 > picture caption </ h3 >
: < span >< a = "#" > edit </ a > < a =" # " > Delete </ a ></ span >
: </div>
: </div>
:</body>
CSS:
1: *
2: {
3: margin0 auto;
4: }
5:. Test
6: {
7: width400px;
8: height500px;
9: border1px solid black;
Ten: }
One :. TestDiv
: {
: Border-bottom2px solid #ccc;
Height : 150px;
: width350px;
: margin-top10px;
: margin-bottom5px;
: positionrelative;
: }
:h3
: {
: positionAbsolute;
At :left 155px;
: top55px;
: }
:span
: {
: positionAbsolute;
: top58px;
:left 250px;
To : font-weightbold;
: }
a{ :
: color#000;
: text-decorationnone;
: }
Panax Notoginseng: a:hover
: {
: color#000;
Max : text-decorationnone;
In : }
Effect:
Question: An HTML layout implementation for a friend of the altar