<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. spring junit

    转载自 http://blog.csdn.net/funi16/article/details/8691575 在写单元测试的时候,一般是对数据库进行增删改查的操作,这个时候,如果之前删除了某条记录, ...

  2. 构建ASP.NET网站十大必备工具(2)

    正常运行时间 当一个网站发布以后,你肯定希望你的网站不会遇到任何问题,一直处在正常运行状态之中.现在,我使用下面这些工具来监控“Superexpert.com”网站,确保它一直处在正常运行状态之中. ...

  3. step2-------使用myeclipse创建maven java web项目

    1.文章内容概述: 在对项目需求进行分析之后,决定使用maven对我的java web项目进行管理,这篇文章记录了使用myeclipse创建maven java web项目的过程. 2.开发环境: j ...

  4. oracle中rownum和rowid的区别

    rownum和rowid的区别总括: rownum和rowid都是伪列,但是两者的根本是不同的. rownum是根据sql查询出的结果给每行分配一个逻辑编号,所以你的sql不同也就会导致最终rownu ...

  5. poj 2446 Chessboard (二分匹配)

    Chessboard Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12800   Accepted: 4000 Descr ...

  6. （引用）web安全测试

    转载:http://www.51testing.com/html/44/15020244-908645.html Web安全测试之XSS XSS 全称(Cross Site Scripting) 跨站 ...

  7. SQL Server Profiler使用方法

    一.SQL Server Profiler使用方法 1.单击开始--程序--Microsoft SQL Server 2005--性能工具--SQL Server Profiler,如下图:   2. ...

  8. search--搜索引擎的使用笔记

    重度使用 完全匹配搜索 “”把搜索词放在双引号中 搜索不包含该词 减号- 常用的通配符 星号* 站内搜索site docker site:http://blog.daocloud.io/ 扩大范围搜索 ...

  9. win7 64位 mongodb2.6.0 安装服务启动

    Workaround to install as a service You can manually install 2.6.0 as a service on Windows from an Ad ...

  10. 算法与数据结构实验题6.4 order （二叉树）

    1.题目: 2.代码: #include<iostream> #include<algorithm> using namespace std; struct Node { in ...