博客列表 >一个简易的企业站点(利用css定义来做一个静态的网页)2019年4月30日20点

一个简易的企业站点(利用css定义来做一个静态的网页)2019年4月30日20点

Nick的博客
Nick的博客原创
2019年05月06日 19:12:021019浏览

完成一个简易的企业站点,首先创建好主页index.html,同时创建好头部样式表header.css,底部样式表footer.css和主页用的样式表index.css



实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <title>双飞翼布局案例</title>
</head>
<body>

<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">公司新闻</a></li>
            <li class="item"><a href="products.html">最新产品</a></li>
            <li class="item"><a href="about.html">关于我们</a></li>
            <li class="item"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
<!--    banner图-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>
<!--    中间内容区块-->
    <div class="wrap">
        <div class="main">
            <div class="show_img">
                <h3>公司产品</h3>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
                <ul>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                    <li class="item"><a href=""><img src="static/image/product.png" alt="" width="200"></a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="left">
        <div class="text-img">
            <h3>公司简介</h3>
            <img src="static/image/gsjs.jpg" alt="" width="150">
            <p>
                我公司***的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                用户自己***一下, 实在是不好意思了, 毕竟9块9就包邮了(***PDD商城哟)
            </p>
        </div>
<!--        联系我们-->
        <div class="contact">
            <h3>联系我们</h3>
            <dl>
                <dt>电话:</dt>
                <dd>+86-010-56778899</dd>

                <dt>手机:</dt>
                <dd>+86-13801090876321</dd>
                <dt>地址:</dt>
                <dd>北京市通州区京沈高速旁</dd>

                <dt>微信:</dt>
                <dd>与手机同号</dd>
            </dl>
        </div>
    </div>

    <div class="right">
        <div class="news-list">
            <h3>公司新闻</h3>
            <ul>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
                <li class="item"><a href="">恭喜公司新官网正式上线啦...</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>

    </div>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


头部样式表header.css:


实例

/*网页头部内容*/
.header {
    background-color: black;
    color: white;
    margin: 0;
}

/*头部内容区*/
.header .content {
    margin: 0 auto;
    width: 1000px;
    height: 60px;
    background-color: black;
}

/*头部导航区*/
.header .content .nav {
    /*清空导航ul元素的默认样式*/
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

/*清除无序列表的小点*/
.header .content .nav .item {
    list-style: none;
}

/*导航栏的a标签设置样式*/
.header .content .nav .item a {
    /*清除下划线*/
    text-decoration-line: none;

    /*让.nav .item下的a标签浮动*/
    float: left;

    /*设置宽高还有a标签间的间距*/
    line-height: 60px;
    min-width: 160px;
    min-height: 60px;
    padding: 0 20px;

    /*设定文字颜色并居中显示*/
    text-align: center;
    color: lightcyan;
}

/*鼠标停留改变字体的效果*/
.header .content .nav .item a:hover {
    color: white;
    font-size: 1.1rem;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


底部样式表footer.css:


实例

/* 底部的基本样式 */
.footer {
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
    background-color: #444;
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: lightgrey;
}

/* 鼠标移入时的显示效果*/
.footer .content  a:hover {
    color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


主页用样式表index.css:


实例

/*设置页面主体内容部分*/
.container {
    /*设置宽高值,和导航栏一样居中显示页面内容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮动的子元素*/
    overflow: hidden;
}

.wrap {
    /* 继承父级区块container宽度 width:1000px; */
    width: inherit;
    /* 高度也继承主体区块 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
    margin-left: -100%;
}
.right {
    /* -180px就正好将右区块上移到中间区块右侧显示 */
    margin-left: -280px;
}

/*主体内容用padding将其挤出*/
.main {
    padding:0 280px;

}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    overflow: hidden;
}

.main ul li:first-child {
    float: left;
}
.main ul li:last-child {
    float: right;
}
.main ul li:hover {
    border: 1px solid yellow;
}

.left h3 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.text-img {
    padding:0 15px;
    margin-bottom: 300px;
    line-height: 1.5em;
}

.text-img img {
    float: left;
    margin-right: 10px;
}

.contact {
    padding:0 20px;
    text-align: left;
    line-height: 1.5em;
}

dt {
    float: left;
}

.right h3 {
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.news-list {
    padding: 0 15px;
}

.news-list ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    line-height: 1.5em;
}

.news-list ul li a {
    color: #6c6c6c;
    text-decoration-line: none;
}

.news-list ul li a:hover {
    color: #FF5000;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


主页最终显示效果:主页.png



公司新闻页面,使用的样式表有header.css,footer.css,left.css(左侧快捷链接按钮),news.css(公司新闻页面样式表)。


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/news.css">
    <title>公司新闻</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">公司新闻</a></li>
            <li class="item"><a href="products.html">最新产品</a></li>
            <li class="item"><a href="about.html">关于我们</a></li>
            <li class="item"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
</div>
<!-- 中间主体 -->
<div class="container">
    <!--   banner图-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>
    <!-- 1. 中间内容区块 -->
    <div class="wrap">
        <div class="main">

            <div class="news-list">
                <h3>公司新闻</h3>
                <ul>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                    <li class="item"><a href="">[2019-04-22]  恭喜公司新官网正式上线啦恭喜公司新官网正式上线啦...      admin</a></li>
                </ul>
                <div class="pages">
                    <ul>
                        <li><a href="">上一页</a></li>
                        <li><a href="" class="active">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>栏目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新闻</a></li>
                <li class="item"><a href="products.html">最新产品</a></li>
                <li class="item"><a href="about.html">关于我们</a></li>
                <li class="item"><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


公司新闻页面样式表news.css:


实例

/*设置页面主体内容部分*/
.container {
    /*设置宽高值,和导航栏一样居中显示页面内容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮动的子元素*/
    overflow: hidden;
}

.wrap {
    /* 继承父级区块container宽度 width:1000px; */
    width: inherit;
    /* 高度也继承主体区块 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
    margin-left: -100%;
}
.right {
    /* -180px就正好将右区块上移到中间区块右侧显示 */
    margin-left: -280px;
}

/*主体内容用padding将其挤出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}

.main .news-list {
    padding: 0 15px;
}

.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    overflow: hidden;
}

.main .news-list {
    padding: 0 15px;
}

.main .news-list ul {
    list-style: none;
    margin: 0 auto;
    padding-left: 0;
    line-height: 1.5em;
}

.main .news-list ul li a {
    color: #6c6c6c;
    text-decoration-line: none;
}

.main .news-list ul li a:hover {
    color: #FF5000;
}

.main .news-list .pages {
    margin: 15px auto;
}

.main .news-list .pages ul li a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    min-width: 26px;
    padding: 0 5px;
    text-align: center;
    margin: 0 2px;
    border: 1px solid black;
    float: left;
}

.main .news-list .pages ul li a:hover .main .news-list .pages ul li a.active{
    background-color: #FF5000;
    color: #eeeeee;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


左侧快捷链接按钮样式表left.css:


实例

.left h3 {
    margin: 10px auto;
    text-align: center;
    border-bottom: 1px solid;
}

.left ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left li a {
    display: inline-block;
    width: 100%;
    height: 50px;
    background-color: black;
    color: white;
    text-decoration-line: none;
    line-height: 50px;
    text-align: center;
}

.left li a:hover {
    background-color: red;
    font-size: 1.1em;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


公司新闻页面最终显示效果:


公司新闻.png



最新产品页面使用样式表有header.css,footer.css,left.css,products.css。 页面代码如下:


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/products.css">
    <title>最新产品</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">公司新闻</a></li>
            <li class="item"><a href="products.html">最新产品</a></li>
            <li class="item"><a href="about.html">关于我们</a></li>
            <li class="item"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner图-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中间内容区块 -->
    <div class="wrap">
        <div class="main">
            <div class="img-list">
                <h3>最新产品</h3>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                </ul>
                <ul>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                    <li class="item">
                        <a href=""><img src="static/image/product.png" alt="" width="190"></a>
                        <a href="">型号: P2415Q</a>
                    </li>
                </ul>
                <div class="pages">
                    <ul>
                        <li><a href="">上一页</a></li>
                        <li><a href="" class="active">1</a></li>
                        <li><a href="">2</a></li>
                        <li><a href="">3</a></li>
                        <li><a href="">4</a></li>
                        <li><a href="">5</a></li>
                        <li><a href="">下一页</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>栏目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新闻</a></li>
                <li class="item"><a href="products.html">最新产品</a></li>
                <li class="item"><a href="about.html">关于我们</a></li>
                <li class="item"><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


最新产品代码样式表products.css:


实例

/*设置页面主体内容部分*/
.container {
    /*设置宽高值,和导航栏一样居中显示页面内容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮动的子元素*/
    overflow: hidden;
}

.wrap {
    /* 继承父级区块container宽度 width:1000px; */
    width: inherit;
    /* 高度也继承主体区块 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
    margin-left: -100%;
}
.right {
    /* -180px就正好将右区块上移到中间区块右侧显示 */
    margin-left: -280px;
}

/*主体内容用padding将其挤出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}

.main .img-list {
    padding: 0 15px;
}

.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .img-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*用伪类在最后一个ul后面清除掉浮动,让分页条正常显示*/
.main .img-list ul:last-of-type::after {
    display: table;
    content: '';
    clear: both;
}

.main .img-list ul li.item {
    float: left;
    margin: 0 20px;
}

.main .img-list ul li a {
    display: table;
    text-decoration-line: none;
    color: #6c6c6c;
}

.main .img-list ul li a:hover {
    color: #FF5000;
}


.main .img-list .pages {
    margin: 15px auto;
}

.mani .img-list .pages ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main .img-list .pages ul li a {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    min-width: 26px;
    padding: 0 5px;
    text-align: center;
    margin: 0 2px;
    border: 1px solid black;
    float: left;
}

.main .news-list .pages ul li a:hover .main .news-list .pages ul li a.active{
    background-color: #FF5000;
    color: #eeeeee;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


最新产品页面最终显示效果:

最新产品.png



关于我们页面使用的样式表有header.css,footer.css,left.css,about.css。页面代码如下:


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/about.css">
    <title>关于我们</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">公司新闻</a></li>
            <li class="item"><a href="products.html">最新产品</a></li>
            <li class="item"><a href="about.html">关于我们</a></li>
            <li class="item"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner图-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中间内容区块 -->
    <div class="wrap">
        <div class="main">
            <div class="text-img">
                <h3>公司简介</h3>
                <img src="static/image/gsjs.jpg" alt="">
                <p>
                    我公司***的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                    每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                    用户自己***一下, 实在是不好意思了,毕竟9块9就包邮了(***PDD商城哟)</p><br>
                <p>我公司***的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                    每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                    用户自己***一下, 实在是不好意思了, 毕竟9块9就包邮了(***PDD商城哟)</p><br>
                <p>我公司***的显示器, 不能当饭吃, 也不能当衣服穿, 并且全部都是方的, 只要通上电, 就可以使用了
                    每一台显示器, 都带了一根电源线, 还有一根信号线, 出厂的时候, 没有配插线板, 需要
                    用户自己***一下, 实在是不好意思了, 毕竟9块9就包邮了(***PDD商城哟)
                </p>
            </div>
        </div>
    </div>

    <div class="left">
        <h3>栏目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新闻</a></li>
                <li class="item"><a href="products.html">最新产品</a></li>
                <li class="item"><a href="about.html">关于我们</a></li>
                <li class="item"><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


关于我们页面样式表about.css:


实例

/*设置页面主体内容部分*/
.container {
    /*设置宽高值,和导航栏一样居中显示页面内容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮动的子元素*/
    overflow: hidden;
}

.wrap {
    /* 继承父级区块container宽度 width:1000px; */
    width: inherit;
    /* 高度也继承主体区块 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
    margin-left: -100%;
}
.right {
    /* -180px就正好将右区块上移到中间区块右侧显示 */
    margin-left: -280px;
}

/*主体内容用padding将其挤出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .text-img {
    margin: 0 15px;
}
.main .text-img img {
    float: left;
}

.main .text-img p {
    text-indent: 2em;
}

运行实例 »


点击 "运行实例" 按钮查看在线实例


关于我们页面最终显示效果:关于我们.png



联系我们页面使用的样式表有header.css,footer.css,left.css,contact.css。页面代码如下:


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/header.css">
    <link rel="stylesheet" href="static/css/footer.css">
    <link rel="stylesheet" href="static/css/left.css">
    <link rel="stylesheet" href="static/css/contact.css">
    <title>联系我们</title>
</head>
<body>
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="item"><a href="index.html">首页</a></li>
            <li class="item"><a href="news.html">公司新闻</a></li>
            <li class="item"><a href="products.html">最新产品</a></li>
            <li class="item"><a href="about.html">关于我们</a></li>
            <li class="item"><a href="contact.html">联系我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <!--banner图-->
    <div class="banner">
        <img src="static/image/banner.jpg" alt="">
    </div>

    <!-- 中间内容区块 -->
    <div class="wrap">
        <div class="main">
                <div class="contact">
                    <h3>联系我们</h3>
                    <ul>
                        <li>电话:+86-010-56778899</li>
                        <li>手机:+86-13801090876321</li>
                        <li>地址:北京市通州区京沈高速旁</li>
                        <li>微信:与手机同号</li>
                    </ul>
                </div>
        </div>
    </div>

    <div class="left">
        <h3>栏目</h3>
        <div class="category">
            <ul>
                <li class="item"><a href="news.html">公司新闻</a></li>
                <li class="item"><a href="products.html">最新产品</a></li>
                <li class="item"><a href="about.html">关于我们</a></li>
                <li class="item"><a href="contact.html">联系我们</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
<div class="footer">
    <div class="content">
        <p>
            <a href="">© PHP中文网版权所有</a>  | 
            <a href="">0551-88889999</a>  | 
            <a href="">皖ICP2016098801-1</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



联系我们样式表contact.css:


实例

/*设置页面主体内容部分*/
.container {
    /*设置宽高值,和导航栏一样居中显示页面内容*/
    width: 1000px;
    margin: 5px auto;
    /*包住浮动的子元素*/
    overflow: hidden;
}

.wrap {
    /* 继承父级区块container宽度 width:1000px; */
    width: inherit;
    /* 高度也继承主体区块 */
    min-height: 800px;
}

.left {
    width: 280px;
    min-height: 800px;
}

.right {
    width: 280px;
    min-height: 800px;
}

.wrap, .left, .right{
    float: left;
}

.left {
    /* -100%等价于-1000px,将左区块拉回到中间的起点处*/
    margin-left: -100%;
}
.right {
    /* -180px就正好将右区块上移到中间区块右侧显示 */
    margin-left: -280px;
}

/*主体内容用padding将其挤出*/
.main {
    /*padding:0 280px;*/
    padding-left: 280px;
}
.main .contact {
    margin: 0 15px;
}
.main h3{
    border-bottom: 1px solid black;
    text-align: center;
    margin: 10px auto;
}

.main .contact ul li {
    line-height: 40px;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


联系我们页面最终显示效果:

联系我们.png


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议