個人CSS佈局之旅--持續更新

時間 2019-11-19

標籤個人 css 佈局之旅持續更新欄目 CSS 简体版

原文原文鏈接

雖然我也接觸前端一年之久了，可是無奈從切圖佈局下來的經驗還真是很不足，由於以前比賽或者是作小項目時所有都是本身負責設計，因此都是編寫邊設計，哎呀，也是醉了；或者是有模板，而後從人家上面扒拉下來的，真的拿一張UI設計稿給我，還真是有點心虛的，因此借最近深刻了解jquery的機會，我決定把佈局順帶練一練，OK，廢話很少說，開工了，一週練習一次，並上圖示衆，同時歡迎你們一塊兒探討css佈局細節。javascript

第一季簡單的輪播佈局 2015.12.1css

全部小圖片在一張雪碧圖上html

來貼段代碼前端

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="v_show">
    <div class="v_caption">
        <h2 class="cartoon">卡通動漫</h2>
        <div class="highlight_tips">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
        </div>
        <div class="btn">
            <span class="prev"></span>
            <span class="next"></span>
        </div>
        <em><a href="javascript:;">更多>></a></em>
    </div>
    <div class="v_content">
        <ul class="contentlist">
            <li>
                <img src="img/01.jpg">
                <h2 class="title"><a href="javascript:;">海賊王</a></h2>
                <p class="radio">播放：<span class="count">28,276</span></p>
            </li>
            <li>
                <img src="img/01.jpg">
                <h2 class="title"><a href="javascript:;">海賊王</a></h2>
                <p class="radio">播放：<span class="count">28,276</span></p>
            </li>
            <li>
                <img src="img/01.jpg">
                <h2 class="title"><a href="javascript:;">海賊王</a></h2>
                <p class="radio">播放：<span class="count">28,276</span></p>
            </li>
            <li>
                <img src="img/01.jpg">
                <h2 class="title"><a href="javascript:;">海賊王</a></h2>
                <p class="radio">播放：<span class="count">28,276</span></p>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }

/* v_show style */
.v_show{
    width:595px;
    margin: 50px auto;
}
.v_caption{
    height:35px;
    background: url(img/btn_cartoon.gif) 0 0;
}
.v_caption h2{
    float: left;
    width:90px;
    height:35px;
    background: url(img/btn_cartoon.gif) 0 -100px;
    text-indent: -9999px;
}
.highlight_tips{
    float: left;
    width:60px;
    margin: 14px 0 0 5px;
}
.highlight_tips span{
    display: inline-block;
    width:7px;
    background: url(img/btn_cartoon.gif) 0 -320px;
    text-indent: -999px;
}
.highlight_tips span.current{
    background-position: 0 -220px;
}
.btn{
    float:left;
    margin-top:5px;
}
.btn span{
    display: inline-block;
    width:30px;
    height: 22px;
    background: url(img/btn_cartoon.gif);
}
.btn span.prev{
    background-position: 0 -400px;
}
.btn span.next{
    background-position: -30px -400px;
    margin-left:-3px;
}
.v_caption em{
    float: right;
    line-height: 35px;
    margin-right: 10px;
}
.v_content{
    width:592px;
    border:1px solid #ccc;
    border-top:0;
}
.contentlist{
    overflow: hidden;
}
.contentlist li{
    float:left;
    margin: 20px 10px 15px 10px;
}
.contentlist li img{
    padding-bottom: 8px;
}
.contentlist li .title a{
    color:#04AEF4;
}
.contentlist li .title a:hover{
    color:#0592CC;
    text-decoration: none;
}
.contentlist li .radio{
    color:#666;
}