css-特殊布局

作者: 杰伊_约翰 | 来源:发表于2018-10-24 19:23 被阅读8次

css-特殊布局
css-布局
css-布局
css-布局
css-布局
CSS-居中布局
CSS-弹性布局
css-左右布局
css-布局详解
CSS-伸缩布局

作业：上下页切换布局，设置外边距margin的值和内边距的值，在div盒子里面添加列表ul，里层包含li，并且每个按钮都是可以点击和链接的，就还要有a标签，如果没有想好填写的链接可以用“#”代替。最下面效果图还有一个边框线，也就是border，代码中的写法是合并在一起了，多种样式合在一个border中（边框线的大小，颜色）；float浮动。

大体结构：div>ul>(li>a)*10

<!DOCTYPE html> 
<html> 
<head> <meta charset="UTF-8"> 
    <title>特殊布局</title> 
    <style type="text/css"> 
        *{ 
        margin: 0; 
        padding: 0; 
        } 
        a{
         text-decoration: none; 
        background-color: gold; 
        font-family: "华文彩云";
        color: black; 
        font-size: 12px; 
        padding: 5px 10px; 
        margin: 0 3px; 
        } 
        .list{ 
        padding-top: 20px;
        list-style: none; 
        height: 42px; 
        width: 960px; 
        border: 1px solid #EEEE00 ; 
        margin: 30px auto; 
        } 
        .nav{ 
        list-style: none; 
        margin: 8px 248px 8px 248px; 
        } 
        .nav li{ 
        float: left; 
        margin: 8px auto; 
        } 
        .nav a:hover{
            color: red;
        }
</style> 
</head> 
<body> 
    <div class="list"> 
        <ul class="nav"> 
            <li><a href="#">上一页</a></li> 
            <li><a href="#">1</a></li> 
            <li><a href="#">2</a></li> 
            <li><a href="#">3</a></li> 
            <li><a href="#">4</a></li> 
            <li>...</li> 
            <li><a href="#">17</a></li> 
            <li><a href="#">18</a></li> 
            <li><a href="#">19</a></li> 
            <li><a href="#">20</a></li> 
            <li><a href="#">下一页</a></li> 
        </ul> 
    </div> 
</body> 
</html>

image.png