<title>智博星主页</title>

<style type="text/css">

*{ margin:0px auto; padding:0px; font-family:微软雅黑;}

input {outline:none;}

.zheng{ background:url(images/banner.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size:100%}

#top{ width:100%; height:60px; background-color:#333; opacity:0.7; position:fixed; top:0px;}

#top1{ width:100%; height:60px; position:fixed; top:0px;}

#logo{ background:url(images/logo-01.png); width:95px; height:30px; float:left; margin-left:25px; margin-top:14px;}

#right{ float:right;}

#daohang{ width:350px; height:60px; float:left; margin-right:40px; margin-top:2px;}

.list{ width:50px; height:48px; float:left; margin-top:5px; margin-right:20px; text-align:center; line-height:50px; vertical-align:middle; font-size:13px; color:#FFF; opacity:1}

.list:hover{ cursor:pointer; border-bottom:2px solid #2b96da}

#sousuo{ float:right;}

#zhuce{ float:right; width:60px; height:28px; border:1px solid #2b96da; margin-top:15px; border-radius:5px; background-color:#2b96da; font-weight:bold; text-align:center; vertical-align:middle; line-height:28px; color:#FFF; font-size:14px}

#zhuce:hover{ cursor:pointer}

#denglu{ float:right; width:60px; height:28px; border:1px solid #2b96da; margin-top:15px; margin-right:10px; border-radius:5px; font-weight:bold; text-align:center; vertical-align:middle; line-height:28px; color:#2b96da; font-size:14px}

#denglu:hover{ cursor:pointer; color:#FFF; background-color:#2b96da}

#datu1{ width:100%; height:200px;}

.cpld{ width:200px; height:40px; background-color:#2b96da; margin-top:40px; border-radius:10px; text-align:center; vertical-align:middle; line-height:40px; color:#fff; border:1px solid #2b96da}

.cpld:hover{ cursor:pointer; background-color:#76baf1; opacity:0.8; border:1px solid #2b96da; transition:0.7s;}

.cc{ width:50px; height:50px; border-radius:100px; border:2px solid #FFF; margin-top:50px;}

.cc:hover{ border:2px solid #FFF; cursor:pointer; background-color:#FFF; opacity:0.5}

#datu2{ width:100%; height:800px; background-image:url(images/banner2.jpg); margin-top:300px;}

#datu3{ width:100%; height:800px; background-image:url(images/banner3.jpg);}

#bottom{ width:100%; height:400px; background-color:#333}

#bottom_1{ width:900px; height:100px;}

#az{ width:232px; height:45px; background-image:url(images/AN.png); float:left; margin-right:85px; margin-top:65px; overflow:hidden}

#azxz{ background-image:url(images/1A.png); width:226px; height:292px; position:relative; top:-357px}

#az:hover{ cursor:pointer; overflow:visible}

#ios{ width:232px; height:45px; background-image:url(images/IOS.png); float:left; margin-right:85px; margin-top:65px; overflow:hidden}

#iosxz{ background-image:url(images/1I.png); width:226px; height:292px; position:relative; top:-357px;}

#ios:hover{ cursor:pointer; overflow:visible}

#pc{ width:232px; height:45px; background-image:url(images/PC.png); float:left; margin-top:65px;}

#pc:hover{ cursor:pointer}

#bottom_2{ width:980px; height:170px; margin-top:60px;}

.cp{ width:100px; height:170px; float:left; font-size:20px; color:#FFF; margin-right:150px;}

.cp_list{ color:#09F; font-size:14px; margin-top:15px;}

.cp_list a{ text-decoration:none; color:#09F}

.cp_list a:hover{ text-decoration:underline;}

#lx{ width:230px; height:170px; float:left; font-size:20px; color:#FFF;}

.lx_list{ color:#999; font-size:14px; margin-top:15px;}

</style>

</head>

<body class="zheng">

<div id="top"></div>

<div id="top1">

    <div id="logo"></div>

    <div id="right">

        <div id="sousuo">

            <a href="#"><img src="data:images/searchIcon.png" style=" position:relative; left:142px; top:5px;" /></a>

            <input type="text" placeholder="搜索"  style=" border:1px solid #2b96da; width:100px; height:28px; border-radius:13px; margin-top:15px; margin-right:40px;  padding-left:10px; padding-right:30px; background:transparent;" />

        </div>

        <div id="zhuce">注册</div>

        <div id="denglu">登录</div>

        <div id="daohang">

            <div class="list">首页</div>

            <div class="list">下载</div>

            <div class="list">动态</div>

            <div class="list">社区</div>

            <div class="list">智博星</div>

        </div>

    </div>

</div>

<div id="datu1">

    <div style=" background-image:url(images/011.png); width:672px; height:78px; background-repeat:no-repeat; margin-top:320px;"></div>

    <div style=" background-image:url(images/012.png); width:358px; height:35px; background-repeat:no-repeat; margin-top:20px;"></div>

    <div class="cpld">产品亮点</div>

    <!--<div class="cc"></div>-->

</div>

<div id="datu2">

    <div></div>

    <div style=" width:1014px; height:255px; margin-top:220px;"></div>

    <div style=" background-image:url(images/021.png); width:1014px; height:155px; background-repeat:no-repeat;"></div>

    <div style=" background-image:url(images/022.png); width:358px; height:35px; background-repeat:no-repeat; margin-top:20px;"></div>

    <div class="cpld">用户故事</div>

    <!--<div class="cc"></div>-->

</div>

<div id="datu3">

    <div></div>

    <div style=" width:1014px; height:255px;"></div>

    <div style=" background-image:url(images/031.png); width:1014px; height:78px; background-repeat:no-repeat;"></div>

    <div style=" background-image:url(images/032.png); width:432px; height:35px; background-repeat:no-repeat; margin-top:20px;"></div>

    <div class="cpld">功能列表</div>

    <!--<div class="cc"></div>-->

</div>

<div id="bottom">

    <div id="bottom_1">

        <div id="az">

            <div id="azxz"></div>

        </div>

        <div id="ios">

            <div id="iosxz"></div>

        </div>

        <div id="pc"></div>

    </div>

    <div id="bottom_2">

        <div class="cp">产品

            <div class="cp_list"><a href="#">产品介绍</a></div>

            <div class="cp_list"><a href="#">使用手册</a></div>

            <div class="cp_list"><a href="#">更新日志</a></div>

            <div class="cp_list"><a href="#">案例展示</a></div>

        </div>

        <div class="cp">公司

            <div class="cp_list"><a href="#">关于团队</a></div>

            <div class="cp_list"><a href="#">招聘专栏</a></div>

            <div class="cp_list"><a href="#">新闻资讯</a></div>

            <div class="cp_list"><a href="#">合作加盟</a></div>

        </div>

        <div class="cp">支持

            <div class="cp_list"><a href="#">官方微博</a></div>

            <div class="cp_list"><a href="#">用户社区</a></div>

            <div class="cp_list"><a href="#">隐私声明</a></div>

            <div class="cp_list"><a href="#">服务条款</a></div>

        </div>

        <div id="lx">联系我们

            <div class="lx_list" style="margin-top:30px;">中国.山东省淄博市张店区齐鲁电商谷</div>

            <div class="lx_list">0533-6078222</div>

            <div class="lx_list">17865915831@163.com</div>

        </div>

    </div>

</div>

</body>

</html>

1120练习，CSS制作网页的更多相关文章

  1. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  2. 利用DIV+CSS制作网页过程中常用的基本概念及标签使

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  3. 利用DIV+CSS制作网页过程中常用的基本概念及标签使用细节

    CSS主要用于对HTML文件功能的补充及扩展,其作用就是对HTML文件中各种排版进行设置,达到对网页中字体.颜色.背景.图片等的控制,使网页能够完全依照设计者的想法来显示. CSS可以控制网页的显示, ...

  4. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  5. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

  6. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  8. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

  9. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

随机推荐

  1. Sql 邮件发送

    select name from msdb.dbo.sysmail_profile --邮件发送日志 SELECT * FROM msdb.dbo.sysmail_event_log delete F ...

  2. linux--杂记(rework)

    1.The mind behind Linux https://www.ted.com/talks/linus_torvalds_the_mind_behind_linux 2.Emacs ORG-M ...

  3. jquery 滚动到底部加载

    var body_ = $(window); var indexPage = 2; var pageCount = <?php echo $pageCount;?>; var _ajaxR ...

  4. [转] Oracle analyze 命令分析

    转自:http://blog.sina.com.cn/s/blog_682841ba0101bncp.html 1.analyze table t1 compute statistics for ta ...

  5. [z]vs中无法加入断点进行调试的解决方案

    http://blog.chinaunix.net/uid-15464162-id-3799069.html [ 1] 以前也遇到过同样的问题,但没有问个为什么,也没有探个毕竟.昨天调试一个DLL,添 ...

  6. XHTML跟HTML的区别

    其实二者并没有什么区别,只是THTML的要求更加严格,比如说 1.XHTML 元素必须被正确地嵌套. 错误:<p><span>this is example.</p> ...

  7. github 项目版本控制

    1.申请github账号 2.安装github for windows工具 安装后就可以使用Git Bash打开特制的终端,在里面用来命令行了.喜欢Git命令行方式的朋友到这里就够了. 打开Git B ...

  8. sql联合查询多个表

    SELECT hp_patient.name, hp_ptorders.DrugName, hp_ptorders.Dosage,hp_ptorders.DosageUnit FROM hp_pati ...

  9. TNetHTTPClient演示

    TNetHTTPClient演示 TNetHTTPClient是DELPHI新增加的异步HTTP通信控件(区别于INDY的阻塞控件). unit Unit1; interface uses Winap ...

  10. Windows 设置扩展投影鼠标移出方向

    1. 连接数据线,按下 “WINDOWS” + P 按钮,选择“扩展投影”: 2.更改鼠标移出屏幕的方向:桌面右键选择“屏幕分辨率” , 移动“更改显示器外观”中两个图的相对方向即可: