HTML+CSS简单实例（二）

最新推荐文章于 2024-08-10 10:42:27 发布

m0_37655876

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量3.3k

点赞数 2

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/m0_37655876/article/details/81429622

版权

HTML+CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML+CSS简单实例（二）

本实例参考https://www.zcool.com.cn/article/ZMTY0ODg0.html

目的：实现简单欧朋网站。

代码内容：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <style>
            .head{width:1325px;height:65px; border-bottom:2px solid #f2f2f2;}
            .logo{padding-left:192px;padding-top:11px;float:left;}
            .nav{float:left;width:530px;}
            .nav li{float:left;height:65px;line-height:65px;}/*display:block是块*/
            .nav a{display:block; padding:0 25px;}/*display:block是块*/           
            ul {list-style:none;margin:0px;} 
            .pro{ background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .first a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .down a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .company a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .forum a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .help a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}
            .develop a:hover{background-image:url(images/line.png); background-repeat:no-repeat; background-position:center 55px;}            
            .phone{width:70px;float:left;}
            .phone img{padding:20px 2px;float:left;}
            .phone a{display:block;height:65px;line-height:65px;}
            .share{margin-left:11px;}
            .share a{ display:block;padding:24px 0 ;width:30px;float:left;}
            .share .sina{ background-image:url(images/ sina.png); background-repeat:no-repeat; background-position:5px 24px;}
            .share .dou{ background-image:url(images/dou.png); background-repeat:no-repeat; background-position:5px 24px;}
            .share .ren{ background-image:url(images/ren.png); background-repeat:no-repeat; background-position:5px 24px;}
            .share .weibo{ background-image:url(images/weibo.png);}
            .opreapro{width:1325px;border-bottom:2px solid  #dcdcdc;height:36px;}
            .opera{ padding-left:192px;}
            .opera li{float:left;}
            .opera a{ display:block;height:36px;line-height:36px;padding:0 20px;}
            .newopera {background-color:#f7f7f7; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;}
            .browse a:hover{background-color:#f7f7f7; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;}
            .operaHD a:hover{background-color:#f7f7f7; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;}
            .Service a:hover{background-color:#f7f7f7; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;}
            .operaproduct{background-color:#f1f1f1;width:1325px;}
            .opera_news {width:940px;pading-left:192px; height:75px;}
            .news{padding-top:30px;float:left;}
            .beta{display:block; float:left; padding-left:360px;padding-top:13px;} 
            .open{ display:block;padding-left:10px;padding-top:13px;float:right;}
            .product_zhanshi{padding-left:192px;}
            .product1{border-top:2px solid #e0e0e0;}
            .product2{ border:10px solid #ffffff;}
            .operapro_bottom{height:320px; padding-left:192px; }
            .operapro_bottom img{ display:block;float:left;padding-top:52px; }
            .func_mid{padding-left:20px;padding-right:20px;}
            .footer{width:1325px;}
            .footer_left{margin-left:192px;margin-top:28px;float:left;}
            .p1 a{color:#00bcee;}
            .p2{color:#999999;height:68px;line-height:68px;}
            .footer_right{margin-right:192px;margin-top:28px;float:right;}
            .footer_right li{float:left;}
            .footer_right a{display:block;width:60px;}
            .p3{color:#999999;height:68px;line-height:68px;}
        </style>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div class="head">
            <img class="logo" src="images/logo.png" />
            <ul class="nav">
                <li class="first"><a href="">首页</a></li>
                <li class="pro"><a href="">产品</a></li>
                <li class="down"><a href="">下载</a></li>
                <li class="company"><a href="">公司</a></li>
                <li class="forum"><a href="">论坛</a></li>
                <li class="help"><a href="">帮助</a></li>
                <li class="develop"><a href="">开发者</a></li> 
            </ul>
            <div class="phone">
                <img src="images/phone.png" />
                <a  href=""><span>手机版</span></a>
            </div>
            <div class="share">
                <a class="sina" href=""></a>
                <a class="dou" href=""></a>
                <a class="ren" href=""></a>
                <a class="weibo" href=""></a>
            </div>
        </div>    

        <div class="opreapro">
            <ul class="opera">
                <li class="newopera"><a href="">新一代欧朋浏览器</a></li>
                <li class="browse"><a href="">欧朋浏览器</a></li>
                <li class="operaHD"><a href="">欧朋HD</a></li>
                <li class="Service"><a href="">欧朋服务</a></li>
            </ul>
        </div>

        <div class="operaproduct">
            <div class="opera_news">
                <img class="news" src="images/news.png" />
                <a href="" class="beta"> <img src="images/o.png" />  </a>
                <a href="" class="open"> <img src="images/downlow.png" /> </a>
            </div>
            <div class="product_zhanshi"> 
                <img class="product1" src="images/product1.png" /> 
                <img class="product2" src="images/product2.png" />
            </div>
            <div class="operapro_bottom">
                <img src="images/fuction0.png" />
                <img class="func_mid" src="images/fuction1.png" />
                <img src="images/fuction2.png" />
            </div>
        </div>

        <div class="footer">
            <div class="footer_left">
                <p class="p1">欧朋浏览器适用于安卓、塞班、黑莓、JAVA和数千种手机，用手机登录<a href="">m.oupeng.com</a>快速安装。</p>
                <p class="p2">copyright@2013欧朋保留所有权利。</p>
            </div>
            <div class="footer_right">
                <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>
                </ul> 
                <p class="p3">欧朋浏览器超过2亿月度在线用户，遍及全国217个国家和地区。</p>
            </div>
        </div>

    </body>
</html>