HTML+CSS简单实例（二）

墨蓝 2022-05-17 02:19 145阅读 0赞

# HTML+CSS简单实例（二） #

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

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

1.  代码内容：

<!DOCTYPE html>
    
    <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>

2.css放的地方：  
![这里写图片描述][70]  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]  
![这里写图片描述][70 5]

[https_www.zcool.com.cn_article_ZMTY0ODg0.html]: https://www.zcool.com.cn/article/ZMTY0ODg0.html
[70]: /images/20220517/abf4706b36a0478c9ba8d13995cf360e.png
[70 1]: /images/20220517/669c51c81346429ab01e4a58744d84cb.png
[70 2]: /images/20220517/0be2b6d7c74243419a6cfa23e55a24ee.png
[70 3]: /images/20220517/df84bbbbd9494e658b6f02f4e0ef5b4f.png
[70 4]: /images/20220517/6a438953b4f34051bb1c992b938a4b70.png
[70 5]: /images/20220517/69daea269eda491e89d930ab348a1b16.png