1120练习，CSS制作网页

2022-10-24 13:31:03
<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>
码农公寓

相关文章
