CSS.06 -- 尚合网页模拟

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    /*css初始化*/

    body,div,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,input{

        margin:0;

        padding: 0;

        font:12px simsun;

    }

    img{

        border: 0 none;

    }

    li{

        list-style: none;

    }

    a{

        text-decoration: none;

    }

    input{

        border: 0 none;

        outline-style: none;

    }

    .fl{

        float: left;

    }

    .fr{

        float: right;

    }

    .clearfix:after{

        content: ".";

        display: block;

        height: 0;

        line-height: 0;

        visibility: hidden;

        clear:both;

    }

    .clearfix{

        zoom: 1;

    }

    /*头部开始*/

    .header{

        width: 980px;

        height: 39px;

        margin: 20px auto 0px;

    }

    .logo{

        width: 179px;

        height: 39px;

    }

    .search{

        width: 195px;

        height: 30px;

        border:1px solid #ECECEC;

    }

    .search input[type="text"]{

        width: 165px;

        height: 30px;

        vertical-align: top;

    }

    .search input[type="button"]{

        width: 30px;

        height: 30px;

        vertical-align: top;

        background: url("images/search2.jpg");

    }

    .nav{

        height: 55px;

        background: url("images/nav_bg.png");

        border-top:1px solid #bbb;

    }

    .nav-con{

        width: 980px;

        height: 55px;

        margin: 0 auto;

    }

    .nav-con li{

        float: left;

    }

    .nav-con li a{

        display: inline-block;

        /* height: 55px; */

        font: 700 12px/55px 宋体;

        color:#000;

        padding:0 30px;

        background: url("images/nav_bg-line.png") no-repeat right;

    }

    .nav-con li a:hover{

        color:#7cb609;

    }

    /*头部结束*/

    /*banner部分开始*/

    .banner{

        width: 980px;

        height: 597px;

        margin: 0 auto;

    }

    .mes{

        height: 32px;

        background: #FBFBFB;

        border-top: 1px solid #EFEFEF;

        border-bottom: 1px solid #EFEFEF;

        margin-bottom: 15px;

    }

    .mes-con{

        width: 980px;

        height: 32px;

        margin:0 auto;

    }

    .mes-con-l{

        height: 32px;

        line-height: 32px;

    }

    .mes-con-r{

        height: 16px;

        margin-top: 8px;

    }

    /*banner 部分结束*/

    /*新闻开始*/

    .news{

        width: 980px;

        margin: 15px auto;

    }

    .news-left,.news-cen,.news-right{

        border:1px solid #E4E4E4;

        height: 224px;

    }

    /*新闻左边盒子开始*/

    .news-left{

        width: 310px;

        position: relative;

    }

    .news-cen{

        width: 373px;

        margin-left:12px;

    }

    .news-right{

        width: 268px;

    }

    .pro{

        margin: 14px 0 0 6px;

        color:#7AB800;

    }

    .pro img{

        vertical-align: middle;

    }

    .pro-pic{

        position: absolute;

        left:55px;

        top:45px;

    }

    .sj-l{

    position: absolute;

    left:23px;

    bottom:90px;

    }

    .sj-r{

    position: absolute;

    right:23px;

    bottom:90px;

    }

    /*新闻中间盒子*/

    .news-cen ul{

        margin:10px 17px 0;

    }

    .news-cen ul li{

        height: 27px;

        line-height: 27px;

        border-bottom: 1px dashed #DCDCDC;

    }

    .news-cen ul li a{

        color:#000;

    }

    .news-cen ul li a.sorry{

        color:#ff0000;

        font-weight: 700;

    }

    /*新闻右边盒子*/

    .tec{

        margin: 10px 0 30px 28px;

    }

    .tec li{

        height: 12px;

        border-left: 3px solid #7AB800;

        margin-top:10px;

        line-height: 12px;

        padding-left:5px;

    }

    .news-right p{

        margin-left:28px;

        line-height: 18px;

    }

    /*新闻右边盒子结束*/

    /*底部开始*/

    .footer{

        height: 280px;

        background: #2D2D2D;

        border-bottom: 1px dashed #414141;

    }

    .footer-con{

        width: 980px;

        margin: 0 auto;

    }

    .footer-con dl{

        float: left;

        margin-top:20px;

        margin-right:40px;

    }

    .footer-con dl dt{

        color:#c0c0c0;

    }

    .footer-con dl dd{

        color:#707070;

        margin-top: 20px;

    }

    .bot{

        background: #2D2D2D;

        height: 54px;

        text-align: center;

        padding-top:30px;

    }

    </style>

</head>

<body>

    <!-- .header>.logo>img[src="data:images/logo.jpg"]+^.search>input[type="text"]+input[type="button"] -->

    <!-- 头部部分开始 -->

    <div class="header">

        <div class="logo fl"><img src="data:images/logo.jpg" alt=""></div>

        <div class="search fr">

        <input type="text" value="请输入..."><input type="button"></div>

    </div>

    <div class="nav">

        <div class="nav-con">

            <ul>

                <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>

        </div>

    </div>

    <!-- 头部部分结束 -->

    <!-- banner部分开始 -->

    <div class="banner">

        <img src="data:images/banner.jpg" alt="">

    </div>

    <!-- banner部分结束 -->

    <!-- 信息部分开始 -->

    <div class="mes">

        <div class="mes-con">

            <div class="mes-con-l fl">最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网</div>

            <div class="mes-con-r fr">

            <img src="data:images/zone.png" alt="">

            <img src="data:images/weibo.png" alt="">

            <img src="data:images/xinlang.png" alt="">

            <img src="data:images/renren.png" alt=""></div>

        </div>

    </div>

    <!-- 新闻部分开始 -->

    <div class="news clearfix">

    <!-- 新闻左盒子 -->

        <div class="news-left fl">

            <div class="pro">

                <img src="data:images/o.jpg" alt="">

                新品发布

            </div>

            <div class="pro-pic"><img src="data:images/home_hot_01.png" alt=""></div>

            <div class="sj-l"><img src="data:images/left.png" alt=""></div>

            <div class="sj-r"><img src="data:images/right.png" alt=""></div>

        </div>

        <!-- 新闻左盒子结束 -->

        <!-- 新闻中间盒子 -->

        <div class="news-cen fl">

            <div class="pro">

                <img src="data:images/o.jpg" alt="">

                新闻中心

            </div>

            <ul>

                <li><a href="#" class="sorry">致歉公告</a></li>

                <li><a href="#">首批尚合Aonet已全部售馨!</a></li>

                <li><a href="#">【媒体报导】国产高性价比 尚合Aonet四核手机评测</a></li>

                <li><a href="#">尚合Aone智能手机入网证已经获工信部门审批下发.</a></li>

                <li><a href="#">我司通过ISO9001:2008国际质量管理体系认证</a></li>

                <li><a href="#">我司产品已经通过了国家强制性产品3C认证</a></li>

            </ul>

        </div>

        <!-- 新闻中间盒子结束-->

        <!-- 新闻右边盒子开始 -->

        <div class="news-right fr">

            <div class="pro">

                <img src="data:images/o.jpg" alt="">

                技术与支持

            </div>

            <div class="tec">

                <ul>

                    <li>售后服务</li>

                    <li>投诉与建议</li>

                    <li>联保网点</li>

                    <li>常见问题FAQ</li>

                </ul>

            </div>

            <p>深圳市汇聚众合科技发展有限公司<br>

               服务热线：400-633-7922</p>

        </div>

        <!-- 新闻右边盒子结束 -->

    </div>

    <!-- 新闻部分结束 -->

    <!-- 底部开始 -->

    <div class="footer">

        <div class="footer-con">

        <dl>

            <dt>尚合首页</dt>

            <dd>返回首页</dd>

        </dl>

        <dl>

            <dt>尚合首页</dt>

            <dd>返回首页</dd>

        </dl>

        <dl>

            <dt>尚合首页</dt>

            <dd>返回首页</dd>

        </dl>

        <dl>

            <dt>尚合首页</dt>

            <dd>返回首页</dd>

        </dl>

        </div>

    </div>

    <div class="bot">深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市<br>

会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司</div>

</body>

</html>

CSS.06 -- 尚合网页模拟的更多相关文章

引用CSS文件到html网页里方法
引用CSS文件到Html方法-css引入,css引用使用不同的方法来引用css样式表,最终到达的效果相同,但是使用不同方法应用的css文件将影响到SEO及网页打开速度效率. html引用cs ...
纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
CSS伪类选择器active模拟JavaScript点击事件
一.说明设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
【转】C# winform 加载网页模拟键盘输入自动接入访问网络
[转]C# winform 加载网页模拟键盘输入自动接入访问网络声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html ...
H5学习小结——div+css创建电子商务静态网页
使用Sublime Text软件编写电子商务类网站静态形式首页经过差不多一星期的学习,基本掌握了div+css的用法之后,开始了实战练习.首先要做的就是要练习一下一般电子商务网页的编写,我做的是下图 ...
CSS制作一个简单网页的下拉导航栏
网页下拉导航栏的制作网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...
C# winform 加载网页模拟键盘输入自动接入访问网络
声明: 本文原创,首发于博客园 http://www.cnblogs.com/EasyInvoice/p/6070563.html 转载请注明出处. 背景: 由于所在办公室网络限制,笔者每天都使用网络 ...
CSS之fontAwesome代替网页icon小图标
引言奥森图标(Font Awesome)提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ,颜色,阴影. 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常 ...
【css系列】创建网页加载进度条
一.最简单或者明显的方式是使用定时器 1.在网页中加入布局覆盖真实网页内容 2.使用定时器确定加载所用时间的长短,其实并不是真正的加载进度实现 <!DOCTYPE html> <ht ...

随机推荐

Visual Studio 2017 RC 初探安装
上次看到博客介绍 Visual Studio 2017 RC,看到其中一个改进是启动很快,这是一大进步,也是低配电脑的程序员的期望.不过还没体验,是驴是骡子拉出来看看,这不就开始下载. 1.打开官网: ...
java 重写的学习
本文全文转自:http://www.cnblogs.com/happyframework/p/3332243.html,非常感谢 Java中的重写规则比较灵活,具体如下: 除了 private 修饰之 ...
python数据结构（一）------序列
数据结构是通过某种方式(例如对元素进行编号)组织在一起的数据元素的集合:在Python中,最基本的数据结构是序列(sequence),序列中的每个元素被分配一个序列号--即元素的位置,也称为索引. p ...
Dockerfile注意事项
准则尽量将Dockerfile放在空目录中,如果目录中必须有其他文件,则使用.dockerignore文件. 避免安装不必须的包. 每个容器应该只关注一个功能点. 最小化镜像的层数. 多行参数时应该 ...
几分钟看完 flow.ci 全部功能
从 0 到 1,从邀请式内测到收费上线,flow.ci 经历了十个多月的沉淀与打磨.这期间,flow.ci 工程师们奋力赶工,进行了一系列的大功能更新,Bug 修复,功能优化. 这篇文章记录了 flo ...
ZOJ 1492 Maximum Clique 搜索最大团
ZOJ1492 题意:给一个无向图求最大团的大小.节点数小于50 数据有限,考虑记忆化搜索,方程很好给出. 令 Si={vi,vi+1.....vn} mc[i]表示Si最大团的大小,倒着推算. 必 ...
oracle commond
常用commond alter user scott account unlock; --解锁账号 alter user scott identified by new_pwd; --设置密码 lsn ...
Android中Handler使用浅析
1. Handler使用引出现在作为客户,有这样一个需求,当打开Activity界面时,开始倒计时,倒计时结束后跳转新的界面(思维活跃的朋友可能立马想到如果打开后自动倒计时,就类似于各个APP的欢迎 ...
Protobuf学习 - 入门
古之立大事者,不惟有超世之才,亦必有坚忍不拔之志 -- 苏轼·<晁错论> 从公司的项目源码中看到了这个东西,觉得挺好用的,写篇博客做下小总结.下面的操作以C++为编程语言,protoc的版 ...
Android学习总结——开篇
不知不觉做Android开发已经2年多了,一直都没有好好总结过Android的相关内容,是时候好好总结和梳理一下Android的相关内容了,就从最基本的Activity开始吧,关于Activity的知 ...

CSS.06 -- 尚合网页模拟

CSS.06 -- 尚合网页模拟的更多相关文章

随机推荐

热门专题