Day11

今天根据模板进行了html代码练习。

css

/* CSS Document */
@CHARSET "UTF-8";
body ,html{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height:100%;
    width:100%;
}
body,td,th {
    font-size: 12px;
    font-family: "Microsoft Yahei","黑体","宋体";
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

.swap{
    width:100%; height:400px; margin:0 auto;
}
#slider{
    list-style:none; width:100%; height:100%; margin:0; padding:0; 
}
#slider li{
    width:100%; height:400px; display:none; position:absolute;
}

#naviSlider{
    list-style:none;  margin:0 auto; width:auto; text-align:center; margin-top:3px; *margin-top:5px;
    
}
#naviSlider  li{
    height:10px; width:10px;   cursor:pointer; display:inline-block; 
    background:url(img/dot.png) -10px center no-repeat;
    _background:url(img/dot_ie6.png) -10px center no-repeat;
    *zoom:1;*display:inline;*margin-left:2px;
    
}
#naviSlider li.on{
    background:url(img/dot.png) left center no-repeat;
    _background:url(img/dot_ie6.png) left center no-repeat;
}

html

<html>
<head>
    <link type="text/css" href="css/default.css" rel="stylesheet" />
    <style>
    body{
        background-color:#F7F7F7;
        font:12px 微软雅黑,宋体,Arial,sans-serif;
        margin:0px;
        /*background-image:url(../images/bg6.jpg);*/
        color:#858585;
    }
    .top{
            width:100%;
            height:50px;
            background-color:#0070D7;
            margin:0px;
        }
    .menu{
        width:800px;
        color:white;
        margin:0 auto;
        height:50px;
    }    
    .menu span{
        display:inline-block;
        margin-top:10px;
        margin-left:20px;
        font-size:15px;
        height:30px;
        width:50px;
        line-height:30px;
        text-align:center;
    }
    .menu .logo{
        font-size:20px;
        width:150px;
    }
    .main{
        width:100%;
        margin-top:50px;
    }
    .main .tag{
        margin:0 auto;
        width:200px;
        font-size:18px;
        border-bottom:1px solid #878787;
        text-align:center;
    }
    .main .images{
        margin:0 auto;
        width:80%;
        margin-top:50px;
    }
    </style>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.jslider.js" type="text/javascript"></script>
</head>
<body>
    <div class="top">
        <div class="menu">
            <span class="logo">思途CMS</span>
            <span style="background-color:#075EAD;">首页</span>
            <span>景点</span>
            <span>食宿</span>
            <span>租车</span>
            <span>结伴</span>
            <span>同城</span>
            <span>问答</span>
            <span>游记</span>
        </div>
    </div>
    <div class="banner">
            <div class="swap">
                <ul id="slider">
                    <li style="background:url(images/1.jpg) center center no-repeat #009ee3;" id="myicloud"></li>
                    <li style="background:url(images/2.jpg) center center no-repeat #ffcc00;"></li>
                    <li style="background:url(images/3.jpg) center center no-repeat #303030;"></li>
                </ul>
            </div>
            <ul id="naviSlider">
                <li sindex="1" class="on"></li>
                <li sindex="2"></li>
                <li sindex="3"></li>
            </ul>
    </div>
    <div class="main">
        <div class="tag">
            热门目的地
        </div>
        <div class="images">
            <div style="float:left;margin:5px;">
                <img src="images/p/1.jpg" style="width:250px;height:200px;"/>
            </div>
            <div style="float:left;margin:5px;">
                <img src="images/p/2.jpg"  style="width:250px;height:200px;"/>
            </div>
            <div style="float:left;margin:5px;">
                <img src="images/p/3.jpg"  style="width:250px;height:200px;"/>
            </div>
            <div style="float:left;margin:5px;">
                <img src="images/p/4.jpg"  style="width:250px;height:200px;"/>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div style="margin-bottom:20px;">
        </div>
    </div>
    
    <script type="text/javascript">
    $(document).ready(function(){
        $("#slider").jSlider({
                pause:1500,
                naviSlider:'naviSlider'
            }
        );
                    
    })
    </script>
</body>
</html>

css

/* CSS Document */
@CHARSET "UTF-8";
body ,html{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    height:100%;
    width:100%;
}
body,td,th {
    font-size: 12px;
    font-family: "Microsoft Yahei","黑体","宋体";
}
ul {
    list-style:none;
    margin:0;
    padding:0;
}
a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}

.swap{
    width:100%; height:400px; margin:0 auto;
}
#slider{
    list-style:none; width:100%; height:100%; margin:0; padding:0; 
}
#slider li{
    width:100%; height:400px; display:none; position:absolute;
}

#naviSlider{
    list-style:none;  margin:0 auto; width:auto; text-align:center; margin-top:3px; *margin-top:5px;
    
}
#naviSlider  li{
    height:10px; width:10px;   cursor:pointer; display:inline-block; 
    background:url(img/dot.png) -10px center no-repeat;
    _background:url(img/dot_ie6.png) -10px center no-repeat;
    *zoom:1;*display:inline;*margin-left:2px;
    
}
#naviSlider li.on{
    background:url(img/dot.png) left center no-repeat;
    _background:url(img/dot_ie6.png) left center no-repeat;
}

html

<html>
<head>
    <style>
    body{
        background-color:#F7F7F7;
        font:12px 微软雅黑,宋体,Arial,sans-serif;
        margin:0px;
        /*background-image:url(../images/bg6.jpg);*/
        color:#858585;
        padding:0px;
    }
    .container{
        width:100%;
    }
    .header{
        width:1024px;
        background:white;
        margin:0 auto;
        height:120px;
    }
    .header .logo{
        float:left;
    }
    .header .logo img{
        width:300px;height:120px;
    }
    .header .search{
        float:right;
        margin-right:5px;
    }
    .header .search input{
        height:30px;
        margin-top:40px;
    }
    .menu{
        width:1024px;
        margin:0 auto;
        height:50px;
        background:#3B0000;
    }
    .menu .item{
        height:50px;
        width:100px;
        font-size:18px;
        text-align:center;
        line-height:50px;
        color:white;
        float:left;
    }
    .focus{
        background:#58C11E;
    }
    .banner{
        width:1024px;
        margin:0 auto;
    }
    .content{
        width:1024px;
        margin:0 auto;
        background:white;
        font-size:15px;
        line-height:38px;
        text-indent:30px;
        padding-top:20px;
        padding-bottom:20px;
    }
    .imglist{
        width:1024px;
        margin:0 auto;
        background:white;
    }
    .imglist img{
        width:300px;
        height:200px;
        margin-left:30px;
    }
    .footer{
        width:1024px;
        margin:0 auto;
        background:#3B0000;
        height:30px;
    }
    .footer .left{
        float:left;
        height:30px;
        color:white;
        margin-top:10px;
        margin-left:10px;
    }
    .footer .right{
        float:right;
        height:30px;
        color:white;
        margin-top:10px;
        margin-right:10px;
    }
    .footer .right span{
        margin-left:10px;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="logo">
                <img src="images/logo.jpg"/>
            </div>
            <div class="search">
                <input type="text" placeholder="请输入关键字..."/>
                <input type="button" value="搜索" style="background:#3B0000;border:0px;color:white;width:80px;"/>
            </div>
        </div>
        <div class="menu">
            <div class="item focus">
                网站首页
            </div>
            <div class="item">
                关于我们
            </div>
            <div class="item">
                新闻中心
            </div>
            <div class="item">
                产品展示
            </div>
            <div class="item">
                联系我们
            </div>
        </div>
        <div class="banner">
            <img src="images/banner.jpg"/>
        </div>
        <div class="content">
            说起奶茶，大家都会想到从奶茶店直接买来的奶茶，殊不知长期使用塑料的吸管和杯子对身体是有害的。即使这样，上班族们还是习惯了买冲好的奶茶，打开就能喝，不仅节约时间，最重要的是方便。今天教大家DIY健康版缓压奶茶，玫瑰奶茶，只需3分钟。既简单、方便，最重要的是健康！
            目前市场上常见的品牌奶茶有张阿姨、黑泷堂、COCO等等，这些品牌都可以加盟。品牌奶茶无论是市场前景还是口碑都不错。例如阿姨奶茶，品牌知名度比较高，而且阿姨奶茶源自台湾，有台式的技术，好的原料保障、提供保姆式服务等，对于新手来说，还是有一定保障的。
        </div>
        <hr style="width:1024px;margin:0 auto;">
        <div class="imglist">
            <img src="images/1.jpg"/>
            <img src="images/2.jpg"/>
            <img src="images/3.jpg"/>
        </div>
        <div class="footer">
            <div class="left">
                小青人版权所有
            </div>
            <div class="right">
                <span>首页</span>
                <span>关于我们</span>
                <span>产品展示</span>
                <span>联系我们</span>
            </div>
        </div>
    </div>
</body>
</html>

posted @ 2022-01-15 17:57 灰幕阅读(54) 评论(0) 收藏举报

刷新页面返回顶部

shaadou

Day11

公告