<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. 编程：什么是REST

    REST (REpresentation State Transfer) 描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy Fielding 的博士论文中,他是 ...

  2. webstorm下搭建编译less环境

    webstorm自带less,不过要编译的话需要nodejs环境. 首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 安装完之后打开命令提示符(w ...

  3. POJ 1511 - Invitation Cards 邻接表 Dijkstra堆优化

    昨天的题太水了,堆优化跑的不爽,今天换了一个题,1000000个点,1000000条边= = 试一试邻接表 写的过程中遇到了一些问题,由于习惯于把数据结构封装在 struct 里,结果 int [10 ...

  4. POJ3694 Network

    题目大意:已知连通图G有N个点m条无向边,有Q次操作,每次操作为增加一条边,问每次操作后图上有几个桥. 如果添加一条边进行Tarjin搜索一次时间复杂度为m*m*q很大,会超时.真的超时,我试过.看了 ...

  5. python-->基础-->003->字符串处理

    一.去除字符串首尾白空格 说明:即为去除字符串的首尾(即头部和尾部)的白空格(空格本身,回车\r,换行\n,制表符\t, 换页符\f ) 实例: str01 = ' abc def # ' print ...

  6. coreseek实战(一)：windows下coreseek的安装与测试

    coreseek实战(一):windows下coreseek的安装与测试 网上关于 coreseek 在 windows 下安装与使用的教程有很多,官方也有详细的教程,这里我也只是按着官方提供的教程详 ...

  7. hihocode 1077 : RMQ问题再临-线段树

    #1077 : RMQ问题再临-线段树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到:小Hi给小Ho出了这样一道问题:假设整个货架上从左到右摆放了N种商品,并 ...

  8. Android打包签名

    Ⅰ.用jdk和sdk自带工具打包签名 a.把jdk下的keytool.exe和jarsigner.exe所在目录(两个工具在同一目录) 添加到环境变量path 1)新建环境变量package,pack ...

  9. Ubuntu和Windows的交互工具---Samba环境配置

    Samba软件安装 使用源代码安装samba,在终端输入如下指令: #sudo apt-get install samba #sudo apt-get install smbclient #sudo ...

  10. 混合硬盘的U310重装系统

    最早接触U310 是在半年前,那时候同学在用的就是U310,需要升级Windows 8 依照以往的经验,弄了一张Windows 8的启动U盘,当在选择磁盘的时候居然发现没有可选项!这个有点出乎意料…… ...