一个网站界面的实现

小灰灰 2021-11-05 09:26 286阅读 0赞

1.目录结构  
![在这里插入图片描述][20190808223728825.png]  
2.index.html  
源代码：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta keywords="HTML5 布局">
    <meta content="网页布局">
    <title>网页布局</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css"> 
    </head>
    
    <body>
    	<div class="top-warpper">
            
            <div class="header center">
                <div class="logo fl"><img src="img/websitelog.png" alt=""></div>
                <div class="tel fr"><img src="img/tel.png" alt=""></div>
            </div>
            
            
            <div class="nav">
                <nav class="center">
                    <ul>
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">新闻中心</a></li>
                        <li><a href="#">通知公告</a></li>
                        <li><a href="#">产品介绍</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">招募英才</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </nav>
            </div>
            
            
            <div class="banner center">
                <img src="img/banner.png" alt="">
            </div>
            
        </div>
        
        <div class="main center">
            <div class="main-left fl">
                
                <div class="moudle info">
                    <div class="title">新闻中心</div>
                    <div class="content">
                        <ul>
                        	<li><i class="i-list"></i><a href="#">环境好，交通方便。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">学区房降价调优。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">别墅出租。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">优惠来了，在2019-08-20前购房有优惠哦。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">交通方便好，交通方便。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境环境好，绿化好。</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">靠近二环，交通方便。</a><time>2019-08-08</time></li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="moudle notice notice-down">
                    <div class="title">产品介绍</div>
                    <div class="content">
                    	<ul>
                        	<li>
                                <a href="#">
                                	<div class="img"><img src="img/house1.jpeg" alt=""></div>
                                    <div class="txt">
                                    	<h2>暖色调，宽敞，明亮</h2>
                                        <span>￥780</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                	<div class="img"><img src="img/house2.jpg" alt=""></div>
                                    <div class="txt">
                                    	<h2>黄金楼层，学区房</h2>
                                        <span>￥520</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                	<div class="img"><img src="img/house3.jpg" alt=""></div>
                                    <div class="txt">
                                    	<h2>高等小区，居家shiyi</h2>
                                        <span>￥560</span>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                	<div class="img"><img src="img/house4.jpg" alt=""></div>
                                    <div class="txt">
                                    	<h2>宽敞舒适</h2>
                                        <span>￥780</span>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="moudle people">
                    <div class="title">员工风采</div>
                    <div class="content">
                    	<ul>
                        	<li>
                            	<div class="img fl"><img src="img/people1.jpg" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：张三</span>
                                    <span>职位：经理</span>
                                    <span>学历：博士</span>
                                </div>
                            </li>
                            <li>
                            	<div class="img fl"><img src="img/people2.jpg" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：王刚</span>
                                    <span>职位：经理</span>
                                    <span>学历：本科</span>
                                </div>
                            </li>
                            <li>
                            	<div class="img fl"><img src="img/people3.jpg" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：张莉</span>
                                    <span>职位：经理</span>
                                    <span>学历：本科</span>
                                </div>
                            </li>
                            <li>
                            	<div class="img fl"><img src="img/people4.jpg" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：赵海</span>
                                    <span>职位：经理</span>
                                    <span>学历本科：</span>
                                </div>
                            </li>
                            <li>
                            	<div class="img fl"><img src="img/people5.png" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：刘若男</span>
                                    <span>职位：经理</span>
                                    <span>学历：本科</span>
                                </div>
                            </li>
                            <li>
                            	<div class="img fl"><img src="img/people6.jpeg" alt=""></div>
                                <div class="txt fr">
                                	<span>姓名：李本新</span>
                                    <span>职位：经理</span>
                                    <span>学历：</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                
            </div>
            <div class="main-right fr">
            	
            	<div class="links">
                	<div class="link01"><a href="#">公司简介</a></div>
                    <div class="link02"><a href="#">联系我们</a></div>
                    <div class="link03"><a href="#">诚聘英才</a></div>
                    <div class="link04"><a href="#">关于我们</a></div>
                </div>
                
                
                <div class="list new">
                	<div class="title">新闻中心</div>
                    <div class="content center">
                    	<ul>
                        	<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                        </ul>
                    </div>
                </div>
                
                
                <div class="list new">
                	<div class="title">通知公告</div>
                    <div class="content center">
                    	<ul>
                        	<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                            <li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
        
        <footer>
        	<div class="footer-links">
            	<a href="#">首页</a> | 
                <a href="#">公司简介</a> | 
                <a href="#">新闻中心</a> | 
                <a href="#">通知公告</a> | 
                <a href="#">产品介绍</a> | 
                <a href="#">关于我们</a> | 
                <a href="#">诚聘英才</a> | 
                <a href="#">联系我们</a>
                
            </div>
            <div class="copyright">
            	https://me.csdn.net.
            </div>
        </footer>
    </body>
    </html>

2.base.css

@charset "utf-8";
    /*!
     * @名称：base.css
     * @功能：1、重设浏览器默认样式
     *       2、设置通用原子类
     */
    /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
    html {
    	background: white;
    	color: black;
    }
    /* 内外边距通常让各个浏览器样式的表现位置不同 */
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    pre,
    code,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    hr,
    button,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
    	margin: 0;
    	padding: 0;
    }
    /* 要注意表单元素并不继承父级 font 的问题 */
    body,
    button,
    input,
    select,
    textarea {
    	font: 12px "微软雅黑", \5b8b\4f53, arial, sans-serif;
    }
    input,
    select,
    textarea {
    	font-size: 100%;
    }
    /* 去掉 table cell 的边距并让其边重合 */
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    /* ie bug：th 不继承 text-align */
    th {
    	text-align: inherit;
    }
    /* 去除默认边框 */
    fieldset,
    img {
    	border: none;
    }
    /* ie6 7 8(q) bug 显示为行内表现 */
    iframe {
    	display: block;
    }
    /* 去掉 firefox 下此元素的边框 */
    abbr,
    acronym {
    	border: none;
    	font-variant: normal;
    }
    /* 一致的 del 样式 */
    del {
    	text-decoration: line-through;
    }
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    th,
    var {
    	font-style: normal;
    	font-weight: 500;
    }
    /* 去掉列表前的标识，li 会继承 */
    ol,
    ul {
    	list-style: none;
    }
    /* 对齐是排版最重要的因素，别让什么都居中 */
    caption,
    th {
    	text-align: left;
    }
    /* 来自yahoo，让标题都自定义，适应多个系统应用 */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
    	font-size: 100%;
    	font-weight: 500;
    }
    q:before,
    q:after {
    	content: '';
    }
    /* 统一上标和下标 */
    sub,
    sup {
    	font-size: 75%;
    	line-height: 0;
    	position: relative;
    	vertical-align: baseline;
    }
    sup {
    	top: -0.5em;
    }
    sub {
    	bottom: -0.25em;
    }
    /* 让链接在 hover 状态下显示下划线 */
    /*a:hover {
      text-decoration:underline;
    }*/
    /* 默认不显示下划线，保持页面简洁 */
    ins,
    a {
    	text-decoration: none;
    }
    /* 去除 ie6 & ie7 焦点点状线 */
    a:focus,
    *:focus {
    	outline: none;
    }
    /* 清除浮动 */
    .clearfix:before,
    .clearfix:after {
    	content: "";
    	display: table;
    }
    .clearfix:after {
    	clear: both;
    	overflow: hidden;
    }
    .clearfix {
    /*zoom:1;*/ /* for ie6 & ie7 */
    }
    .clear {
    	clear: both;
    	display: block;
    	font-size: 0;
    	height: 0;
    	line-height: 0;
    	overflow: hidden;
    }
    /* 设置显示和隐藏，通常用来与 js 配合 */
    .hide {
    	display: none;
    }
    .block {
    	display: block;
    }
    /* 设置浮动，减少浮动带来的 bug */
    .fl,
    .fr {
    	display: inline;
    }
    .fl {
    	float: left;
    }
    .fr {
    	float: right;
    }
    /* 不浮动的情况下设置居中*/
    .center {
    	margin: 0 auto;
    }

3.index.css

@charset "utf-8";
    /* CSS Document */
    body{
    	min-width: 1000px;
    }
    /*页面整体样式*/
    .top-warpper {
    	background: #E8E8E8;
    }
    /*头部样式*/
    .header {
    	width: 1000px;
    	height: 90px;
    }
    .header .logo {
    	padding-top: 13px;
    	padding-left: 30px;
    }
    .header .tel {
    	padding-top: 15px;
    	padding-right: 30px;
    }
    /*导航样式*/
    .nav {
    	width: 100%;
    	height: 36px;
    	background: #01559A;
    }
    .nav nav {
    	width: 1000px;
    	height: 36px;
    	line-height: 36px;
    	font-size: 14px;
    }
    .nav nav a {
    	color: #fff;
    }
    .nav nav ul li {
    	float: left;
    	height: 35px;
    	margin-top: 1px;
    }
    .nav nav ul li:hover {
    	background: #229EDA;
    }
    .nav nav ul li a {
    	padding: 0 25px;
    }
    /*banner样式*/
    .banner {
    	width: 1000px;
    	height: 350px;
    	overflow: hidden;
    	margin-top: 10px;
    }
    /*main样式*/
    .main {
    	width: 1000px;
    	overflow: hidden;
    }
    .main-left {
    	width: 673px;
    }
    .main-right {
    	width: 307px;
    }
    /*页面模块共用样式*/
    .moudle {
    	overflow: hidden;
    }
    .moudle .title {
    	width: 100%;
    	color: #039bda;
    	border-bottom: 1px solid #ccc;
    	font-size: 24px;
    	line-height: 36px;
    }
    /*信息推荐样式*/
    .notice {
    	width: 673px;
    	margin-top: 20px;
    }
    .notice-down {
    	margin-top: 30px;
    }
    .notice .content ul li {
    	width: 168px;
    	height: 220px;
    	float: left;
    }
    .notice .content ul li a {
    	padding: 20px 0px 0px 20px;
    	display: block;
    }
    .notice .content ul li a .img {
    	width: 148px;
    	height: 148px;
    	overflow: hidden;
    }
    .notice .content ul li a .img img {
    	width: 148px;
    	height: 148px;
    }
    .notice .content ul li a .txt {
    	width: 100%;
    	text-align: center;
    	line-height: 24px;
    	color: #333;
    	padding-top: 10px;
    }
    /*金牌经济人样式*/
    .people {
    	width: 673px;
    	overflow: hidden;
    	margin-top: 30px;
    }
    .people .title {
    	border-bottom: 2px solid #ccc;
    }
    .people .content ul li {
    	width: 220px;
    	height: 121px;
    	float: left;
    }
    .people .content ul li .img {
    	width: 100px;
    	height: 106px;
    	padding: 20px 0px 0px 20px;
    }
    .people .content ul li .img img {
    	width: 100px;
    	height: 100px;
    }
    .people .content ul li .txt {
    	width: 90px;
    	padding-top: 20px;
    }
    .people .content ul li .txt span {
    	display: block;
    	margin-bottom: 10px;
    	line-height: 160%;
    }
    /*快速链接样式*/
    .links {
    	width: 307px;
    	height: 291px;
    }
    .link01,
    .link02,
    .link03,
    .link04 {
    	width: 143px;
    	height: 110px;
    	float: left;
    	font-size: 20px;
    	display: -moz-box;
    	display: -webkit-box;
    	-moz-box-align: center;
    	-webkit-box-align: center;
    	-moz-box-pack: center;
    	-webkit-box-pack: center;
    	margin-top: 20px;
    }
    .link01 a,
    .link02 a,
    .link03 a,
    .link04 a {
    	color: #fff;
    }
    .link01 {
    	background: #636363;
    	margin-right: 20px;
    }
    .link02 {
    	background: #00547F;
    }
    .link03 {
    	background: #1991C9;
    	margin-right: 20px;
    }
    .link04 {
    	background: #7BAE02;
    }
    /*列表样式*/
    .list,
    .info {
    	margin-top: 20px;
    }
    .list .title {
    	width: 100%;
    	background: #48A3D2;
    	font-size: 16px;
    	color: #fff;
    	height: 36px;
    	line-height: 36px;
    	text-align: center;
    }
    .list .content,
    .info .content {
    	width: 287px;
    	line-height: 28px;
    	font-size: 14px;
    	padding-top: 15px;
    }
    .info .content {
    	width: 673px;
    }
    .list .content ul li,
    .info .content ul li {
    	width: 287px;
    	height: 28px;
    	background: url(../images/images/list.png) 0 -19px no-repeat;
    	overflow: hidden;
    }
    .info .content ul li {
    	width: 664px;
    }
    .list .content ul li a,
    .info .content ul li a {
    	display: block;
    	padding-left: 10px;
    	float: left;
    	color: #666;
    }
    .list .content ul li time,
    .info .content ul li time {
    	color: #999;
    	float: right;
    	font-size: 13px;
    }
    .list .content ul li:hover,
    .info .content ul li:hover {
    	background-position: 0 12px;
    }
    .list .content ul li:hover > a,
    .info .content ul li:hover > a {
    	color: #01559A;
    	text-decoration: underline;
    }
    /*最新消息样式*/
    .new {
    	width: 307px;
    	height: 272px;
    	background: #E8E8E8;
    }
    /*页面底部*/
    footer {
    	width: 1000px;
    	border-top: 1px solid #ccc;
    	height: 87px;
    	margin: 0 auto;
    	margin-top: 30px;
    }
    footer .footer-links {
    	line-height: 160%;
    	color: #969696;
    	width: 100%;
    	overflow: hidden;
    	text-align: center;
    	padding: 20px 0px 10px 0px;
    }
    footer .footer-links a {
    	color: #5e81bd;
    }
    footer .copyright {
    	width: 100%;
    	text-align: center;
    	color: #666;
    }

4.效果显示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70 1]  
软件采用HBuilder实现，希望你能够用上！

[20190808223728825.png]: /images/20211104/7c277a1a0a504b6a9fef0fee827b067e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70]: /images/20211104/f3778c9c79fe4a9fa1b6e67d6e656226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMzIxMzM2_size_16_color_FFFFFF_t_70 1]: /images/20211104/d6e22c1c6aad459585c71eb16a1fb67c.png