完成一个简易的企业站点,首先创建好主页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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
主页最终显示效果:
公司新闻页面,使用的样式表有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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
公司新闻页面最终显示效果:
最新产品页面使用样式表有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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
最新产品页面最终显示效果:
关于我们页面使用的样式表有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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
关于我们页面最终显示效果:
联系我们页面使用的样式表有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; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
联系我们页面最终显示效果: