特征布局2,3

作者: coolkid_carryon | 来源:发表于2018-09-13 08:29 被阅读0次

特征布局2,3
特征布局
特征布局
css练习一：常用的布局实例（分页、导航条、图片列表）
特征布局1
特征布局2
特征布局3
特征布局4
特征布局1
特征布局three

html:

<!DOCTYPE html>
<html>
<head>
<title>特征布局二</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-12T20:27:59+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="box">
        <a href="https://www.godaddy.com" class="nav"><span>首页</span></a>
        <a href="https://www.qq.com" class="nav"><span>网站建设</span></a>
        <a href="https://www.163.com" class="nav"><span>程序开发</span></a>
        <a href="https://www.sina.com" class="nav"><span>网络营销</span></a>
        <a href="https://www.youxia.com" id="vi" class="nav"><span>企业VI</span></a>
        <a href="https://www.duote.com" class="nav"><span>案例演示</span></a>
        <a href="https://www.test-godaddy.com" class="nav"><span>联系我们</span></a>
        <img src="img/new.png">
    </div>
</body>
</html>

css:

.box{
    width: 960px;
    height: 40px;
    border: 1px solid;
    margin: 55px auto;
    background-color: #55a8ea;
    position: relative;
}
span{
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color: #55a8ea;
    font:14px 微软雅黑;
    color: white;
    text-align: center;
    line-height: 40px;
    float: left;
}
img{
    position: absolute;
    left: 433.5px;
    top: -7px;
}
a:hover span{
    background-color: #00619f;
}

效果图：

特征布局2.png

html:

<!DOCTYPE html>
<html>
<head>
<title>特征布局3</title>
<meta name="generator" content="Bluefish 2.2.7" >
<meta name="author" content="dst" >
<meta name="date" content="2018-09-13T00:48:22+0800" >
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<link href="css/特征布局3.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="outer clearfix">
        <span id="imgdisplay">图片展示</span>
        <div>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
            <a href="#"><img src="img/goods" alt="goods"/></a>
        </div>
    </div>
</body>
</html>

css:

.outer{
    width: 958px;
    height: 270px;
    border: 1px gray solid;
    margin: 50px auto;
    position: relative;
}
#imgdisplay{
    display: block;
    width: 100px;
    height: 50px;
    font: 18px 微软雅黑;
    color: #000;
    line-height: 50px;
    text-align: center;
    border-bottom: red 2px solid;
    margin-left: 20px;
}
.outer #imgdisplay:after{
    position: absolute;
    content: "";
    width: 816px;
    height: 50px;
    border-bottom: 1px gray solid;
    left: 120px;
}
img{
    margin: 20px 9px 5px 20px;
    float: left;
}

效果图：

特征布局3.png