day32-js

一.js示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // document.write("helloworld");
        alert("helloworld");
    </script>
</head>
<body>

</body>
</html>

　　

二.引入外部js文件

    <script type="text/javascript" src="js/hello.js"></script>

　

三.条件判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var score=70;
        if (score>90){
            document.write("优秀");
        }else if(score>=75){
            document.write("良好");
        }else if(score>=60){
            document.write("及格");
        }
    </script>
</head>
<body>

</body>
</html>

　　

四.循环案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        for (var i=1; i<=6;i++){
            var space=6-i;
            for (var j=1;j<=space;j++){
                document.write(" ");
            }
            var xing=i*2 -1;
            for (var k=1;k<=xing;j++){
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</head>
<body>

</body>
</html>

　　

五.小米商城

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .topbar{
            height: 40px;
            background-color: #333333;
            font-size: 16px;
        }
        .topbar .topbar-sites{
            float:left;
            margin-left: 200px;
            margin-top: 7px;
        }
        .topbar .topbar-sites a{
            color:  #b0b0b0;
            text-decoration: none;
        }

        .topbar .cart {
            float:right;
            margin-right: 200px;
            margin-top: 7px;
        }

        .topbar .cart a{
            color:  #b0b0b0;
            text-decoration: none;
        }
        .site-header{
            height: 100px;
            border: 1px solid red;
        }
        .site-header-logo{
            width: 50px;
            height: 50px;
            background-color: red;
            float:left;
            margin-top: 25px;
            margin-left: 200px;
        }
        .site-header .site-header-nav ul{
            list-style: none;
            margin-left: 600px;
            margin-top: 35px;
        }
        .site-header .site-header-nav ul li{
            float: left;
            margin-right: 20px;
        }
        .site-header .site-header-nav ul li a{
            color:#333;
            text-decoration: none;
        }
        .site-header .site-header-search input[type=text]{
            float: left;
            margin-left: 200px;
            border: 1px solid #e0e0e0;
            width: 223px;
            height: 48px;
            margin-top: -10px;
        }
        .site-header .site-header-search input[type=submit]{
            float: left;
            border: 1px solid #e0e0e0;
            width: 50px;
            height: 50px;
            margin-top: -10px;
        }
        .category .category-list{
            width: 250px;
            height: 500px;
            border: 1px solid red;
            margin-left: 200px;
        }
        .category .category-list ul {
            list-style: none;
        }
        .category .category-list ul {
            margin-top: 50px;
        }
        .category .category-list ul a{
            line-height: 42px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="topbar">
    <div class="topbar-sites">
        <a href="">小米商城</a> |
        <a href="">MlUl</a> |
        <a href="">loT</a> |
        <a href="">云服务</a> |
        <a href="">小爱开放平台</a> |
        <a href="">金融</a> |
        <a href="">有品</a> |
        <a href="">政企服务</a> |
        <a href="">Select Region</a>
    </div>
    <div class="cart">
        <a href="">登录</a> |
        <a href="">注册</a> |
        <a href="">消息通知</a> |
        <a href="">购物车 (0)</a>
    </div>
</div>
<div class="site-header">
    <div class="site-header-logo"></div>
    <div class="site-header-nav">
        <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>
            <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>
    </div>
    <div class="site-header-search">
        <input type="text" value="">
        <input type="submit" value="">
    </div>

</div>

<div class="category">
    <div class="category-list">
        <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>
            <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>
    </div>
    <div class="category-slider">
        <a></a>
    </div>
</div>



</body>
</html>

　　

　line-height :行间距

 

posted @ 2019-06-19 22:52  475297133czt  阅读(25)  评论(0)    收藏  举报